Project: Mars Mission Launch - Complete Production App

The final application ready for launch! Your code is flying to Mars!

1// vite.config.js - Production ready
2import { defineConfig } from 'vite'
3import vue from '@vitejs/plugin-vue'
4import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
5import { visualizer } from 'rollup-plugin-visualizer'
6
7export default defineConfig({
8  plugins: [
9    vue(),
10    ViteImageOptimizer({
11      jpg: { quality: 80 },
12      png: { quality: 80 },
13      webp: { quality: 80 }
14    }),
15    visualizer({
16      open: true,
17      gzipSize: true
18    })
19  ],
20
21  build: {
22    outDir: 'dist',
23    sourcemap: false,
24    minify: 'terser',
25
26    terserOptions: {
27      compress: {
28        drop_console: true,
29        drop_debugger: true
30      }
31    },
32
33    rollupOptions: {
34      output: {
35        manualChunks: {
36          'vue-vendor': ['vue', 'vue-router', 'pinia'],
37          'utils': ['@vueuse/core']
38        }
39      }
40    }
41  },
42
43  server: {
44    port: 3000,
45    open: true
46  }
47})
48
49// package.json
50{
51  "name": "gallery-app",
52  "version": "1.0.0",
53  "scripts": {
54    "dev": "vite",
55    "build": "vite build",
56    "preview": "vite preview",
57    "test": "vitest",
58    "test:ui": "vitest --ui",
59    "test:coverage": "vitest --coverage",
60    "lint": "eslint . --ext .vue,.js,.ts",
61    "format": "prettier --write .",
62    "type-check": "vue-tsc --noEmit",
63    "deploy": "npm run build && vercel --prod"
64  }
65}
66
67// .github/workflows/ci.yml
68name: CI/CD
69
70on:
71  push:
72    branches: [main, develop]
73  pull_request:
74    branches: [main]
75
76jobs:
77  test:
78    runs-on: ubuntu-latest
79
80    steps:
81      - uses: actions/checkout@v3
82
83      - name: Setup Node
84        uses: actions/setup-node@v3
85        with:
86          node-version: 18
87          cache: 'npm'
88
89      - name: Install dependencies
90        run: npm ci
91
92      - name: Lint
93        run: npm run lint
94
95      - name: Type check
96        run: npm run type-check
97
98      - name: Run tests
99        run: npm run test:coverage
100
101      - name: Upload coverage
102        uses: codecov/codecov-action@v3
103
104  build:
105    runs-on: ubuntu-latest
106    needs: test
107
108    steps:
109      - uses: actions/checkout@v3
110
111      - name: Setup Node
112        uses: actions/setup-node@v3
113        with:
114          node-version: 18
115          cache: 'npm'
116
117      - name: Install dependencies
118        run: npm ci
119
120      - name: Build
121        run: npm run build
122
123      - name: Upload build artifacts
124        uses: actions/upload-artifact@v3
125        with:
126          name: dist
127          path: dist
128
129  deploy:
130    runs-on: ubuntu-latest
131    needs: build
132    if: github.ref == 'refs/heads/main'
133
134    steps:
135      - uses: actions/checkout@v3
136
137      - name: Download build artifacts
138        uses: actions/download-artifact@v3
139        with:
140          name: dist
141          path: dist
142
143      - name: Deploy to Vercel
144        uses: amondnet/vercel-action@v20
145        with:
146          vercel-token: ${{ secrets.VERCEL_TOKEN }}
147          vercel-org-id: ${{ secrets.ORG_ID }}
148          vercel-project-id: ${{ secrets.PROJECT_ID }}
149          vercel-args: '--prod'

1# Dockerfile - Multi-stage build
2FROM node:18-alpine AS builder
3
4WORKDIR /app
5
6# Copy package files
7COPY package*.json ./
8
9# Install dependencies
10RUN npm ci --only=production
11
12# Copy source
13COPY . .
14
15# Build
16RUN npm run build
17
18# Production stage
19FROM nginx:alpine
20
21# Copy build
22COPY --from=builder /app/dist /usr/share/nginx/html
23
24# Copy nginx config
25COPY nginx.conf /etc/nginx/conf.d/default.conf
26
27# Health check
28HEALTHCHECK --interval=30s --timeout=3s \
29  CMD wget --quiet --tries=1 --spider http://localhost/ || exit 1
30
31EXPOSE 80
32
33CMD ["nginx", "-g", "daemon off;"]

1# nginx.conf - Optimized
2server {
3  listen 80;
4  server_name _;
5  root /usr/share/nginx/html;
6  index index.html;
7
8  # Gzip
9  gzip on;
10  gzip_vary on;
11  gzip_types text/plain text/css text/xml text/javascript
12             application/x-javascript application/xml+rss
13             application/javascript application/json;
14
15  # Security headers
16  add_header X-Frame-Options "SAMEORIGIN" always;
17  add_header X-Content-Type-Options "nosniff" always;
18  add_header X-XSS-Protection "1; mode=block" always;
19
20  # SPA routing
21  location / {
22    try_files $uri $uri/ /index.html;
23  }
24
25  # Cache static assets
26  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
27    expires 1y;
28    add_header Cache-Control "public, immutable";
29  }
30
31  # Don't cache index.html
32  location = /index.html {
33    add_header Cache-Control "no-cache, must-revalidate";
34  }
35}

CONGRATULATIONS! You have completed the NOVA LAB training!

Your code has passed all pre-launch tests and is ready for the Mars mission!

Now your application:

• Is fully tested (all systems checked)
• Optimized for performance (ready for harsh space conditions)
• Ready for deployment (launch procedure completed)
• Has a CI/CD pipeline (automated control systems)
• Runs in a Docker container (hermetic capsule)

MISSION COMPLETED SUCCESSFULLY!

Your code is launching to Mars. You are now a software engineer ready to build systems for the future of humanity! Year 2087 - Welcome to the world of professional Vue.js applications for Mars colonization!