Skip to content

🚀 Deploy PWA with MERN stack via Docker + Pulumi ✨

Latest
Latest
Compare
Choose a tag to compare
@mohammadzainabbas mohammadzainabbas released this 03 Jan 02:42
· 661 commits to main since this release
v3.0
d5854e3

Pulumi Fundamentals - Tutorial

Deploy

Overview

A tutorial-style typescript based Pulumi program with sample progressive web application (PWA) the Pulumipus Boba Tea Shop; built with MongoDB, ExpressJS, ReactJS, and NodeJS (the MERN stack).

Note

This tutorial is part of official Pulumi tutorials. You can follow along here.

Key Concepts

  • Create a Pulumi Project
  • Pull Docker Images
  • Configure and Provision Containers

Prerequisites

  • Pulumi (Account and CLI)
  • Docker
  • TypeScript or JavaScript (NodeJS v14+)

Quick Start

Setup

  1. Clone the repo:
git clone https://github.com/mohammadzainabbas/pulumi-labs.git

or if GitHub CLI is installed:

gh repo clone mohammadzainabbas/pulumi-labs
  1. Change directory:
cd tutorial-pulumi-fundamentals
  1. Install dependencies:
yarn

or if you prefer npm:

npm install

Caution

If you are using npm, make sure to delete yarn.lock file first before installing dependencies.

  1. Deploy via Pulumi:
pulumi up

Note

Source code of Pulumipus Boba Tea Shop application (backend, frontend and database) is available here.

  1. Access the application by open the following URL in the browser:
pulumi stack output frontendUrl

Tip

By default, the application is deployed to http://localhost:3001. You can change the port by setting the frontendPort pulumi config variable as follows:

pulumi config set frontendPort <port>
  1. Cleanup:
pulumi destroy

Warning

This will delete all the resources (pulled images, containers, network) created by this Pulumi program.

Add new item

If you want to add a new item to your app, you can do so by making a POST request like the following:

curl --location --request POST 'http://localhost:3000/api/products' \
--header 'Content-Type: application/json' \
--data-raw '{
    "ratings": {
        "reviews": [],
        "total": 63,
        "avg": 5
    },
    "created": 1600979464567,
    "currency": {
        "id": "USD",
        "format": "$"
    },
    "sizes": [
        "M",
        "L"
    ],
    "category": "boba",
    "teaType": 2,
    "status": 1,
    "_id": "5f6d025008a1b6f0e5636bc7",
    "images": [
        {
            "src": "classic_boba.png"
        }
    ],
    "name": "My New Milk Tea",
    "price": 5,
    "description": "none",
    "productCode": "852542-107"
}'

Important

The above request will add a new drink item called  
 My New Milk Tea
  to the app. This is just an example. You can change the request body as per your needs.

Full Changelog: v2.0...v3.0

Assets 2
Loading