Skip to content

johntoby/deploy-ecommerce-app-to-aws-beanstalk

BranchesTags

Repository files navigation

🛒 MERN E-Commerce Application — Deployed to AWS Elastic Beanstalk

Author: Johntoby | Organization: Borderless Tech Academy
Cohort: BTA DevOps Cohort 1

A full-stack MERN (MongoDB, Express.js, React, Node.js) e-commerce application deployed to production using AWS Elastic Beanstalk with Nginx reverse proxy, Docker containerization support, and CI/CD-ready architecture.

Architecture Diagram

┌─────────────────────────────────────────────────────────────────────────────┐
│                          AWS ELASTIC BEANSTALK                               │
│                                                                             │
│  ┌────────────────────────────────────────────────────────────────────────┐ │
│  │                         EC2 Instance                                   │ │
│  │                                                                        │ │
│  │   ┌──────────────┐        ┌──────────────────────────────────────┐    │ │
│  │   │              │  :8080  │          Node.js Server              │    │ │
│  │   │    NGINX     │────────▶│                                      │    │ │
│  │   │   (Reverse   │        │  ┌─────────┐    ┌────────────────┐  │    │ │
│  │   │    Proxy)    │        │  │ Express │    │ React (Static) │  │    │ │
│  │   │              │        │  │   API   │    │   dist/         │  │    │ │
│  │   └──────────────┘        │  └────┬────┘    └────────────────┘  │    │ │
│  │                           │       │          Port: 8081          │    │ │
│  │                           └───────┼──────────────────────────────┘    │ │
│  └───────────────────────────────────┼────────────────────────────────────┘ │
│                                      │                                      │
└──────────────────────────────────────┼──────────────────────────────────────┘
                                       │
                                       ▼
                          ┌────────────────────────┐
                          │     MongoDB Atlas       │
                          │   (Cloud Database)      │
                          └────────────────────────┘

Docker Architecture (Local Development)

┌─────────────────────────────────────────────────────────────┐
│                    Docker Compose Network                     │
│                     (app-network)                             │
│                                                             │
│  ┌───────────────┐  ┌───────────────┐  ┌───────────────┐   │
│  │  React Client │  │  Node Server  │  │   MongoDB     │   │
│  │   Port: 3000  │  │  Port: 5000   │  │  Port: 27017  │   │
│  │               │──▶│               │──▶│               │   │
│  │  myapp-react  │  │  myapp-node   │  │    mongo      │   │
│  │   -client     │  │   -server     │  │               │   │
│  └───────────────┘  └───────────────┘  └───────────────┘   │
│                                          │  data-volume  │   │
│                                          └───────────────┘   │
└─────────────────────────────────────────────────────────────┘

Project Structure

deploy-ecommerce-app-to-aws-beanstalk/
├── .ebextensions/               # AWS Elastic Beanstalk configuration
│   ├── 01_node_command.config   # Sets NODE_ENV=production
│   └── 02_nginx.config         # Custom Nginx reverse proxy config
├── client/                      # Frontend (React + Redux)
│   ├── app/
│   │   ├── components/          # Reusable UI components
│   │   ├── containers/          # Redux-connected page containers
│   │   ├── helpers/             # Utility helpers
│   │   ├── styles/              # SCSS stylesheets
│   │   ├── utils/               # Token & error utilities
│   │   ├── app.js              # Main React app with routing
│   │   ├── store.js            # Redux store configuration
│   │   └── reducers.js         # Root reducer
│   └── public/                  # Static assets (images, index.html)
├── server/                      # Backend (Express.js)
│   ├── config/                  # Passport, Mailgun, Mailchimp configs
│   ├── models/                  # Mongoose data models
│   ├── routes/api/              # RESTful API endpoints
│   ├── Dockerfile              # Server Docker image
│   └── index.js                # Express server entry point
├── config/webpack/              # Webpack build configurations
├── docker-compose.yml           # Multi-container Docker setup
├── package.json                 # Dependencies & scripts
├── .ebignore                    # Files excluded from EB deployment
└── webpack.config.js            # Webpack entry config

Application Features

Feature Description
User Authentication JWT-based signup/login with Passport.js
Product Management CRUD operations for products, categories, brands
Shopping Cart Add/remove items, cart summary, checkout
Order Management Order placement, tracking, and history
Merchant Portal Merchant registration and product listing
Newsletter Mailchimp integration for email subscriptions
Contact Form Customer inquiries via Mailgun
Admin Dashboard User, product, and order management
Responsive UI Bootstrap + Reactstrap with SCSS

Tech Stack

Frontend

  • React 16 with React Router DOM
  • Redux + Redux Thunk for state management
  • Reactstrap / Bootstrap 4 for UI
  • Webpack 4 with Hot Module Replacement
  • SCSS for styling

Backend

  • Node.js with Express.js
  • MongoDB with Mongoose ODM
  • Passport.js (JWT strategy) for authentication
  • Mailgun for transactional emails
  • Mailchimp for newsletter management

DevOps & Deployment

  • AWS Elastic Beanstalk (Production)
  • Nginx as reverse proxy (via .ebextensions)
  • Docker & Docker Compose (Local development)
  • Webpack for production builds

API Endpoints

Route Description
/api/auth Authentication (login, signup, logout)
/api/user User profile management
/api/product Product CRUD operations
/api/category Category management
/api/brand Brand management
/api/cart Shopping cart operations
/api/order Order processing
/api/merchant Merchant registration/management
/api/newsletter Newsletter subscription
/api/contact Contact form submissions

Prerequisites

  • Node.js (v10.16+)
  • MongoDB (local or Atlas connection string)
  • AWS Account with Elastic Beanstalk access
  • AWS EB CLI installed
  • Docker & Docker Compose (optional, for local containers)

Local Development Setup

1. Clone the Repository

git clone https://github.com/<your-username>/deploy-ecommerce-app-to-aws-beanstalk.git
cd deploy-ecommerce-app-to-aws-beanstalk

2. Configure Environment Variables

Create a .env file in the project root:

PORT=8081
MONGO_URI=mongodb://localhost:27017/mern-ecommerce
JWT_SECRET=<your_jwt_secret>
MAILGUN_KEY=<your_mailgun_api_key>
MAILGUN_DOMAIN=<your_mailgun_domain>
MAILCHIMP_KEY=<your_mailchimp_api_key>
MAILCHIMP_LIST_ID=<your_list_id>

3. Install Dependencies & Run

npm install
npm run start:dev

The app will be available at http://localhost:8081

4. Run with Docker Compose (Alternative)

docker-compose up --build
  • Client: http://localhost:3000
  • Server: http://localhost:5000
  • MongoDB: localhost:27017

AWS Elastic Beanstalk Deployment

Deployment Architecture Flow

┌──────────┐     ┌──────────┐     ┌──────────────────┐     ┌───────────┐
│Developer │────▶│  EB CLI  │────▶│  Elastic         │────▶│    EC2    │
│  (Push)  │     │ eb deploy│     │  Beanstalk       │     │ Instance  │
└──────────┘     └──────────┘     │  Environment     │     └─────┬─────┘
                                  └──────────────────┘           │
                                                                 ▼
                                                    ┌────────────────────┐
                                                    │  Application runs  │
                                                    │  npm install       │
                                                    │  npm run build     │
                                                    │  npm start         │
                                                    └────────────────────┘

Deployment Steps

1. Initialize Elastic Beanstalk

eb init
  • Select your AWS region
  • Choose Node.js as the platform
  • Configure SSH key pair if needed

2. Create an Environment

eb create mern-ecommerce-env

3. Set Environment Variables

eb setenv MONGO_URI=<your_mongo_atlas_uri> JWT_SECRET=<secret> MAILGUN_KEY=<key> MAILGUN_DOMAIN=<domain> MAILCHIMP_KEY=<key> MAILCHIMP_LIST_ID=<id>

4. Deploy

eb deploy

5. Open the Application

eb open

Elastic Beanstalk Configuration Details

.ebextensions/01_node_command.config

Sets the NODE_ENV to production so the server serves the pre-built static React bundle.

.ebextensions/02_nginx.config

Configures Nginx as a reverse proxy:

  • Listens on port 8080 (EB default)
  • Proxies traffic to Node.js on port 8081
  • Enables gzip compression for optimized asset delivery
  • Maintains keep-alive connections (256)

.ebignore

Excludes unnecessary files from the deployment package:

  • node_modules/ (reinstalled on EB)
  • Docker files
  • .env (use EB environment properties instead)

Build & Scripts

Script Description
npm run build Production webpack build
npm start Start production server
npm run start:dev Start development server with nodemon
npm run production Alias for build
npm run postinstall Automatically runs build after npm install

Security Considerations

  • JWT tokens for stateless authentication
  • Bcrypt.js for password hashing
  • CORS enabled for cross-origin requests
  • Environment variables for sensitive configurations (never committed)
  • Nginx proxy headers (X-Real-IP, X-Forwarded-For, X-Forwarded-Proto)

Data Models

┌──────────┐    ┌──────────┐    ┌──────────┐
│   User   │    │ Product  │    │  Order   │
├──────────┤    ├──────────┤    ├──────────┤
│ name     │    │ name     │    │ cart     │
│ email    │    │ price    │    │ user     │
│ password │    │ category │    │ total    │
│ role     │    │ brand    │    │ status   │
└──────────┘    └─────┬────┘    └──────────┘
                      │
        ┌─────────────┼─────────────┐
        ▼             ▼             ▼
┌──────────┐   ┌──────────┐   ┌──────────┐
│ Category │   │  Brand   │   │   Cart   │
├──────────┤   ├──────────┤   ├──────────┤
│ name     │   │ name     │   │ products │
│ slug     │   │ slug     │   │ user     │
└──────────┘   └──────────┘   └──────────┘

Additional: Merchant, Contact

Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/new-feature)
  3. Commit changes (git commit -m 'Add new feature')
  4. Push to branch (git push origin feature/new-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License — see the LICENSE file for details.

About Borderless Tech Academy

Borderless Tech Academy (BTA) is a leading technology training institution committed to equipping learners with practical, industry-relevant DevOps, Cloud, and Software Engineering skills. This project is part of the BTA DevOps Cohort 1 curriculum, demonstrating real-world deployment of full-stack applications on AWS cloud infrastructure.

Built with ❤️ by Johntoby for Borderless Tech Academy DevOps 2026 Cohort 1

About

This repository stores the codes to host a simple MERN stack ecommerce application that id eployed using AWS elastic beanstalk

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages