Create React App (CRA)

Create React App allows you to quickly create and run React applications with no configuration.

Deploy your client front-end websites and web applications build using create-react-app framework easily using Deploy Monk.

Follow the steps in the outline of this document (on right side) to get started.


1. Code repository

1.1 Forking existing repository

We've set up a sample CRA repository (bootstrapped using CRA's official documentation) already for you to just fork it and get started.

Goto deploymonk/frontend-react-cra on GitHub and click on Fork button on top right side

Use this repository from your GitHub account when deploying.

1.2 Creating manually

Open a terminal locally and enter following command to create a basic CRA application:

npx create-react-app example

Test the installation by running it locally:

cd example
npm start

Now that we have basic application setup, lets push the code to your VCS account (eg: GitHub or GitLab):

  1. Go to your VCS account website
  2. Create a new repository
  3. Copy the Git URL (eg: git@github.com:username/example.git)

Initialize git repository and commit files:

cd example
git init
git add .
git commit -m "First commit"

Add URL for the remote repository and push the changes:

git remote add origin git@github.com:username/example.git
git push -u origin master

2. Create project

  1. Open your Deploy Monk Console and click on Create Project button.
  2. Enter the Project name, select Cloud account and Server size and click on Save button to create the project.
  3. To learn more about projects, goto project section of this documentation website.

Great 🎉, you have just completed creating a new Deploy Monk project.

Project

3. Create project service

Click on Add Service button and fill in the information as follows:

  1. Service type, select Frontend
  2. Framework, select React
  3. Service name, enter a name for your service
  4. Repository, select the repository created in step 1
  5. Advance configurations,
    1. Build command enter this value npm run build

To learn more about services, goto project services section of this documentation website.

Now click on Save button to create the new service.

React CRA Project Service

4. Deploy the project

Click on Deploy button to deploy the project and go live.

React CRA Project Deploy

5. Preview live

Click on the URL of your service to browse the live version.

React CRA Project Live

Great 🎉, you have just completed creating a new Deploy Monk project and deploying it LIVE 🙌.