vite-amplify

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

vite-amplify.com

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

Features

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

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

CDK

yarn build:cdk    // build the cdk
yarn deploy:cdk   // deploy the cdk

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-CjfxHUYp.css       28.14 kB │ gzip:     6.28 kB
│   │   └── index-CyAzpqo0.js       326.88 kB │ gzip:   109.05 kB
│   ├── favicon.ico                  14.73 kB │ gzip:     4.46 kB
│   ├── index.html                     .56 kB │ gzip:      .35 kB
│   └── robots.txt                     .06 kB │ gzip:      .08 kB
└── server
    ├── api
    │   ├── api.d.ts                   .21 kB │ gzip:      .16 kB
    │   └── api.js                    1.01 kB │ gzip:      .47 kB
    ├── entry-server.js              56.77 kB │ gzip:    20.72 kB
    ├── favicon.ico                  14.73 kB │ gzip:     4.46 kB
    ├── robots.txt                     .06 kB │ gzip:      .08 kB
    ├── server.d.ts                    .25 kB │ gzip:      .18 kB
    ├── server.js                     4.52 kB │ gzip:     1.84 kB
    ├── tsconfig.node.tsbuildinfo    46.99 kB │ gzip:    14.90 kB
    ├── vite.config.d.ts               .08 kB │ gzip:      .10 kB
    └── vite.config.js                1.39 kB │ gzip:      .52 kB

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-CjfxHUYp.css          28.14 kB │ gzip:     6.28 kB
│       │   │   └── index-CyAzpqo0.js          326.88 kB │ gzip:   109.05 kB
│       │   ├── favicon.ico                     14.73 kB │ gzip:     4.46 kB
│       │   ├── index.html                        .56 kB │ gzip:      .35 kB
│       │   └── robots.txt                        .06 kB │ gzip:      .08 kB
│       ├── package.json                         2.22 kB │ gzip:      .90 kB
│       └── server
│           ├── api
│           │   ├── api.d.ts                      .21 kB │ gzip:      .16 kB
│           │   └── api.js                       1.01 kB │ gzip:      .47 kB
│           ├── entry-server.js                 56.77 kB │ gzip:    20.72 kB
│           ├── favicon.ico                     14.73 kB │ gzip:     4.46 kB
│           ├── robots.txt                        .06 kB │ gzip:      .08 kB
│           ├── server.d.ts                       .25 kB │ gzip:      .18 kB
│           ├── server.js                        4.52 kB │ gzip:     1.84 kB
│           ├── tsconfig.node.tsbuildinfo       46.99 kB │ gzip:    14.90 kB
│           ├── vite.config.d.ts                  .08 kB │ gzip:      .10 kB
│           └── vite.config.js                   1.39 kB │ gzip:      .52 kB
├── deploy-manifest.json                          .83 kB │ gzip:      .33 kB
└── 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