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:

NEW VERSION:

  1. Install @vitejs/plugin-basic-ssl
    $ npm i @vitejs/plugin-basic-ssl
  2. Edit vite.config.js to add plugin:
    import basicSsl from '@vitejs/plugin-basic-ssl'


      plugins: [
        basicSsl()
      ]
  3. Start server:
    $ npm start
  4. Open browser to https://127.0.0.1:5173/

Resources:

I go these errors but I resolve it by adding the import: import basicSsl from '@vitejs/plugin-basic-ssl'

$ npm run dev

> [email protected] dev
> vite

failed to load config from F:\apachefriends\xampp\htdocs\over-imgV5\REACT\GITHUB-DRAG-and-DROP\Dropzone\react-DropZone-with-Cloudinary-ssl\react-dropzone-cloudinary-ssl\vite.config.js
error when starting dev server:
ReferenceError: basicSsl is not defined
    at file:///react-dropzone-cloudinary-ssl/vite.config.js.timestamp-1685708009456-33010ef9e4c6d.mjs:5:13
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async loadConfigFromBundledFile (file:///react-dropzone-cloudinary-ssl/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:64506:21)
    at async loadConfigFromFile (file:///react-dropzone-cloudinary-ssl/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:64388:28)
    at async resolveConfig (file:///react-dropzone-cloudinary-ssl/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:63993:28)
    at async _createServer (file:///react-dropzone-cloudinary-ssl/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:63274:20)
    at async CAC.<anonymous> (file:///react-dropzone-cloudinary-ssl/node_modules/vite/dist/node/cli.js:733:24)      

OLD VERSION:

  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