akmsnbc / react-playground

React Playground

Table of contents

• Overview
• Setup

Overview

React.js + Create React App + React Router + Create React App Buildpack

Setup

(for first timers)

1. Install System Dependencies

The following commands should be executed in terminal (MacOSX/Linux). Currently support Node version: 10.x.x (LTS starts Oct 2018) Currently support NPM version: 6.x.x

• Use NVM to install Node v10.x.x

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
nvm install 10
nvm use 10

• Use avn Automatic Version Switching for Node.js

npm install -g avn avn-nvm avn-n
avn setup

2. Clone Repo into local directory

You will need to clone the React Playground repository so you can develop locally on your machine. You can use the command below or use your preferred Git GUI like SourceTree, GitHub for Mac, or Tower.

git clone (link) react-playground; cd $_

3. Install project dependencies

The following two commands will install the third party frameworks and packages that Overwatch is built on.

npm install

4. Setup Environment Variables

this copies the .env.example to a config you can edit as needed

cp .env.example .env

5. Start the app

npm start

6. VSCode Debbugging

Follow VSCode instructions for debugging React application.

VSCode instructions

7. Deploy to Heroku

The buildpack deploys a React UI as a static web site.

create-react-app $APP_NAME
cd $APP_NAME
git init
heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "Start with create-react-app"
git push heroku master
heroku open