Forem: Divesh Panwar

Setting up different Environments in Vite Projects

Divesh Panwar — Wed, 13 Sep 2023 14:01:47 +0000

Trying to use different environments in Vite?

Recently I have faced a situation where I was to build my Vue3 project for different environments using Vite. I used to do that in webpack but in vite, it is hard to figure out!!!

Let's do one thing at a time!

Project Setup (I know you are an expert, you can skip it)

I was using Vue3 composition api with TS, so let's create one with same configuration

Enter command npm create vue@latest, and choose the options as mentioned below in the screenshot:

Now do

cd <your_project_name>
npm i

That is all you need for the initial setup, now you can open the project in some code editior (I am using VS Code).

And you will see a folder structure like below.

😒 Hey!!! where are my environment files???
Actually by default we don't get any! But we can create few. All you have to do is, create a .env file in the project root folder and append . to it. Like:



env.production
env.uat
env.staging

Now your project folder structure will look something like this

Now we have environment files 😍, but I don't have any environment variables 🤦‍♂️.

Let's create one! But remember, environment variables must start with a keyword, and they vary from frameworl to framework (or library). In our case I am buing Vue3, so my environment variables must start with VITE_USER_.

That being said, I am creating VITE_USER_DEPLOYMENT_INSTANCE_TYPE

So it will have following values in files:

env.staging => VITE_USER_DEPLOYMENT_INSTANCE_TYPE=STAGING
env.uat => VITE_USER_DEPLOYMENT_INSTANCE_TYPE=UAT
env.production => VITE_USER_DEPLOYMENT_INSTANCE_TYPE=PRODUCTION

But wait a minute? Where are we using them??? Let's use them.

First Let's start your dev server npm run dev, once dev server is up and running you can see your app running on http://localhost:5173/, and this is what you will see!

Let's replace

You Did it!

with the value of VITE_USER_DEPLOYMENT_INSTANCE_TYPE.

So in vue3 (composition API) if you want to access environment, we do it using import.meta.env. Let's dig in!!!

Open file App.vue
Inside the script tag just write const env = import.meta.env;
Find this line in App.vue <HelloWorld msg="You did it!" />
And replace it with <HelloWorld :msg="env.VITE_USER_DEPLOYMENT_INSTANCE_TYPE" />
😨 And I don't see anything in browser. And that is because we don't have env.development, so either we can create env.development file and add VITE_USER_DEPLOYMENT_INSTANCE_TYPE=DEVELOPMENT or use Nullish coalescing operator .

I am using Nullish Coalescing Operator => (Basically use provided default value if the left hand side is null or undefined) so replace the line with <HelloWorld :msg="env.VITE_USER_DEPLOYMENT_INSTANCE_TYPE ?? 'DEVELOPMENT'" />.

And You are done. Your homepage will look like this.

Building the project

npm run build, however it builds for production by default.

Let's see the preview, do npm run preview.

Build for staging or uat.

The process is simple, you have to replace your build-only script in package.json with this "build-only": "NODE_ENV=${NODE_ENV:-production} && vite build --mode $NODE_ENV" in linux and mac or "build-only": "setx NODE_ENV production && vite build --mode %NODE_ENV%" in windows.

So here we are checking if the NODE_ENV is set, and if not then use production as default value,a nd then we are passing NODE_ENV as mode to the vite build

And we are done!

Now let's build for staging environment,

export NODE_ENV=staging for linux and Mac or set NODE_ENV=stagingfor windows
npm run build
And preview npm run build.

And that is it! Now this is the one of the solutions I have found, but if you have anything better, please let me know in the comments!!!

Happy coding 🎉

Generate SSL Certs Using OpenSSL

Divesh Panwar — Sun, 07 Feb 2021 08:05:03 +0000

Hi Techies, this is a quick guide to generate openSSL certificates for your websites or applications on windows and Linux.

Perquisites

openssl on Linux
git and git bash or after installing git add <git_installtion_directory>/usr/bin to Path environment variable on the windows machine to use git bash from cmd or powershell
java jdk & keytool -- if you want to generate local keystore

In case you are modifying the environment variable on windows machine close all the open cmd, powershell windows and open the fresh cmd or powershell.

Reference

<country_code> : like IN or PK or NZ or US
<STATE>: like Karnataka, Himachal
<CITY>: like Shimla, Banglore
<ORGANISATION>: like Infy
<ORG_UNIT>: Unit of Organization like Marketing
<CANONICAL_NAME>: Hostname like thenoobsbook.dev
<IP_ONE>: IP of the server you after hosting the applicatiion like 127.0.0.1
<IP_TWO>: In case there are more than one IPS add them seperated by comma (,)
<password> : password of the cert file like abc@123
<keystore_pass> : the password of the keystore like abc@123
<public_crt_file>: name of the public certificate file, you can also give the location if not in the current directory like /home/public.crt
<alias> : alias for keystore unique per keystore like abc
<nameOfKeystore>: name of the keystore file, you can also specify the location like /home/kcacerts

Commands to Generate Certificates

openssl req -newkey rsa:4096 -x509 -days 3650 -out server_cert.pem -keyout server_key.pem -subj "/C=<country_code>/ST=<STATE>/L=<CITY>/O=<ORGANISATION>/OU=<ORG_UNIT>/CN=<CANONICAL_NAME>" -addext "subjectAltName = IP:<IP_ONE>,IP:<IP_TWO>" -passin pass:<password> -passout pass:<password>
openssl rsa -in server_key.pem -out unencrypted_server_key.pem -passin pass:<password> -passout pass:<password>
openssl x509 -outform der -in server_cert.pem -out server_cert.crt -passin pass:<password>
openssl pkcs12 -export -out server.p12 -inkey server_key.pem -in server_cert.pem -passin pass:<password> -passout pass:<password>
openssl rsa -in server_key.pem -out private.key
openssl req -new -key private.key -days 3650 -out public.crt -x509 -subj "/C=<country_code>/ST=<STATE>/L=<STATE>/O=<ORGANISATION>/OU=<UNIT>/CN=<CANONICAL_NAME>" -addext "subjectAltName = IP:<IP_ONE>,IP:<IP_TWO>"

For reference

private.key is your private key
public.crt is your public certificate
You can rename them to anything as per the application demand
For example in keycloak application you need tls.crt and tls.key so you can rename public.key --> tls.key && public.crt --> tls.crt

Commands to Generate Local Keystore

keytool -genkeypair -dname "CN=<CANONICAL_NAME>, OU=<ORG_UNIT>, O=<ORGANISATION>, C=<COUNTRY_CODE>, L=<CITY>, ST=<STATE>" -alias localhost -keypass <keystore_pass> -storepass <keystore_pass> -keyalg RSA -keysize 2048 -keystore <nameOfKeystore>
keytool -import -noprompt -file <public_crt_file> -keystore kcacerts -alias <alias> -storepass <keystore_pass>

Thanks for your time. Happy Coding

Portfolio Review

Divesh Panwar — Wed, 27 Jan 2021 16:07:11 +0000

Hi Techies...

This is my first post, and since I don't know what to write as my first post so I thought of asking all the brilliant Techies here to review my portfolio...

Here it is: https://profile.thenoobsbook.dev

Thank You all for your time and patience...