Deployment/Hosting Node.js App Using render.com and GitHub

Introduction

The following provides information on how to deploy a Node.js application using GitHub and https://render.com/. In addition, we provide sample code that makes a connection to MongoDB for data storage and retrieval.

First you will need to upload a Node.js project to GitHub. Then, you will connect the GitHub project from render.com. To see the interaction with the database, you need a MongoDB Atlas connection string. See https://cloud.mongodb.com/ for additional information.

The sample Node.js application allows you to clear a collection, insert information about 4 movies into the database and display the movies. The sample code distribution can be found at DeploymentExample.zip. The endpoints associated with the code distribution are:

• https://YOUR_RENDER_URL/insertMovies
• https://YOUR_RENDER_URL/listMovies
• https://YOUR_RENDER_URL/clearCollection
• https://YOUR_RENDER_URL/getSummary (getSummary is testing templates/views)

An example of the deployed code can be found at https://www.terpconnect.umd.edu/~nelson/deploy/

Instructions

1. Download the above code distribution (DeploymentExample.zip) and open the project in VSCode.
2. Have your MongoDB Atlas connection string available.
3. Notice that in the code distribution (DeploymentExample/MoviesSystem.js) we have disabled the .env

      /*
        require("dotenv").config({
        path: path.resolve(__dirname, "credentialsDontPost/.env"),
      });
      */
           

   When using render.com, you will specify the MongoDB connection string value, and the above will not be needed (do not uncomment the above when deployig to render). In render.com do not add the quotes that usually surround the connection string that appears in the .env file.
4. You may want to first try the code locally, so you know what it is doing, and then try the deployment process. To run it locally, uncomment the require("dotenv") ... we mentioned above, and update the .env file (under credentialsDontPost) with the MONGO connection string. The variable used for the connection string is named MONGO_CONNECTION_STRING. Once you have tested the code locally, comment the above require().
5. Upload your project to GitHub using the information available at UploadVSCodeProjectToGitHub.shtml.
6. To deploy your project to render
   1. Sign up to https://render.com/ using GitHub to sign-in.
   2. Select the "+Add new" option and select "Web Service".
   3. Under "Git Provider" select (from the list you will see below "Git Provider") the GitHub repository you want to host on render.
   4. Provide a name (by default the GitHub repository name is used).
   5. Scroll down to select the Language (e.g., Node).
   6. Under "Build Command" enter the build command (e.g., npm install)
   7. Under "Start Command" provide the start command (what you would execute in Node.js to run the application, for example, node MoviesSystem.js).
   8. Under "Instance Type" select the "Free" option (next to "For hobby projects").
   9. Environmental variables can be entered afterwards (under the Environment Variables" section) by entering the name and value in separate text fields. If in your original project you define a location (e.g., a folder with a .env file), then comment that out. Setting the variable and value in render will allow process.env to have access to the value. Also, when providing a value to an environmental variable, do not include quotes. For example, when providing a value for the variable MONGO_CONNECTION_STRING do not add the quotes that you usually have in the .env file.
   10. Finally, select the "Deploy Web Service" button you will see at the bottom. If, after pressing this button, you see a request for credit card information, it is because you did not select the "Free" option.
   11. After selecting the button, you will see the URL to your server and below a window with information about the deployment progress (you may need to scroll down). You will see the word "Building" during the building process. It may take some time for the built to be completed.
   12. After commiting changes in GitHub, there will be an automatic deployment in render. You can also select a deployment by selecting (under "Manual Deploy") the option "Deploy latest commit".

Miscellaneous

1. When you log on to render, access the dashboard (https://dashboard.render.com/). To the left, select "Projects" and then to the right, scroll down to find any project you have deployed. If you select the project, you will see to the left "Events" and "Settings". "Events" has all the deployments you have attempted; "Settings" has different project settings. Environmental variables will be available in the "Environment" section.
2. If your built is not successful
   1. Check that you have specified the correct start command; typos will get in the way.
   2. If you copy an environmental string, the copying and paste process may have broken the string in several pieces.

Web Accessibility