Nullstone

Appearance

Getting Started with React ​

A live example is available at https://react.nullstone.dev.

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.

shell
yarn global add create-react-app

Create app ​

Generate a React app in the current directory.

shell
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.

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

Build ​

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

shell
yarn build

Deploy ​

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

shell
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).

shell
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.

shell
nullstone deploy --app=react-quickstart --env=dev --version=0.1.1

Copyright @ 2020-2024 Nullstone