Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 months 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 (6 months ago)
- Default Branch: main
- Last Pushed: 2024-09-28T03:16:26.000Z (4 months ago)
- Last Synced: 2024-09-30T16:28:45.194Z (4 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.37 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- 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
Template with Vite SSR + Express APIs + AWS Amplify Hosting.
## 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)
## 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
yarn dev // run the development server
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
```
## 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-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](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-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](https://github.com/user-attachments/files/16407666/lighthouse_summary_100_91_96_100_july282024.pdf)