How to set up a React app with Create React App and how to deploy it with 4everl

97 阅读1分钟

React is a JavaScript library for building user interfaces. In this guide, we will cover how to set up a React app with Create React App and how to deploy it with 4everland.

image.png

Step 1: Set Up Your React Project

Start by setting up your React application using the Create React App (CRA) CLI tool. With this, you can generate a project to start and run React.

To create a new app, you may choose yarn, npx or npm, following is the method of npm:

If you would prefer other methods, please check Create React App ( // create-react-app.dev/docs/gettin… ) for more information.

Step 2: Deploying Your React Project with 4everland

To deploy a React project with 4everland for Git, make sure it has been pushed to GitHub repository.

Start a deployment, click on "Import", then select your connected Git account.

1. Setup Root Directory

Setup the root directory, for most of the project just keep it default, for monorepo, a sub directory could be selected, this is where npm install and build command runs.

2: Configurate Build Settings

A default framework should be selected after root directory is set. A framework would have default Build Commands and Output Directory, switch on Override to override default settings.

3: Environment Variables

Optionally, Set Environment Variables if required, which could be accessed via process.env.VARIABLE_NAME in your code.

4: Checkout build status

Build status:

  • Created: A new task is created
  • Queued: The task is pending in a queue, should be processed soon
  • Running: The task is running in progress
  • Success: All building steps, deployment steps is done
  • Failure: Exception/Error while building or deploy the sit

5: Checkout deployment history

  • Click on the logo to return to the project list
  • Click on a project to check out details
  • Click on Deployments on the navigation tab to checkout deployment histories

If the build steps failed and build settings needs to be updated, checkout Project Settings.