Run Https Secured Ssl Url On A React Application With Vitejs

During development, sometimes its necessary to run a local environment with HTTPS to test an API. This happened today to me, I was running a local React application on http:localhost/3000 and the backend api was giving me CORS errors. This was because the protocols did not match with my Fronend React App and my backed API>

To fix it:

1. Install vite-plugin-mkcert
   $ npm i vite-plugin-mkcert -D
2. Open file vite.config.js
3. Add the following
   
   import { defineConfig } from 'vite'

   import react from '@vitejs/plugin-react'

   import mkcert from 'vite-plugin-mkcert'

   // https://stackoverflow.com/a/71618444

   // https://vitejs.dev/config/

   export default defineConfig({

     server: { https: true },

     plugins: [react(),mkcert()],

     base: '/'

   })
4. Start the server
   $ npm run dev