DEV Community: Khalid🥑💻

Environment variables & Its best practices

Khalid🥑💻 — Mon, 12 Sep 2022 09:29:23 +0000

An environment variable is a variable whose value is set outside the code or the application. This variable contains matters that will affect the functions of the program. The environment variable can be used everywhere, from a Single Page Application to your CLI or shell.

These variables also configure the application for different environments such as development, testing, staging and production.

Why do we need an environment variable?

The most common use of environment variables is to set up different configuration options for different programming environments. Environment variables are also widely used to store API keys and Auth Token or application configurations or something you want to keep away from the public.

This will help you make your code predictable by keeping the configuration outside the main codebase.

Environment variable best practices

When we are talking about handling data, we usually keep extra precautions. Here is a list of best practices you should follow while working with environment variables.

Use dotenv/`.env` file to manage environment variables

While working with APIs or third-party service providers, you must have seen developers storing the auth-token or the API key in a .env file.

The .env file is a value or variable that will help you configure a value in your codebase from outside the application. You can consider this a vault for all your secret or “shhh” keys.

We usually do not expose the data inside the .env file to the public for security reasons.

Let us understand this with an example; consider yourself making a discord bot; you must store the auth token somewhere not accessible to the public. In that case, the easiest way to do so is to keep it in an environment variable.

Look at this code snippet:



bot_secret_token = "ODI3NzczNzY0NTk4NDk3MzIx.YGf6ZA.0_BG9GFQto4aNwg1idPkHHVMwGY"

Instead of doing this, we can do something secure and away from the public. So we will store the auth token in a .env file and then call it in the main code.

Here is how we do add the token in an env file.

DISCORD_BOT_SECRET= “ODI3NzczNzY0NTk4NDk3MzIx.YGf6ZA.0_BG9GFQto4aNwg1idPkHHVMwGY”

Now let us call the token in the main code base,

bot_secret_token = process.env.DISCORD_BOT_SECRET

It is as simple as storing all your passwords over the cloud and calling the unique key to access the password every time.

Do not push the `.env` file to your Git Repo

This is the most common mistake; folks usually push the environment variables to their GitHub, exposing the key to the world. Some folks hunt these mistakenly pushed environment variables on Github/Gitlab and use them illegally to access your data.

This issue can be avoided by adding the .env file to your existing .gitignore file or creating a new one at the root of your repository and adding the .env filename as a new line. Following is the code snippet as an example:

# Inside .gitignore
.env

If in case the .env file still shows up in your git repo, it can be removed using the below command in your CLI:

git rm -r --cached .env

Use encryption and decryption on environment variables

You might use the .env file, which sits inside a server, to store important passwords and keys to databases and APIs. Keeping it in text inside a .env is risky as it may get exposed if the server is compromised. To avoid this issue, one should use Encryption and Decryption. There are a couple of tools and libraries which offer similar functionality. You can try any of those, but we recommend using CryptoJS or Forge.

Here is how you can encrypt your password using CryptoJS

var CryptoJS = require("crypto-js"); 
var data = "password";
 var encrypted = CryptoJS.AES.encrypt(data, "my-secret"); 
console.log(encrypted.toString());

After you have encrypted the string, copy and paste it to the .env file.

It can be easily decrypted using the below code snippet:

var decrypted = CryptoJS.AES.decrypt(process.env.PASS, "my-secret"); 
var object = decrypted.toString(CryptoJS.enc.Utf8);

It can be decrypted if the secret key matches like JWT.

Suppose you are still unsure about the security. In that case, Some services like Azure have special services like Azure Key Vault, where the keys are encrypted and can be injected into the project via a CI/CD or a dev-ops build or directly into VPS or app service.

Use the same variable for the different application environments

It is ultimately an optional practice to do so, but we recommend using the same name for the environment variable, even for different application environments.

For example, if you have My_Sec_token = “Xyz”, it should be the same for the development, testing, staging and production, Although the values may differ in each case. The reason is - Your code will probably run over different machines for different stages. This will simplify your code and make it easy to use.

Wrapping up

In this blog post, we understood what environment variables are, why they are helpful, and the best practices to keep in mind while using them.
Here are some additional tips you should follow for better use of environment variable:

Do not share your environment variables
Do not keep the variables inside your code
Use a secure vault for encryption and decryption of your secret information
Do not commit your environment variables to version controls like git.

Best 10 Code Snippets for Next and JavaScript in 2022

Khalid🥑💻 — Thu, 24 Mar 2022 13:35:29 +0000

What is a Code Snippet?

A Code Snippet is a reusable block of code .It is good to reuse code as it will improve your productivity and make sure you always import the correct code and are not missing anything related to code.

Why use Code Snippet for Next and JavaScript?

Next.js gives you the best developer experience with all the features you need for production-level applications. To provide a better developer experience and to write better code, faster developers should try to use code snippets while coding.

1. Next JS Page Template

Shortcut:next.page.create

This code snippet will give users a pre-defined layout for the Next JS Page. This is very beneficial when you are working on multipage applications.

Link to this snippet on Snipt.dev

2. Import image using Code Snippets

Shortcut:next.image.create

This code snippet is an Image component for Next in javascript. You will have to enter the src and some basic alignment, and your image is imported.

Link to this snippet on Snipt.dev

3. Hyperlink

Shortcut:next.link.create

Another helpful code snippet when working with multipage applications. This code snippet will let you import a link component directly onto your IDE.

Link to this snippet on Snipt.dev

4. Next App with layout

Shortcut:next.app.layout.create

You can directly import your app layout into a page using this code snippet. This code creates an example _app.jsx with per-page layout capabilities.

Link to this snippet on snipt.dev

5. Next page with getServerSideProps

Shortcut:next.page.server.props.create

This code snippet will pre-render this page on each request using the data returned by getServerSideProps. This is a helpful code snippet as it will help you code faster, which is the need of the hour.

Link to this snippet on Snipt.dev

6. Next useState

Shortcut:next.hook.state.use

This code snippet will help you in state management. The useState Hook allows you to track state in a function component. Need no trouble, right? Just use next.hook.state.use on your IDE.

Link to this snippet on Snipt.dev

7. Next getStaticProps

Shortcut:next.static.props.create

Next.js allows you to export an async function called getStaticProps from the same file. This code snippet has a function that gets called at build time and lets you pass fetched data to the page's props on pre-rendering.

Link to this snippet on Snipt.dev

8. Next getStaticPaths

Shortcut:next.static.paths.create

To handle pre-rendered paths on external data. Next.js lets you export an async function called getStaticPaths from a dynamic page. This code snippet has a function that gets called at build time and enables you to specify which paths you want to pre-render.

Link to this snippet on Snipt.dev

9. Next page with getStaticProps

Shortcut:next.page.static.create

This code snippet allows you to create a Next page with static-dynamic props using getStaticProps function.

Link to this snippet on Snipt.dev

10. Next create context with hook

Shortcut: next.context.provider.hook.create

The code snippet creates a context and a function that takes a context as an argument. The context defines the global scope for the function. The function uses the context to access the value of the val variable.

Link to this snippet on Snipt.dev

How to add your Code Snippet?

Users can add their code snippets and share them with the community using snipt.dev and the Codiga snippet engine. Create an account on app.codiga.io, log in and create your recipe and it will automatically add to snipt.dev

There are two privacy settings for recipes; make sure you keep the public so that it can be picked by Codiga snippet engine.

Developer Resources

Code Snippets search engine snipt.dev for searching and finding some reusable code.

Please refer to our official documentation if you have any doubts.

Codiga for defining your own code snippets

DEV Community: Khalid🥑💻

Environment variables & Its best practices

Why do we need an environment variable?

Environment variable best practices

Use dotenv/.env file to manage environment variables

Do not push the .env file to your Git Repo

Use encryption and decryption on environment variables

Use the same variable for the different application environments

Wrapping up

Best 10 Code Snippets for Next and JavaScript in 2022

What is a Code Snippet?

Why use Code Snippet for Next and JavaScript?

1. Next JS Page Template

2. Import image using Code Snippets

3. Hyperlink

4. Next App with layout

5. Next page with getServerSideProps

6. Next useState

7. Next getStaticProps

8. Next getStaticPaths

9. Next page with getStaticProps

10. Next create context with hook

How to add your Code Snippet?

Developer Resources

Use dotenv/`.env` file to manage environment variables

Do not push the `.env` file to your Git Repo