https://github.com/bebeal/vite-amplify
Template with Vite SSR + Express APIs + AWS Amplify Hosting
https://github.com/bebeal/vite-amplify
amplify-hosting aws eslint express fullstack nodejs prettier react react-router ssr tailwindcss typescript vite vite-ssr vite-template yarn
Last synced: 10 days ago
JSON representation
Template with Vite SSR + Express APIs + AWS Amplify Hosting
- Host: GitHub
- URL: https://github.com/bebeal/vite-amplify
- Owner: bebeal
- Created: 2024-07-27T02:39:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-20T06:02:39.000Z (12 months ago)
- Last Synced: 2025-01-31T07:11:12.053Z (9 months ago)
- Topics: amplify-hosting, aws, eslint, express, fullstack, nodejs, prettier, react, react-router, ssr, tailwindcss, typescript, vite, vite-ssr, vite-template, yarn
- Language: TypeScript
- Homepage: https://vite-amplify.com/
- Size: 8.38 MB
- Stars: 6
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- trackawesomelist - vite-amplify (⭐3) - Template with SSR + Express APIs + AWS Amplify Hosting. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-vite - vite-amplify - Template with SSR + Express APIs + AWS Amplify Hosting. (Get Started / Templates)
- fucking-awesome-vite - vite-amplify - Template with SSR + Express APIs + AWS Amplify Hosting. (Get Started / Templates)
README
# vite-amplify
Vite Template with Vite SSR + Express APIs + AWS Amplify Hosting.
Also available with no server side rendering:
(vite-amplify-no-ssr.com)
## Features
* [Node](https://nodejs.org/docs)
* [Yarn](https://classic.yarnpkg.com/en/docs)
* [Vite](https://vitejs.dev/guide/)
* [React](https://react.dev/reference/react)
* [TypeScript](https://www.typescriptlang.org/docs/)
* [Express](https://expressjs.com/en/4x/api.html)
* [React Router](https://reactrouter.com/en/main)
* [Tailwind](https://tailwindcss.com/docs)
* [Eslint](https://eslint.org/docs/latest/)
* [Prettier](https://prettier.io/docs/en/)
* [Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide)
* [AWS CDK](https://docs.aws.amazon.com/cdk/v2/guide/home.html)
## Other Libraries
* [nodemon](https://github.com/remy/nodemon)
* [tsx](https://github.com/privatenumber/tsx)
* [dotenv](https://github.com/motdotla/dotenv?tab=readme-ov-file)
* [svgr](https://github.com/gregberge/svgr)
* [react-tweet](https://github.com/vercel/react-tweet)
* [next-themes](https://github.com/pacocoursey/next-themes)
## Development
Using yarn
```bash
yarn install // install dependencies
```
```bash
yarn dev // run the development server
```
```bash
yarn build // build both client side and server side build
```
**Additional Commands**
```bash
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
```bash
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.
```console
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](https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html))
* `deploy-minifest.json` is the deployment spec and is what deploys the express api server ([AWS Docs](https://docs.aws.amazon.com/amplify/latest/userguide/ssr-deployment-specification.html))
* `postbuild.sh` will take the build from `dist` and copy it over to the amplify build folder (`.amplify-hosting`) which results in ([AWS Docs](https://docs.aws.amazon.com/amplify/latest/userguide/deploy-express-server.html)):
```console
.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](https://github.com/user-attachments/files/16407666/lighthouse_summary_100_91_96_100_july282024.pdf)