Deploying MERN app to GitHub

Deploying your MERN app code files to your account on GitHub

Project Goals

In this sixth stage of the MERN project, you will:

  • Create local and remote repos for your MERN in the main (or master) branch, link the two repos, and push your app code from local to remote.
  • Test that your MERN app files have deployed correctly by downloading and reinstalling them in a new folder on your local machine.

1: Create local and remote GitHub repos

On GitHub, your app will be stored in a new repo separate from all your other folders and files. Follow these steps:

  1. In your GitHub account create a new repo to host your app. screenshot
  2. Give your new repo a name. screenshot
  3. Do not initialise the new repo with a description, README, license, or .gitignore files. screenshot Your repo should be empty.
  4. Click the green Create repository button
  5. GitHub displays a screen that includes commands for setting up a local repo for your new app and then pushing your app files to the GitHub remote repo. screenshot
  6. In a terminal, navigate to the folder that contains the /frontend and /backend sub-folders of your MERN app.
  7. Select and copy the above commands, and paste them into a text file.   Include a git add . command as shown below, paste the commands in to your terminal, and then run them. screenshot
  8. The git remote add assumes you are using SSH and have SSH keys set up in your GitHub account. screenshot If you are using HTTPS instead, the command syntax would be as follows: screenshot

2: Verify your app has been deployed

To check your app has been deployed to GitHub, do the following.

  1. In your browser, display the GitHub repo of your app. Ensure the Code tab is selected.
  2. You should see a screen similar to the following. screenshot
  3. Near the top-right of the screen, click the dropdown arrow in the green Code button and then select the Download ZIP option. screenshot
  4. Save the downloaded ZIP file and copy it to a new folder on your local machine - for example, app-mern-ecommerce-download.
  5. In your new folder, extract the ZIP file to create two main sub-folders - /frontend and /backend.
  6. Copy into the downloaded /backend sub-folder the .env file from the /backend folder of your original Express app. This .env is required for your backend server to access your account on MongoDB.
  7. In your downloaded folder, start the ReactJS frontend and Express backend servers, and verify your code runs correctly.

Project checklist and next step

Before continuing:

icon

CHECK that your downloaded CRUD routes for creating, reading, updating, and deleting products are working correctly.