Deploy your react project with GitHub

Step 1: Add homepage to package.json​

If you skip it, your app will not deploy correctly.

Open your package.json and add a homepage field for your project:

"homepage": "https://myusername.github.io/my-app",

or for a GitHub user page:

"homepage": "https://myusername.github.io",

or for a custom domain page:

"homepage": "https://mywebsite.com",

Step 2: Install gh-pages and add deploy to scripts in package.json​

npm install --save gh-pages

Alternatively you may use yarn:

yarn add gh-pages

Add the following scripts in your package.json:

"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

The predeploy script will run automatically before deploy is run.

Step 3: Deploy the site by running npm run deploy​

npm run deploy

This will make a build and deploy it to your GitHub repository on a different branch “gh-pages branch”.

NOTE you will be using “gh-pages branch” from your cpanel to pull your built and deploy your website (MANUALLY OR AUTOMATICALLY).

Step 4: For a project page, ensure your project’s settings use gh-pages​

Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pagesbranch:

Step 5: cPanel configurations:

5.1 Install Node js

5.2 Connect to GitHub gh-pages

5.3 Add .cpanel.cml file

Requirements

Before deployment, repositories must meet the following requirements:

• A valid checked-in .cpanel.yml file in the top-level directory.
• One or more local or remote branches.
• A clean working tree.

The deployment YAML file

The .cpanel.yml file determines how and where the changed files deploy. You must check a .cpanel.yml file in to the top-level directory for each cPanel-managed repository that you deploy. The .cpanel.yml files must use the format in the examples below.

Deploy individual files

The following .cpanel.yml file deploys the index.html and style.css files to the example account’s public_htmldirectory:

---
deployment:
  tasks:
    - export DEPLOYPATH=/home/user/public_html/
    - /bin/cp index.html $DEPLOYPATH
    - /bin/cp style.css $DEPLOYPATH

• Line 1 is the beginning of a YAML file.
• Lines 2 and 3 add the deployment and tasks keys, respectively.
• Lines 4 through 6 specify an array of BASH commands to run during deployment. You can add as many commands to this array as you wish.

Note:

Get Khaled Agbaria’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

To add comments to this file, add a line that begins with the hash character (#).

Deploy an entire directory

The following .cpanel.yml file copies the images directory and all of its contents to the example account’s public_html directory:

---
deployment:
  tasks:
    - export DEPLOYPATH=/home/example/public_html/
    - /bin/cp -R images $DEPLOYPATH

• Line 1 is the beginning of a YAML file.
• Lines 2 and 3 add the deployment and tasks keys, respectively.
• Lines 4 and 5 specify an array of BASH commands to run during deployment. You can add as many commands to this array as you wish.

Note:

To add comments to this file, add a line that begins with the hash character (#).

Automatic or push deployment

Important:

cPanel’s Git™ Version Control interface (cPanel >> Home >> Files >> Git Version Control) automatically adds a post-receive hook to all cPanel-managed repositories.

• When you push changes directly to a cPanel-managed repository that includes a .cpanel.yml file, the hook deploys those changes automatically.
• For more information, read Git’s githooks documentation.

With push deployment, a single git push command sends changes from your local computer to your cPanel-managed repository. The system then automatically runs the commands in your .cpanel.yml file. This configuration will send changes from the cPanel-managed repository to a production directory. (For example, to the directory that contains your website’s public files.)

Note:

You can use manual deployment to deploy your repository again without new changes.

Manual or pull deployment

With pull deployment, the git push command sends changes from your local computer to a remote repository.

• When you click Update from Remote in the Pull or Deploy tab of the Manage section of cPanel’s Git™ Version Control interface (cPanel >> Home >> Files >> Git Version Control), the system retrieves changes from the remote repository and applies them to the cPanel-managed repository.
• When you click Deploy HEAD Commit, the system runs the commands in your .cpanel.yml file to send changes from the cPanel-managed repository to a production directory. (For example, to the directory that contains your website’s public files.)

References :

Deployment | Create React App

Guide to Git™ - Deployment | cPanel & WHM Documentation