Use Vite for build (#1218)

Author: matthew-white

.gitignore

@@ -27,5 +27,6 @@ npm-debug.log*
 !/.nginx/.gitkeep
 
 /.eslintcache
+public/index.html
 test-results
 playwright-report

Procfile

@@ -1,2 +1,3 @@
-vue: vue-cli-service build --mode development --watch
+vite: vite dev
+build: vite build --mode development --watch
 nginx: nginx -c "$PWD/main.nginx.conf" -p "$PWD"

README.md

@@ -44,19 +44,21 @@ Follow these instructions to run ODK Central Frontend in development. For deploy
 
 First, run ODK Central Backend.
 
-Next, build ODK Central Frontend files for development by running `npm run dev`.  The files will be outputted to `dist/`.  As you update the source code, the files will be automatically rebuilt.  `npm run dev` will also start NGINX, which will serve the files. NGINX effectively places ODK Central Frontend and ODK Central Backend at the same origin, avoiding cross-origin requests.
-
-ODK Central Frontend will be available on port 8989.
+Next, run ODK Central Frontend in development by running `npm run dev`. This will start a Vite dev server. ODK Central Frontend will be available on port 8989. `npm run dev` will also start NGINX, which will forward requests to ODK Central Backend.
 
 ODK Central Frontend communicates with ODK Central Backend in part using a session cookie. The cookie is `Secure`, but will be sent over HTTP on localhost. ODK Central Frontend also interacts with data collection clients and with services:
 
 - To upload an XLSForm, run [pyxform-http](https://github.com/getodk/pyxform-http). ODK Central Frontend communicates with pyxform-http through ODK Central Backend.
 - You can use ODK Collect to scan an app user QR code, download a form, and submit data. One option to do so is to use [`ngrok`](https://ngrok.com/download). ODK Central Frontend is available on port 8989, so you can run `ngrok http 8989` to expose a temporary HTTPS URL that you can use. Within ODK Central Backend, you will also need to set the `default.env.domain` property in [`config/default.json`](https://github.com/getodk/central-backend/blob/master/config/default.json) to the HTTPS URL, then restart ODK Central Backend if it is already running.
 - Enketo is a web form engine used to show form previews and allow for web-based data entry. Please see our [instructions](/docs/enketo.md) for optionally setting up an Enketo server for use in _development_ (it is already included in the production ODK Central stack).
 
+### Running without HMR
+
+If you run `npm run dev`, open ODK Central Frontend in a browser, then update the source code, the page will refresh automatically to reflect the new code. This is called hot module replacement (HMR). To develop without HMR, run `npm run dev:build`. Instead of running a Vite dev server, this builds ODK Central Frontend for development. It outputs files to `dist/`, which NGINX will serve on port 8686. (There will be nothing on port 8989.) If you update the source, the files will be rebuilt automatically, but the page will not be refreshed: you can choose when to refresh the page. Note that `npm run dev:build` is much slower than `npm run dev`.
+
 ## Deploying to production
 
-To build ODK Central Frontend files for production with minification, run `npm run build`. The files will be outputted to `dist/`. For more details on this command, see the [documentation](https://cli.vuejs.org/) for Vue CLI.
+To build ODK Central Frontend files for production with minification, run `npm run build`. The files will be outputted to `dist/`.
 
 Note that this repository's `main.nginx.conf` is for development only.
 

public/index.html renamed to index.html

@@ -23,6 +23,6 @@
       <p>Powered by <a href="https://getodk.org">ODK</a>.</p>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

karma.conf.js

@@ -7,10 +7,22 @@ This config is based on:
   - https://github.com/Nikku/karma-browserify
 */
 
+// eslint-disable-next-line import/no-unresolved
+const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack');
+const { resolve } = require('node:path');
 // eslint-disable-next-line import/extensions
 const webpackConfig = require('./node_modules/@vue/cli-service/webpack.config.js');
 
 const { entry, ...webpackConfigForKarma } = webpackConfig;
+webpackConfigForKarma.plugins.push(VueI18nPlugin({
+  include: resolve(__dirname, './src/locales/**'),
+  compositionOnly: false,
+  defaultSFCLang: 'json5',
+  // `false` doesn't work for some reason. When `false` is specified, Vue I18n
+  // warns that it's been installed already.
+  fullInstall: true,
+  dropMessageCompiler: true
+}));
 webpackConfigForKarma.devtool = 'inline-source-map';
 // See additional warning information.
 webpackConfigForKarma.stats = {
@@ -45,6 +57,9 @@ module.exports = (config) => {
     browsers: ['ChromeHeadless'],
     reporters: ['spec'],
     singleRun: true,
+    client: {
+      mocha: { grep: process.env.TEST_PATTERN || '.' }
+    },
     customLaunchers: {
       ChromeDebugging: {
         base: 'Chrome',

main.nginx.conf

@@ -47,7 +47,7 @@ http {
   }
 
   server {
-    listen 8989;
+    listen 8686;
     server_name localhost;
 
     server_tokens off;
@@ -131,7 +131,11 @@ http {
       include ./common-headers.nginx.conf;
       return 200 "{}";
     }
+    location /version.txt {
+      return 404;
+    }
 
+    # Only relevant for `npm run dev:build`, not `npm run dev`.
     location / {
       root ./dist;
       try_files $uri $uri/ /index.html;