Motivation

Setup typescript react vite project to work with a server (typescript express in this repo) using proxy

Schema

Screenshot

Setup

  • Add the following to client/vite.config.js Here /api/v1 is mapped to http://localhost:5000/ which is where the server resides
    server: {
        proxy: {
          "/api/v1": "http://localhost:5000/",
        },
      },
    
    
  • The react app uses /api/v1 as base url and the server base endpoint url is /api/v1
  • Using /api/v1 as base url is arbitrary. Notice however that it appears in 3 places : client/vite.config.js , on the client side source files and on the server side source files

Installation

  • Perform the following from root directory , client directory and server directory
    npm i
    
    
  • Make sure concurrently and ts-node (used for server) are installed globally

Usage

Invoke from the root project to run the server and the client. This is done using concurrently
npm run dev

Limitation

i was not able to map "/" because then localhost:3000/ is used