Vite (#207)

* Replace vue-cli with vite * More vite configuration * Maybe fix eslint * Update stage dockerfile, and remove the now public/index.html * Use base url for web history
thunderbird · Dec 11, 2023 · 865fb2a · 865fb2a
1 parent 6311a46
commit 865fb2a
Show file tree

Hide file tree

Showing 18 changed files with 6,671 additions and 5,117 deletions.
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -1,19 +1,19 @@
 # Appointment frontend configuration.
 
 # -- Frontend --
-VUE_APP_BASE_URL=localhost:8080
-VUE_APP_SHORT_BASE_URL=localhost:8080/user
+VITE_BASE_URL=localhost:8080
+VITE_SHORT_BASE_URL=localhost:8080/user
 
 # -- Backend API --
-VUE_APP_API_URL=localhost
-VUE_APP_API_PORT=8090
-VUE_APP_API_SECURE=false
+VITE_API_URL=localhost
+VITE_API_PORT=8090
+VITE_API_SECURE=false
 
 # -- Sentry --
-VUE_APP_SENTRY_DSN=
+VITE_SENTRY_DSN=
 
 # -- Auth scheme --
-VUE_APP_AUTH_SCHEME=password
+VITE_AUTH_SCHEME=password
 
 # For fxa
-VUE_APP_FXA_EDIT_PROFILE=
+VITE_FXA_EDIT_PROFILE=
diff --git a/frontend/.env.staging.example b/frontend/.env.staging.example
@@ -1,11 +1,11 @@
 # Production env config, do not put secrets in here !!
-VUE_APP_API_URL=stage.appointment.day/api/v1/
-VUE_APP_BASE_URL=stage.appointment.day
-VUE_APP_API_SECURE=true
-VUE_APP_SHORT_BASE_URL=https://stage.apmt.day
+VITE_API_URL=stage.appointment.day/api/v1/
+VITE_BASE_URL=stage.appointment.day
+VITE_API_SECURE=true
+VITE_SHORT_BASE_URL=https://stage.apmt.day
 
 # -- Auth scheme --
-VUE_APP_AUTH_SCHEME=fxa
+VITE_AUTH_SCHEME=fxa
 
 # For fxa
-VUE_APP_FXA_EDIT_PROFILE=https://accounts.stage.mozaws.net/settings
+VITE_FXA_EDIT_PROFILE=https://accounts.stage.mozaws.net/settings
diff --git a/frontend/.eslintrc.js → frontend/.eslintrc.cjs b/frontend/.eslintrc.js → frontend/.eslintrc.cjs
@@ -1,34 +1,40 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    'plugin:vue/vue3-essential',
-    'airbnb-base',
-  ],
-  overrides: [],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  plugins: [
-    'vue',
-  ],
-  rules: {
-    'import/extensions': ['error', 'ignorePackages', {
-      '': 'never',
-      js: 'never',
-      vue: 'off', // TODO: once migrated to Vite, we should set this to 'always'
-    }],
-    'max-len': ['error', { code: 120 }],
-    'no-param-reassign': 'off',
-  },
-  settings: {
-    'import/resolver': {
-      webpack: {
-        config: require.resolve('@vue/cli-service/webpack.config.js'),
-      },
-    },
-  },
-};
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'airbnb-base',
+  ],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: [
+    'vue',
+  ],
+  rules: {
+    'import/extensions': ['error', 'ignorePackages', {
+      '': 'never',
+      js: 'never',
+      vue: 'off',
+    }],
+    'max-len': ['error', {code: 120}],
+    'no-param-reassign': 'off',
+  },
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@', './src'],
+        ],
+        extensions: ['.js', '.vue'],
+      },
+    },
+  },
+};
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -22,3 +22,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Sentry Config File
+.env.sentry-build-plugin
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -1,13 +1,13 @@
-FROM node:lts-alpine
-
-WORKDIR /app
-
-ENV PATH /app/node_modules/.bin:$PATH
-
-# Get git
-RUN apk add --no-cache git
-
-COPY . .
-RUN yarn install
-
-CMD vue-cli-service serve
+FROM node:lts-alpine
+
+WORKDIR /app
+
+ENV PATH /app/node_modules/.bin:$PATH
+
+# Get git
+RUN apk add --no-cache git
+
+COPY . .
+RUN yarn install
+
+CMD vite dev --port 8080
diff --git a/frontend/deploy.dockerfile b/frontend/deploy.dockerfile
@@ -12,12 +12,12 @@ apt-get install -y nodejs
 
 # Build site
 RUN cd /build/frontend && npm install
-RUN cd /build/frontend && npm run build-stage
+RUN cd /build/frontend && npm run build -- --mode staging
 
 # Use our custom nginx config
 RUN rm /etc/nginx/conf.d/default.conf
 COPY docker/etc/nginx/conf.d/appointments.conf /etc/nginx/conf.d/default.conf
 
 RUN cp -r /build/frontend/dist/. /usr/share/nginx/html
 
-EXPOSE 80
+EXPOSE 80
diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -1,11 +1,10 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>appointment_logo.svg">
+    <meta charset="UTF-8">
+    <link rel="icon" href="/appointment_logo.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Thunderbird Appointment</title>
     <script>
       // handle theme color scheme
       if (
@@ -26,6 +25,6 @@
       </strong>
     </noscript>
     <div id="app" class="h-full"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
@@ -1,20 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES6",
-    "module": "esnext",
-    "baseUrl": "./",
     "moduleResolution": "node",
-    "jsx": "preserve",
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
 }