How to deploy your "CreateReactApp" with a single command

TL;DR: create-react-app makes it easy to get started with React. But how do you deploy your React application to AWS? This post tells you how!

Facebook's create-react-app provides a convenient way to get started with React. You don't have to struggle with configuring Webpack, Typescript, and the like. You just start your deep dive into React!

There's just one problem: How do you deploy your app?

A web-application is not really useful if it is not online, right?

Let's get started!

Solution Overview

At the end of this post, you'll be able to deploy your React app with:

npm run deploy-my-app

And it's not too complicated. Promised.

We'll use the following things:

• Node.js is a Javascript runtime. It allows you to run Javascript-based scripts on your development machine.
  create-react-app is such a script that requires Node.js (8.10+).

• npx is a tool for executing Node packages.

• npm is a package manager for Node.js. It allows you to install packages and libraries from a central repository.

• create-react-app is a script that creates the boilerplate of a React project that does not require any build configuration.

• Infrastructure-Components allow you to define the architecture of your React app by a set of React components, rather than configuration files.

• Infrastructure-Scripts are scripts that let you start and deploy an Infrastructure-Components-based project without any configuration.

• Code-Architect is a managed service for Infrastructure-Components. It lets you deploy your app to a managed AWS. You don't need to setup your own account.

What you might have done already...

-- You can skip this chapter if you have your app up and running locally --

-- Do you want to setup a new project? Have a look at my other post --

For this post is about how to deploy a create-react-app project, I'd assume you have your project in place.

If not, here's a brief summary of required steps:

1. install Node.js and npm. Here's an overview of how you can install Node.js on your machine. npm installs with Node.js automatically.

2. Run the script npx create-react-app my-app. This creates a sub-directory my-app and puts your boilerplate code there. Here's the official page.

By now, you should have got the following project-structure:

─my-app
  ├─node_modules
  ├─public
  ├─src
  │ ├─App.css
  │ ├─App.js
  │ ├─App.test.js
  │ ├─index.css
  │ ├─index.js
  │ ├─logo.svg
  │ └─serviceWorker.js
  ├─.gitignore
  ├─package.json
  └─README.md

The entry point of your app is src/index.js. This file renders your main React component src/App.js.

You should be able to start (locally) your project with npm start.

Architecture as a Function

The library infrastructure-components provides React components that let us define the architecture of our React app easily - through React components.

You can install infrastructure-components easily:

npm install --save infrastructure-components

Now, we create a new entry file (index.tsx) that we put into the src folder of our project. In this file, we define

• the architecture of our app: <SinglePageApp />
• deployable environment(s): <Environment />
• routes that we want our app to serve: <Route />

As you can see in the example below, the root-<Route /> (path="/") component takes our App as a parameter. This means that our root-path ("/") will serve this component.

Further, we move the import of the index.css from the index.js (our old entry point that we don't use anymore) to our new entry point file index.tsx

Start locally

The library Infrastructure-Scripts provides scripts that allow us building, starting, and deploying an app that uses Infrastructure-Components.

For this library contains many tools that we only need during development, we install this library as a devDependency. The library uses the serverless stack. Let's install this, too:

npm install --save-dev \
    infrastructure-scripts \
    serverless \
    serverless-single-page-app-plugin

We edit the build command in your package.json file:

"scripts": {
  "build": "scripts build src/index.tsx"
}

Let's build our app with: npm run build

The build process adds further scripts to your package.json, like: npm run {your_app_name} (replace {your_app_name} with the stackName of your SinglePageApp-Component).

npm run {your_app_name} starts your web-app in hot-development-mode. Wait until the console says that your app is running and open localhost:3000 in your browser. You should see the spinning React logo - or whatever your own component renders.
Changes to your source code become effective immediately in this mode. Just reload your page in the browser.

Deploy

So far, we have not achieved much beyond the capabilities of create-react-app. This will change now!

We will deploy our app to AWS! If you don't have an AWS account, don't worry. Infrastructure-Components provide a managed service.

1. At www.infrastructure-components.com, sign in with your GitHub account.
2. Enter the name of the project that you specified as stackname in your <SinglePageApp /> component.
3. Enter the name of your <Environment /> component.
4. In the overview, click on Show Credentials. Now put the line CODE_ARCHITECT_ACCESS=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx into the .env file at the root of your project.

Let's now deploy our app with: npm run deploy-{env-name}

The deployment may take some time. Once it it through, you'll see a box with the url of your freshly deployed app.

Whenever you want to redeploy your app, just run npm run deploy-{env-name} again. From now on, this single command is all you need to deploy your app.

---

Support and Resources

Infrastructure-Components are under active development. If you find a bug, if your deployment throws an error — that is not related to your code ;-) — or when need support of any kind, please report at https://spectrum.chat/infrastructure. Thank you!

Our Documentation describes how to use Infrastructure-Components in more detail.

Infrastructure-Components are open-source! So have a look at our GitHub-repository.

infrastructure-components / infrastructure-components

React components that let you configure your infrastructure easily

Infrastructure-Components

Infrastructure-Components configure the infrastructure of your React-App as part of your React-Components.

This piece of code is all you need to create, build, and deploy a Serverless Isomorphic React App!

/** index.tsx */
import * as React from 'react'
import {
    IsomorphicApp
    WebApp
    Route
} from "infrastructure-components";

export default (
  <IsomorphicApp
    stackName = "my-isomorphic-app"
    buildPath = 'build'
    assetsPath = 'assets'
    region='us-east-1'>

    <WebApp
      id="main"
      path="*"
      method="GET">

      <Route
        path='/'
        name='My Serverless Isomorphic React App'
        render={(props) => <div>Hello World</div>}
      />

    </WebApp>
</IsomorphicApp>);

This repository provides a working example of a Serverless Isomorphic React App with Infrastructure-Components.

Installation

You can install infrastructure-components easily

npm install --save infrastructure-components

infrastructure-scripts provide all the scripts required to build, start, and deploy. This lib contains many libraries that you only need during development/deployment. Thus, install this library as devDependency::

npm install --save-dev infrastructure-scripts

Infrastructure-components use the Serverless framework <https://serverless.com/>_ that you need…

View on GitHub