How|How to set up a React app and how to deploy it with 4everland.
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.
文章图片
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:
【How|How to set up a React app and how to deploy it with 4everland.】If you would prefer other methods, please check Create React App (// https://create-react-app.dev/...) 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.
- 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.
推荐阅读
- Swift中willSet和didSet的简述
- react|react 安装
- How|How Fear Works（PartⅡ）
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- react-navigation|react-navigation 动态修改 tabBar 样式
- 清晨朗读327（How|清晨朗读327：How Successful People Network with Each Other）
- Flutter|Flutter SwiftUI React 对比