Skip to Content
Module 421

Deploying MERN Applications

Module Summary

This module transitions from local development to production deployment, covering the essential concepts and tools required to launch a full-stack MERN application. Learners will explore the principles of Continuous Integration and Continuous Deployment (CI/CD), understand the end-to-end workflow for deploying a web application, and gain hands-on experience with a modern hosting platform. The focus is on preparing an application for a live environment, managing production-level configurations, and understanding the processes that automate and simplify deployment.

Learning Objectives

  • Understand the core concepts and benefits of Continuous Integration and Continuous Deployment (CI/CD).
  • Outline the complete workflow for deploying a MERN application, from code commit to a live website.
  • Identify and compare common hosting services for full-stack applications (e.g., PaaS, IaaS).
  • Prepare a Node.js/Express backend and a React frontend for a production environment.
  • Gain practical experience deploying a MERN application to a cloud hosting service like Render.

Learning Outcomes

Upon completion of this module, learners will be able to prepare a MERN stack application for a production environment and deploy both the frontend and backend services to a modern cloud hosting platform, successfully connecting them to a live, publicly accessible URL.

Module Outline

Lesson 1: Deployment Fundamentals & CI/CD

  • Time: 2.5 hours
  • Topics:
    • What is “Deployment”? From localhost to the world.
    • The Production Environment: Key differences from development (e.g., performance, security, error handling).
    • Introduction to CI/CD: Automating the build, test, and deployment pipeline.
      • Continuous Integration (CI): Merging code, running automated tests.
      • Continuous Deployment (CD): Automatically deploying successful builds to production.
    • The Deployment Workflow:
      1. Pushing code to a Git repository (e.g., GitHub).
      2. CI server detects the push and triggers a build.
      3. Dependencies are installed, and the application is built for production.
      4. Automated tests are run.
      5. If tests pass, the build is deployed to the hosting provider.
  • Activities:
    • Whiteboarding a CI/CD pipeline for a MERN application.
    • Discussion: What are the risks of deploying without a CI/CD process?

Lesson 2: Hosting & Production Preparation

  • Time: 3 hours
  • Topics:
    • Overview of Hosting Services:
      • Infrastructure as a Service (IaaS) (e.g., AWS EC2, DigitalOcean Droplets).
      • Platform as a Service (PaaS) (e.g., Render, Heroku, Vercel).
      • Strengths and weaknesses of each model.
    • Deep Dive on Render.com: A modern PaaS for full-stack applications.
    • Preparing an application for deployment:
      • Creating production builds (npm run build).
      • Managing environment variables for production (API keys, database URIs).
      • Configuring the Express server to serve the React build’s static files.
      • Handling CORS for a production domain.
  • Activities:
    • Live demo: Configuring a simple Express/React application for a production build.
    • Group exercise: Listing all the environment variables a typical MERN app would need for production.

Lab 1: CI/CD Pipelines Analysis

  • Time: 1 hour (asynchronous)
  • Task: A reading and viewing assignment on CI/CD principles and tools, followed by a written reflection.
  • Objective: Articulate the value of a CI/CD pipeline and compare different tools used to implement one.

Lab 2: Full-Stack Deployment

  • Time: 1 hour (asynchronous)
  • Task: Deploy a simple, pre-built MERN application to Render.com by following their official documentation.
  • Objective: Successfully deploy both a backend web service and a frontend static site to Render, connecting them to create a functional, live application.

AI-Native Module Notes

This is the AI-Native version of this module, used in UCI 1018.3. It contains the same lessons and assessments as the standard module, with one difference:

- Lab 2 (AI): Full-Stack Deployment with a Builder Agent replaces Lab 2: Full-Stack Deployment. It develops the same skills within the same time allocation, and adds structured work with AI in the Builder role.

Working with AI as Builder

In this role you direct an AI agent to write code autonomously, then act as the Engineering Manager: reviewing the diff, auditing the result, testing it, and approving the commit.

Your instructor is the final authority on how this activity is scheduled and graded.

Lesson 1: Deployment Fundamentals & CI/CD