Features

• UI component
  • Folder structure
  • Login
  • Side bar
  • header
• Microfrotend support
• Axios
• Redux - npm install @reduxjs/toolkit react-redux --save
• Slice
• Thunk
• Custom Theme selection
• -----

For fresh start

usefull commands

# [1]
npm create vite@latest host-app --template react-ts
cd host-app                                       
npm install                                                
npm run dev      
npm install @originjs/vite-plugin-federation --save-dev                                          

# [2]
npm create vite@latest micro-widget --template react-ts
cd micro-widget                                       
npm install                                                
npm run dev                                                
npm install @originjs/vite-plugin-federation --save-dev

npm run build
npm run preview

# [3]
npm create vite@latest micro-ss-construction --template react-ts
cd micro-ss-construction                                       
npm install                                                
npm run dev                                                
npm install @originjs/vite-plugin-federation --save-dev

npm run build
npm run preview

# [4]
npm create vite@latest micro-posterica --template react-ts
cd micro-posterica                                       
npm install                                                
npm run dev                                                
npm install @originjs/vite-plugin-federation --save-dev

npm run build
npm run preview

micro frontend setting

import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "micro-widget", // Does not matter for import as microfrontend
      filename: "remoteEntry.js",
      exposes: {
        "./Widget": "./src/App",
      },
      shared: ["react", "react-dom"],
    })
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
})

host/parent app setting

import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "app",
      remotes: {
        // Module name is used to import app in modules
        microWidget: "http://localhost:4173/assets/remoteEntry.js"
      },
      shared: ["react", "react-dom"]
    })
  ],
})

Docker commands

docker compose up --build


docker build -t micro-furniture .
docker run -p 3001:80 micro-furniture

VM connect

chmod 400 /Users/alpitg/Downloads/sites-vm_key.pem

ssh -i /Users/alpitg/Downloads/sites-vm_key.pem azureuser@135.235.196.64


chmod 400 /Users/alpitg/Downloads/microservice-vm_key.pem
ssh -i /Users/alpitg/Downloads/microservice-vm_key.pem azureuser@74.225.250.126

removing unused Docker resources is safe (if deployment failed)

df -h
docker system df

docker system prune -a
docker builder prune -a


df -h

SSL certificate

sudo apt install certbot python3-certbot-nginx -y

sudo certbot --nginx \
-d artisanstudio.centralindia.cloudapp.azure.com


sudo certbot renew --dry-run

Nginx conf

1. Find your active Nginx site file Run:

sudo nginx -T | grep -B2 -A5 "listen 80"

or list enabled sites:

ls -l /etc/nginx/sites-enabled/

2. Edit your Nginx site configuration For example:

sudo nano /etc/nginx/sites-enabled/default

(or whichever file you found) Make sure your HTTP server block looks like this:

server {
    listen 80;
    listen [::]:80;

    server_name artisanstudios.in www.artisanstudios.in;

    # Python API
    location /api/ {

        proxy_pass http://127.0.0.1:8000/;

        proxy_http_version 1.1;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # proxy_set_header X-Forwarded-Prefix /api;
    }

    # Frontend
    location / {
        proxy_pass http://127.0.0.1:8080;

        proxy_http_version 1.1;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Save the file.

view the file

sudo cat /etc/nginx/sites-enabled/default

3. Test and reload Nginx

sudo nginx -t
sudo systemctl reload nginx

4. Install the already-created certificate Now run:

sudo certbot install --cert-name artisanstudio.centralindia.cloudapp.azure.com

Certbot should now find the matching server block and add:

listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/artisanstudio.centralindia.cloudapp.azure.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/artisanstudio.centralindia.cloudapp.azure.com/privkey.pem;

5. Verify HTTPS

sudo ss -tulpn | grep :443

Then:

curl -Ik https://artisanstudio.centralindia.cloudapp.azure.com

If you paste the output of:

sudo nginx -T | grep -E "server_name|listen"

I can tell you exactly which Nginx file needs editing.

Nginx common steps commands

1. Create certificate - Generate and install the certificate

sudo apt update
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d artisanstudios.in -d www.artisanstudios.in

2. Update nginx file

sudo nano /etc/nginx/sites-enabled/default

sudo nginx -t
sudo systemctl reload nginx

For environment.json file

sudo apt-get update
sudo apt-get install -y jq

Mongodb create on VM

docker volume create mongodb_data

docker volume ls

docker run -d \
--name mongodb \
--memory=512m \
-p 27017:27017 \
-v mongodb_data:/data/db \
-e MONGO_INITDB_ROOT_USERNAME=admin \
-e MONGO_INITDB_ROOT_PASSWORD=YourStrongPassword \
--restart always \
mongo:7

docker ps

docker logs mongodb

docker network create app-network

docker network connect app-network mongodb

Remove mongo db (but data is safe)

docker rm mongodb

docker run -d \
--name mongodb \
-p 27017:27017 \
-v mongodb_data:/data/db \
-e MONGO_INITDB_ROOT_USERNAME=admin \
-e MONGO_INITDB_ROOT_PASSWORD=YourStrongPassword \
mongo:7

Setup overview

https://domain.com | | nginx |

| | /api / | | FastAPI React