Skip to content

Getting Started with React

This quickstart launches a React static site to AWS via Nullstone. In production, this configures your static site with a CDN so that static assets are served close to your users.

This quickstart contains a walkthrough for generating a React app. A working example is available to fork at nullstone-io/react-quickstart.

TIP

This quickstart is based off the official Create React App guide.

Create React app

In this quickstart, we are creating a React app in the current directory using create-react-app generator.

Install React generator

Install the create-react-app generator globally.

yarn global add create-react-app

Create app

Generate a React app in the current directory.

yarn create react-app .

Launch to Nullstone

Create app

When launching to Nullstone, we're going to be creating an app in the Nullstone UI and attaching capabilities that automatically configure our app. Follow these steps in the Nullstone UI.

  1. Create a static site.
    • Name: In this example, we're naming our app react-quickstart
    • Framework: react
    • App Type: Static Site
  2. From the Domains tab for the application, add a subdomain. (This will automatically attach a CDN capability)

Provision

Our application is ready to launch. Click "Launch" through the UI or issue up through the CLI.

nullstone up --wait --app=react-quickstart --env=dev

Build

Once your application is provisioned, build your app into the ./dist directory.

yarn build

Deploy

Run launch to push your static assets and deploy the service with a new version.

nullstone launch --source=./dist --app=react-quickstart --env=dev

Troubleshooting

Auto-versioning

When pushing your image, Nullstone performs auto-versioning if you are in a git-tracked directory. Nullstone selects the short commit SHA (a unique 8-character token) from the git repository to tag the docker image.

To use a manual version, issue launch with --version (this example uses 1.0.0).

nullstone launch --source=./dist --app=react-quickstart --env=dev --version=1.0.0

Rollback

All static assets from your deployments are stored in your cloud account. When you want to rollback, you issue nullstone deploy with the desired version. This will cause your CDN to use an older version of your static site.

nullstone deploy --app=react-quickstart --env=dev --version=0.1.1
React has loaded