How to deploy your "CreateReactApp" with a single command
Tags: react, javascript, typescript, aws
Published: 2019-07-09 09:28:29

__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](https://www.infrastructure-components.com/page?ref=devto_deploycra&dest=https://codeburst.io/how-to-create-and-deploy-a-serverless-react-app-af40aee52420) --

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](https://nodejs.org/en/download/package-manager/)'s an overview of how you can install Node.js on your machine. npm installs with Node.js automatically.

1. Run the script `npx create-react-app my-app`. This creates a sub-directory `my-app` and puts your boilerplate code there. [Here](https://github.com/facebook/create-react-app)'s the official page.
 
By now, you should have got the following project-structure:

```bash
─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](https://www.infrastructure-components.com/page?ref=devto_deploycra&dest=https://github.com/infrastructure-components/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:

```bash
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`
 

{% gist https://gist.github.com/frankzickert/c7fa164f57f5ba3b5ffe275bff4fafcb %}


## Start locally

The library [Infrastructure-Scripts](https://www.infrastructure-components.com/page?ref=devto_deploycra&dest=https://github.com/infrastructure-components/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:


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

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

```bash
"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](https://www.infrastructure-components.com/page?ref=devto_deploycra&dest=/) provide a managed service. 

1. At [www.infrastructure-components.com](https://www.infrastructure-components.com/page?ref=devto_deploycra&dest=/), sign in with your GitHub account.
1. Enter the name of the project that you specified as `stackname` in your `<SinglePageApp />` component.
1. Enter the name of your `<Environment />` component.
1. 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.

![A successful deployment](https://infrcomp-code-architect-assets-prod.s3-eu-west-1.amazonaws.com/deployed.png)

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](https://www.infrastructure-components.com/page?ref=devto_deploycra&dest=/) 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](https://www.infrastructure-components.com/page?ref=devto_deploycra&dest=https://spectrum.chat/infrastructure?tab=posts). Thank you!

Our [Documentation](https://www.infrastructure-components.com/page?ref=devto_deploycra&dest=https://infrastructure-components.readthedocs.io) describes how to use Infrastructure-Components in more detail.

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


{% github infrastructure-components/infrastructure-components %}