Environments

Create .env.dev and .env.prod files in the root directory by copying the contents of the .env.dist file.

Local Environment Configuration

Vite dev environment configuration example;

VITE_DEFAULT_LOCALE=en
VITE_FALLBACK_LOCALE=en
VITE_SUPPORTED_LOCALES=en,tr
VITE_API_URL=http://example.local/api
VITE_HCAPTCHA_SITE_KEY=
VITE_SESSION_UPDATE_TIME=5
VITE_COOKIE={ "token": "_local_demo_token", "user": "_local_demo_user" }

Production Environment Configuration

Vite prod environment configuration example;

VITE_DEFAULT_LOCALE=tr
VITE_FALLBACK_LOCALE=en
VITE_SUPPORTED_LOCALES=en,tr
VITE_API_URL=https://example.com/api
VITE_HCAPTCHA_SITE_KEY=
VITE_SESSION_UPDATE_TIME=5
VITE_COOKIE={ "token": "_demo_token", "user": "_demo_user" }

How is It Working ?

The dev and build commands defined in your package.json file are defined for the environments we created above.

"scripts": {
    "dev": "vite --host --mode dev",
    "build": "vite build --mode prod",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},

Just go to the console and run dev for the development environment or build for output to the production environment.

Dev

Starts the application in the local environment.

npm run dev

If you are working on a local computer, you can type http://localhost:3000, or if you are working on a local virtual server, type the IP address of your server into your browser, such as http://192.168.231.129:3000, and visit your application. If you have created a virual domain name on your local, the address you will visit should be something like http://mydomain.local:3000.

Build

With this command, your javascript files compiled for the production environment are exported to the /dist folder.

npm run build

At the last stage, all you have to do to make your application work is to copy the required files and publish them on your website.