https://github.com/mattelim/vite-multipage-ts-node-express-fullstack-template

Vite typescript multipage + ts-node express fullstack template
https://github.com/mattelim/vite-multipage-ts-node-express-fullstack-template

express livereload nodemon socket-io sqlite3 template ts-node typescript vite

Last synced: 2 months ago
JSON representation

Vite typescript multipage + ts-node express fullstack template

• Host: GitHub
• URL: https://github.com/mattelim/vite-multipage-ts-node-express-fullstack-template
• Owner: mattelim
• License: mit
• Created: 2023-02-03T14:50:27.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-23T21:47:17.000Z (5 months ago)
• Last Synced: 2024-06-23T22:40:55.407Z (5 months ago)
• Topics: express, livereload, nodemon, socket-io, sqlite3, template, ts-node, typescript, vite
• Language: TypeScript
• Homepage:
• Size: 853 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vite typescript multipage + ts-node express fullstack 🥞 template

This template allows development and production to happen on the same server stack.

**Front-end**

- Vite

- Typescript

- Multipage (template includes 3 entry points)

**Back-end**

- ts-node 

- Typescript

- Express

- DX libraries

  - Nodemon

  - Livereload

- Included (easily removed)

  - Socket.io

  - Sqlite3

  

### Getting Started

To get started, clone the repository and install the necessary node modules.

`npm install`

### Development 

During development, open two terminal tabs, on one, run:

`npm run build -- --watch`

On the other, run:

`npm run dev`

The first compiles the `.ts` and imported ES node modules into the dist folder. (This is a somewhat unconventional use of Vite – the other way is to use a bundler, but this is a shortcut for me to save time.)

The second runs the `server.ts` file in `nodemon` on port `3000` and watches for any changes to the files. To add more convenience, `livereload` is added so that the `html` pages automatically refreshes in the browser.

#### Testing if the template works

After running the two development steps, you should be able to open these addresses:

- [http://localhost:3000/](http://localhost:3000/)

- [http://localhost:3000/1](http://localhost:3000/1)

- [http://localhost:3000/2](http://localhost:3000/2)

- [http://localhost:3000/api/test](http://localhost:3000/api/test)

### Production

To go into production, run:

`npm run build`, then run:

`npm run start`

This starts a production ts-node server on port `3000`.

## Acknowledgments

This template is built using ideas and code from [cyco130/vavite](https://github.com/cyco130/vavite) and [szymmis/vite-express](https://github.com/szymmis/vite-express).