Deploying Your Express Application to Render

So far, you have been running your Express application locally. While this works for development, no one else can access it. In this assignment, you will deploy your practice project to Render, making it live on the internet with its own URL. You will also set up automatic deployments, so any changes you push to GitHub will automatically update your live site.

Code Review Coming Soon

Teammates will start performing code reviews later this week and/or at the start of next week. Commit and push your changes often so your live site stays up to date and reviewers can see your latest work.

Understanding Deployment

When you run pnpm dev locally, your computer is the server. Deployment means putting your application on a remote server that is always running and connected to the internet. Render is a Platform as a Service (PaaS) that handles server management for you. You provide your code, Render handles the rest: installing dependencies, running your application, and keeping it online.

Environment Variables: What to Copy to Render

Your .env file is not in Git (for security), so Render cannot access it. You will add environment variables through Render's dashboard. Here is what you need:

DB_URL: Copy this exactly from your .env file. Your cloud database works the same for local and production.
SESSION_SECRET: Copy this exactly from your .env file. This keeps user sessions working and must match for security.

Do not add these variables (Render handles them automatically or they are not needed):

ENABLE_SQL_LOGGING: Leave this out. Logging SQL queries in production creates noise and can expose sensitive data. Render treats this as false by default.
NODE_ENV: Render automatically sets this to production.
PORT: Render assigns the port dynamically. Do not set this yourself.

Build Process: npm vs pnpm

Locally you use pnpm, which saves disk space by sharing packages between projects. On Render, your app runs in its own isolated virtual machine, so this benefit does not apply. You can use either pnpm or npm on Render. The choice does not affect your application, just specify the correct commands during setup.

Automatic Deployments

When you enable auto-deploy and push to your main branch, Render automatically pulls your latest code, rebuilds your application, and deploys it. This means you can develop locally, commit changes, push to GitHub, and your live site updates within minutes. This is essential for team code reviews and rapid development.

Assignment Instructions

1. Create a Render Account

Navigate to render.com and sign up for an account. You should use the "Sign up with GitHub" option, as this simplifies the process of connecting your repositories. Using GitHub authentication allows Render to access your repositories without additional setup steps.

Render offers a free tier that is sufficient for this course. You will not need to provide payment information unless you choose to upgrade to paid features later.

2. Connect Your Repository

From your Render dashboard, create a new Web Service and connect your practice project repository. Render will walk you through the setup. Configure these settings:

Name: Choose a meaningful name (becomes part of your URL)
Branch: Select main
Build Command:
- If using pnpm: pnpm install --dangerously-allow-all-builds
- If using npm: npm install
Render does not auto-detect which package manager you use, so you must specify this explicitly. The --dangerously-allow-all-builds flag is required for pnpm because some of your dependencies (like bcrypt) compile native code specific to the operating system they run on. While npm runs these build scripts automatically, pnpm includes additional security checks that require explicit approval. This flag bypasses those checks, allowing all post-install scripts to execute during deployment.
Start Command: If using pnpm, enter pnpm run start. If using npm, enter npm run start. This runs the start script from your package.json, which executes node server.js.

Enable Auto-Deploy

Make sure "Auto-Deploy" is enabled. This automatically rebuilds and redeploys your app whenever you push to main. Without this, you would need to manually trigger deployments every time.

After initial setup, you can access these settings and your environment variables from the left sidebar (Settings and Environment).

3. Configure Environment Variables

In your Render web service dashboard, go to the "Environment" section. Add these two variables from your local .env file:

DB_URL: Copy your database connection string exactly
SESSION_SECRET: Copy your session secret exactly

Do not add ENABLE_SQL_LOGGING, NODE_ENV, or PORT. Render handles these automatically.

Double-check your values. A typo in your database URL will break the database connection, and an incorrect session secret will cause authentication issues. After adding these, Render will automatically trigger a deployment.

4. Monitor the Deployment

Watch the deployment progress in the "Logs" section. The build process takes a few minutes. If it fails, the logs will show error messages. Common issues include missing environment variables or incorrect commands. Check Render's troubleshooting documentation at render.com/docs/troubleshooting-deploys if needed.

5. Test Your Deployed Application

Once deployment succeeds, Render provides your URL (like https://your-service-name.onrender.com). Open it in your browser and test your application. Your cloud database should work the same as it does locally.

6. Submit Your Work

Take a screenshot of your practice site's home page showing the browser address bar with your Render URL visible. Submit this screenshot according to your instructor's guidelines.

Looking Ahead: Deploying Your Final Project

Within the next week, you should have your final project started with at least a working home page. Follow the same process to deploy it as a separate Render web service. This gives your teammates access to your live site for code reviews throughout the semester.

Commit and push frequently. With auto-deploy enabled, every push to main automatically updates your live site. After deploying your final project, you can remove your practice project from Render if you wish (this is optional).

Key Concepts Summary

You learned how to deploy an Express application to production and how to set up continuous deployment so that pushes to main automatically update your live site. Understanding the difference between development and production environments, and configuring the right environment variables on your host, is what keeps your live app running correctly. This assignment is first in the unit so you can verify your deployment before code reviews begin. Commit and push often so teammates see your latest work.