Building and distributing Vite.js projects with Amplify

On our last project we decided to use vite.js. We can now claim we LOVED IT! We loved vite's speed regarding serving our file and found it extremely intuitive and right for the project.

Yet development with vite implied quite a problem regarding our hosting on the web app. The fact vite is module based and has css code splitting, made the hosting of the project tough.

When we first started hosting it on amplify, we had the issue that the enviroment was completely blank, and none of the page contents were fetched by the service.

We fixed the initial problem by using the redirect AWS suggests for SPA's:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

Beware with this redirect link as it's position on teh rewrites and redirects can affect the performance of the page.

So our rewrites and redirects page ended up looking like this:

Then we had to adapt the build settings so that the dist folder vite creates can be found by amplify:

Our build file ended up looking like this:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build --prod
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

After following this steps, we could host the webpage correctly, yet amplify still had arbitrary issues on fetching some webpages. For example redirects were not working and took us to a blank page that claimed Amplify CloudFrontURL couldn't find the page.

Apparently some fractions of the code weren't being found. This is the problem that held us days, and to which we struggled to find the solution. The thing was, we had to change some things in vite.config.js that were making the base of the project untraceable to amplify.

Our vite.config.js ended up looking like this. Adding base: './index.html' was what managed to fix the mistake of arbitrary 404 we had:

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

export default defineConfig({
  server: { https: true },
  plugins: [react(), mkcert()],
  base: './index.html',
  build: {
    input: {
      app: './index.html', // default
    },
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    }
  }
})

We hope this solution helps someone struggling with the same problem.