Awesome

vite-amplify

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

<a href="https://vite-amplify.com" rel="noopener noreferrer" target="_blank">vite-amplify.com</a>

<a href="https://www.youtube.com/watch?v=dsHQUgwkZ7s" rel="noopener noreferrer" target="_blank">~4 mins from fork-to-finish for a successful deployment</a>

Features

• Node
• Yarn
• Vite
• React
• TypeScript
• Express
• React Router
• Tailwind
• Eslint
• Prettier
• Amplify Hosting

Other Libraries

• nodemon
• tsx
• dotenv
• svgr
• react-tweet
• next-themes

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

1. Create repository from template
2. 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