How to use environment variables in Solidjs [vitejs]

 Environment variables can be used in JavaScript application (Nodejs) to store information such API SECRETS. 

Reactjs has inbuilt capacity to consume .env files while Solidjs have to go through vite config..

First up all create .env file at the project root with some information .

API_URI = SOME SECRET

 Configure in vite.config.js

Add a define key ⚿ to the configuration settings as follows in vite.config.js file 📂.

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
// vite config
define: {
API:JSON.stringify('https://jsonplaceholder.typicode.com/posts'),
APP_ENV: JSON.stringify(env.API_URI)
},
plugins: [solidPlugin()],
build: {
target: 'esnext',
polyfillDynamicImport: false,
},
}
})

Read Official Doc on vite more information ℹ