Simple Vite Client Server Template

Features

• Simple React Nodejs client / server project template
• Client builds into nodejs public folder
• Server deployable to Caprover hosting container
• Separate client and server npm instances to keep server deploy lightweight

Client

• Vite - built for speed
• Set up with Tailwind CSS and Flowbite
• Nextjs style page router
• Proxy configured for node server during development

Server

• Nodejs express server
• Router / controller model
• Passthrough for React front-end router

Project Structure

Installation

Using npx, simple run:

$ npx @ataye/client-server-vite-tailwind

then provide the project name and optionally install (runs npm install for client, server and in the project root)

If you want to manually run npm install, you'll need to run it it both client and server folders.

Running the project

After installation, start the project by running

$ npm run app

to run both client and server. To run each separately:

$ npm run client
$ npm run server

server will run codemon to watch for changes.

Deployment

Deployment command builds the client vite project and copies build output to /server/public, then packages the node project into a tarball and calls caprover-deploy to deploy to the caprover server for hosting (Caprover hosting not included ;] )

From the root of the project, run:

$ npm run deploy

If you dont want to deploy with caprover, just build the project and it copies into the server public folder. You can then deploy from there:

$ npm run build-client