Xervo

Deploying React Apps on Modulus

Deploying React Apps on Modulus

Modulus supports seamless deployments of static sites using Nginx 1.6.3 with defaults to serve your content with minimal effort. Native web apps using frameworks such as React require some extra configuration to correctly serve the application.

Prerequisites

› modulus login
Welcome to Modulus
[?] Enter your username or email: jack
[?] Enter your password:
[✓] Signed in as user jack




: all example commands assume macOS, your mileage may vary._



Bootstrap it

› npm install --global create-react-app
› create-react-app hello-modulus

This process may take a while (a little over a minute on my machine), it’s doing a lot of heavy lifting for you. In the end you will have a directory with a generated react web application, completely configured and ready for you to start development.

Let’s make sure everything worked as expected:

› cd hello-modulus
› npm start

This will open a browser window with your new bootstrapped react application. It’s fairly simple to start, but you already have a pretty powerful setup.

Customize it

Open ./src/App.js, which is the main file for your application. Make a small change and save the file. How about replacing the App-intro text:

Hello Modulus.

When you save the file your browser should refresh and you can see your changes take effect.

If you want to learn more about how create-react-app and especially react-scripts is making this happen, you might try running npm run eject, but we’ll leave that exercise for another time.

Build it

First we have to generate the static build of our react app. react-scripts makes this easy as well with a bundled command:

› npm run build

This command prepares everything we need, and even suggest a way to test the static output:

› cd build
› npm install -g http-server
› hs
# open http://localhost:8080 in your browser

Deploy it

First let’s create a project on modulus to deploy our application to:

› modulus project create
Welcome to Modulus
You are logged in as jack
[?] Enter a project name: hello-modulus
Please choose which runtime to use:
  1) Php
  2) Node.js
  3) Python
  4) DNX
  5) Java
  6) Static
  7) Meteor
[?] Image number? 6
[?] Enter a servo size in MB [192, 396, 512, 1024, or 2048] (optional, default 512): 192
[✓] New project hello-modulus created.

Now we need to get the url for the project, we’ll need that when creating our Nginx configuration

› modulus project list
Welcome to Modulus
You are logged in as jack
Current projects:

jack
----------------------
hello-modulus  Static  NONE  http://hellomodulus-84775.onmodulus.net

To run a static site on Modulus you just need to add a single file you let us know where your files are. Create a folder in the root of your project named sites-enabled and create a config file inside for your Nginx configuration:

server {
  listen 8080;
  server_name hellomodulus-84775.onmodulus.net;

  root /mnt/app/build;
  index index.html index.htm;

  # single page app routing
  location /.+\..+ {
    try_files $uri $uri/ =404;
  }

  location / {
    try_files $uri /index.html;
  }
}

Save the file and we are ready to deploy:

› modulus deploy -p hello-modulus
  Welcome to Modulus
  You are logged in as jack-test
  Selecting hello-modulus

  Compressing project...
  516.8 KB written
  Uploading project...
  Upload progress [===================] 100%
  Deploying project into Static runtime...
  Starting build.
  Creating directories for build environment.
  Downloading source.
  Executing build.
  Copying files to output directory.
  Uploading completed build.
  Provisioning and deploying bundle to servos...

Next steps

  • Make your app!
  • Track your projects capacity, response time and more on your project's metrics page
  • Customize you NGINX configuration for your needs
  • Enable Auto-Scaling or deploy to multiple IaaS/Regions

What is Xervo?

Xervo makes deploying applications in the public cloud or your own data center easy. Node.js, PHP, Java, Python, Nginx, and MongoDB supported. Full Docker support included in Enterprise version. It’s free to get started.

Share This Article

comments powered by Disqus