hostname usually you run your dev server at smth like http://localhost:3005/ you may want to use own hostname like https://local.quotation.app:3005/ to do so you need to modify vite's config server.host
/// <reference types="vitest" />
/// <reference types="vite/client" />
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import basicSsl from '@vitejs/plugin-basic-ssl'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
// Load env file based on `mode` in the current working directory.
// Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
const env = loadEnv(mode, process.cwd(), '')
return {
server: {
host: 'local.quotation.app',
port: Number(env.PORT_FRONT_END),
https: true, //* type "thisisunsafe" if chrome says that connection is not private
proxy: {
'/api': `${env.DOMAIN}:${env.PORT_BACK_END}/`
// '/api': `local.quotation.app:${env.PORT_BACK_END}`,
},
// hmr: {
// host: 'localhost',
// port: Number(env.PORT_BACK_END),
// }
},
esbuild: {
define: {
// to suppress warning in terminal: [vite] warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
this: 'window',
},
},
plugins: [
react({
// to show readable class names in styled components with vite
// https://github.com/styled-components/babel-plugin-styled-components/issues/350#issuecomment-979873241
jsxImportSource: '@emotion/react',
babel: {
plugins: [
[
// 'babel-plugin-styled-components',
'@emotion/babel-plugin',
{
displayName: true,
fileName: true,
},
],
// https://github.com/preactjs/signals/tree/main/packages/react#react-integration
["module:@preact/signals-react-transform"],
],
},
}),
// https://github.com/aleclarson/vite-tsconfig-paths
tsconfigPaths(),
basicSsl(),
],
// https://vitest.dev/guide/in-source.html
define: {
'import.meta.vitest': 'undefined',
},
// https://www.youtube.com/watch?v=oWJpxtAl62w
test: {
globals: true,
environment: 'jsdom',
setupFiles: './test-setup.ts',
includeSource: ['client/**/*.{js,ts,jsx,tsx}'],
coverage: {
all: true,
src: ['client/'],
},
},
build: {
outDir: 'build',
},
}
})
and also configure local DNS by adding hostname into this file code /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
127.0.0.1 local.quotation.app
255.255.255.255 broadcasthost
::1 localhost