/vue3-vite-express-ssr

SSR implementation in Vue 3 with Vite and Express

Primary LanguageTypeScript

vue3-vite-express-ssr

A case-study application that implements SSR using Vue 3, Vite, Express, and Typescript. This application can still run as a SPA.

Project Setup

Install dependencies

npm install

Create an .env file

# .env

APP_ENVIRONMENT=local
APP_CLIENT_PORT=3001
APP_SERVER_PORT=3000

Compile and Hot-Reload for Development SPA

npm run dev:client

Access the app using http://localhost:3001.

Compile and Hot-Reload for Development SSR

npm run dev:server

Access the app using http://localhost:3000.

Run Unit Tests with Vitest

npm run test:unit

Sample test file is located at src/server/services/form.service.test.ts.

Lint with ESLint

npm run lint

Additionals:

While doing this project, I created a new version of my article regarding registering global components in Vue 3. Check the articles:

Updated: How to register global components in Vue 3 dynamically in 2023?

Previous: How to register global components in Vue 3 dynamically?

To Do:

  • Finish setup for production scenario.
  • Project cleanup.
  • Finish component stories.
  • Integrate RxDB for sample database integration in server-side.

References: