CSE 340: Web Backend Development

W01 Learning Activity: Deploy your site

Overview

In this activity, you will deploy your web application to a cloud hosting service so that it can be accessed over the internet.

Activity Instructions

Complete the steps of this activity to create and deploy your site to Render.com, the free cloud hosting service you will use for this course.

Sign up for a Render.com account

Complete the following steps:

1. In a web browser, navigate to Render.com.
2. Click the Get Started button (likely in the top right corner) to register for a new account.
3. For your account type, select GitHub. By using the GitHub login method it will connect your Render.com and GitHub accounts together and make the deployment steps easier later.
4. You should see a prompt to authorize Render to access your GitHub identity. Follow the steps in this screen to authorize your GitHub account to be used.
5. You should then arrive at the Render.com dashboard.

Create a new Web Service

Complete the following steps:

1. Return to Render.com and sign in to arrive at the dashboard page.
2. Click the option create a new Web Service (New Web Service ->).
3. You should arrive at the Source Code setting with the Git Provider tab selected.
4. If no repositories are found, click the GitHub button to configure GitHub to allow Render to access your repositories.
   • You may select All repositories so that Render can access any repository you create, or you may select the specific repository you created for this course.
   • Click the Install button.
5. On the Git Provider tab at Render, select the repository for this course.
6. Fill out the form as follows:
   • Name: Add a unique name for the service. This is a label that will help you distinguish it from others. It should be simple and descriptive, such as cse340 or perhaps add your initials after it.
   • Language: select Node.
   • Branch: Leave as the default of main.
   • Region: Select the region that is nearest to you in the world. This is important because this is where your service will be created.
   • Root directory: Leave this empty.
   • Build Command: Leave this as npm install .
   • Start Command: Change this to npm start .
   • Instance type: Select Free.
   • Environment Variables: Set a variable named NODE_ENV with the value production .
   • Auto Deploy: Expand the Advanced section to find this setting. Leave this set to On Commit so that future changes to your repository will automatically update your deployed site.
   • Click the Deploy Web Service button when you have set all the settings as described.
7. Wait for the deployment process to complete. This may take several minutes as Render installs dependencies and starts your application.
8. Select Events from the Render dashboard to see the progress and any logs related to your deployment.

Verify your deployment

Once the deployment is complete, on the Events tab on the Render dashboard, you should see a green check mark indicating that your service is live and that the latest deployment has succeeded. Complete the following steps:

1. From the Render dashboard, click on your newly created web service to open its details page.
2. Locate the URL provided for your web service. It should look something like https://cse340-a6v0.onrender.com.
3. Click on the URL to open your deployed web application in a new browser tab.
4. Verify that your application is functioning as expected. Navigate through the pages and test any interactive features to ensure everything is working correctly.

Submission

Congratulations! You have now completed all of the learning activities for this week.

To submit this activity, return to Canvas and submit the associated quiz there.

Other Links:

• Return to: Week Overview | Course Home