React Builder Example

Example of building a React fullstack application or static site

Requirement

Node.js must be installed, with its package manager, npm.

Create

To create a new project based on this example, clone this repository and give it a new name.

git clone --depth 1 https://github.com/TangibleInc/react-builder-example app-name

Go into the created project, and remove the .git folder.

cd app-name
rm -rf .git

Run git init to start a new repository as needed.

Install

npm install

Develop

Build during development - watch files and rebuild

npm run dev

After running this command, it will wait and rebuild scripts and styles as you edit the files.

When you're done, press CTRL+C to exit the process.

Static site

Export

Export as static site

npm run export

The folder build/public will contain the complete site.

Deploy

Create a file called deploy at the root of the application.

touch deploy && chmod +x deploy

The deploy script should sync the static site to a remote server.

Example:

#!/bin/bash

rsync -vrlptz --delete ./build/public/ user@server:apps/app-name

Note the trailing / which is required for the source.

Run the following to deploy after export.

./deploy

Fullstack

For a fullstack application, PM2 is the recommended process manager.

This project includes pm2.config.js, and NPM scripts in package.json to start/stop the application process. The default build command copies files needed for production to the build folder.

Environment

Copy the file .env.development to .env.production.

cp .env.development .env.production

The development env file is used for local development. Define all environment variables required by the application server.

The production env file must define the same set of environment variables for the production server. It is excluded from Git.

Build

Build for production

npm run build

Try

This following command runs the built server in production mode, as a test run.

npm run try

Deploy

Follow the same step as a static site, and create a deploy script.

Change the rsync source to the whole build folder, to sync client and server.

rsync -vrlptz --delete ./build/ user@server:apps/app-name

Then add a line to restart the application after deploy.

ssh user@server "cd ~/apps/app-name && npm run restart"

Run the following to deploy after build.

./deploy