vite-amplify

Template with Vite SSR + Express APIs + AWS Amplify Hosting.

~4 mins from fork-to-finish for a successful deployment

Features

Other Libraries

Development

Using yarn

yarn install      // install dependencies
yarn dev          // run the development server
yarn build        // build both client side and server side build

Additional Commands

yarn clean        // clean everything thats generated in the build/dev process
yarn build:client // build the client side to dist/client
yarn build:server // build the server side to dist/server
yarn lint         // run eslint
yarn format       // run prettier

Amplify Hosting

To deploy to Amplify Hosting

Create repository from template
Deploy to AWS

Note: set env variable YARN_ENABLE_IMMUTABLE_INSTALLS=0 in the Amplify console

Build

The build outputs to dist folder. The build is split into two parts, the client side and the server side.

dist
├── client
│   ├── assets
│   │   ├── index-CtZNOJEh.css       25.46 kB │ gzip:     5.79 kB
│   │   └── index-LE-jQ0iQ.js       262.24 kB │ gzip:    88.57 kB
│   ├── favicon.ico                  14.73 kB │ gzip:     4.46 kB
│   ├── index.html                     .56 kB │ gzip:      .36 kB
│   └── robots.txt                     .06 kB │ gzip:      .08 kB
└── server
    ├── api
    │   ├── api.d.ts
    │   └── api.js
    ├── entry-server.js
    ├── favicon.ico
    ├── robots.txt
    ├── server.d.ts
    ├── server.js
    ├── tsconfig.node.tsbuildinfo
    ├── vite.config.d.ts
    └── vite.config.js

5 directories, 15 files

Amplify Build

amplify.yml is the build spec for Amplify Hosting (AWS Docs)
deploy-minifest.json is the deployment spec and is what deploys the express api server (AWS Docs)
postbuild.sh will take the build from dist and copy it over to the amplify build folder (.amplify-hosting) which results in (AWS Docs):

.amplify-hosting
├── compute
│   └── default
│       ├── client
│       │   ├── assets
│       │   │   ├── index-CtZNOJEh.css          25.46 kB │ gzip:     5.79 kB
│       │   │   └── index-LE-jQ0iQ.js          262.24 kB │ gzip:    88.57 kB
│       │   ├── favicon.ico                     14.73 kB │ gzip:     4.46 kB
│       │   ├── index.html                        .56 kB │ gzip:      .36 kB
│       │   └── robots.txt                        .06 kB │ gzip:      .08 kB
│       ├── package.json
│       └── server
│           ├── api
│           │   ├── api.d.ts
│           │   └── api.js
│           ├── entry-server.js
│           ├── favicon.ico
│           ├── robots.txt
│           ├── server.d.ts
│           ├── server.js
│           ├── tsconfig.node.tsbuildinfo
│           ├── vite.config.d.ts
│           └── vite.config.js
├── deploy-manifest.json
└── static
    ├── favicon.ico                             14.73 kB │ gzip:     4.46 kB
    └── robots.txt                                .06 kB │ gzip:      .08 kB

8 directories, 19 files

Lighthouse

¯\(ツ)/¯ 🧂 lighthouse_summary_100_91_96_100_july282024.pdf

bebeal/vite-amplify