DEV Community: Sahu, S

(Should you) Get started with vim

Sahu, S — Thu, 30 Jun 2022 20:08:50 +0000

NOTE: This blog might discuss ideas which might not exactly align with you. But at the end of the day, that’s all they are, my choices. I’m always open to discussion and learning something new though.

It’s all about editing text

The world of text editors is very hostile from what I’ve experienced so far. You might’ve heard discussions surrounding what to use — vim, emacs, notepad, VSCode and all the other choices. I enjoyed using VSCode during my time in college. I still remember it was something new that had come out then and I enjoyed using it a lot. So why am I writing about vim now?

Why did I choose vim?

It was in a CS Lab in college when I first ran into vi. I was on a Fedora Machine and a git commit put me into vim (Ctrl + C :wqis how you quit vim by the way). For some reason, the cryptic UI was fun to use. Ever since then, I have enjoyed it. Well, it’s improved version vim.

On the terminal, I’m usually running something close to Ubuntu. Whether it’s inside a container, a pod running in Kubernetes, my home server (a Raspberry Pi 4 running Ubuntu Server), my personal machine on Windows running WSL. And even though Ubuntu’s default editor is nano, I find it easy to just run a sudo apt update -y && sudo apt install -y vim

So should you? Use vim?

Short answer, yeah, why not? Give it a try.

Long answer. Yes, but you might not like it right away. And it’ll take a time to get used to the shortcuts. So, let’s see how to get started and take the plunge.

Getting started with vim

When I got serious to get into vim, I didn’t realise how less clear guides were there to get started. Albeit, I was looking for how to use vim as a code editor and not a general text editor. But let’s be real, vim doesn’t really make sense as a general text editor for me.

The absolute absolute basics

Opening a file in vim — vim <path-to-file>
Tap i to insert text
Now write whatever you want
To exit, Ctrl C :wq

Plugin Manager

So, the first thing I started to look for is a package manager, or a plugin manager as it’s in the vim world. Plugins add a lot of extra features. I ended up using Vundle.

To set it up, it’s just a single command —

git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

.vimrc

Just like everything else in the shell, vim has its own rc file which we can use to customize it to our needs. Because vim is all about getting to my development environment as fast as possible, I have put my .vimrc file up on github — https://github.com/cli-config/cli-config/blob/main/profiles/mrsauravsahu/.vimrc

Tabs v spaces

I like to use spaces because it is consistent across machines & I use 2 spaces. That’s what the following snippet does (it should also be in .vimrc)

" use spaces instead of tabs
set tabstop=2 shiftwidth=2 expandtab

Time for some plugins

Because I have Vundle setup now, I can install some plugins. Here’s the entire .vimrc

syntax on

set number

" use spaces instead of tabs
set tabstop=2 shiftwidth=2 expandtab

" git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'bling/vim-airline'
Plugin 'prabirshrestha/vim-lsp'
Plugin 'mattn/vim-lsp-settings'
Plugin 'prabirshrestha/asyncomplete.vim'
Plugin 'prabirshrestha/asyncomplete-lsp.vim'
Plugin 'junegunn/fzf'
Plugin 'junegunn/fzf.vim'
Plugin 'ledesmablt/vim-run'
Plugin 'dense-analysis/ale'
Plugin 'hashivim/vim-terraform'
call vundle#end()

" show spaces
set listchars=trail:·,lead:·
set list

" SHORTCUTS

" vim-run
nnoremap <silent> <C-x> :Run

" formatting
nnoremap <silent> <C-k><C-d> :gg=G <CR>

" fzf.vim
let fzf_default_command='find -L'
nnoremap <silent> <C-l> :Files <CR>
nnoremap <silent> <C-p> :GFiles <CR>

" UNUSED PLUGINS -- for now
" Plugin 'scrooloose/nerdtree'
" nnoremap <leader>n :NERDTreeFocus<CR>
" nnoremap <C-n> :NERDTree<CR>
" nnoremap <C-e> :NERDTreeToggle<CR>
" nnoremap <C-f> :NERDTreeFind<CR>

Brief about Modes

vim uses modal editing. Keys behave differently in different modes. The modes are - normal, insert, command.

Normal - Just viewing the file and basically navigating through a file
Insert - You’re inserting/editing text in the file
Command - Shortcuts you can execute to help your workflow (most of these are defined, and you can create your own too)

Shortcuts

Note: Few of these shortcuts depend on the plugins I’ve setup.

Keyboard shortcuts are something that’ll become a key reason you’ll keep using vim. I discovered few of these by accident and some by searching online. (shown in the .vimrc above)

Ctrl P - When writing stuff (in insert mode) - this shows you suggestions.
Ctrl P - When in normal mode - this will show you files in the current directory’s git repo - Fails if not in a git repo. This helps to not pollute the list with ignored files in git.
Ctrl L - When in normal mode - this shows all files in the current directory
gg - Go to top of the file
Shift G - Go to end of file
$ - Go to end of current line
0 - Go to beginning of current line

Commands

Note: Few of these commands depend on the plugins I’ve setup.

Let’s see some commands that can help your workflow.

:<line-number> - Go to line
:! <command> - Run a command in your $SHELL
:sh - Put vim process in background and go back to your shell. exit the shell to get back to vim

Conclusion

Clearly, vim has a lot of things going for it but also comes with a pretty steep learning curve. It might fit your needs or you might learn some new things in the shell. I’ve been having fun and trying to learn vim by using it on a daily basis.

I’ll be updating this article as I learn about new plugins, shortcuts and commands. Make sure you bookmark it.

And yeah, give vim a try.

-S

File Uploads on GraphQL: Why or Why not

Sahu, S — Sat, 13 Nov 2021 18:58:27 +0000

Note: The code mentioned in this post can be found in these repositories.

NestJS Reference - mrsauravsahu/blog-graphql-nestjs-fileupload

.NET Reference - mrsauravsahu/blog-graphql-dotnet-fileupload

If you just want to see how to do file uploads with GraphQL, just click here

GraphQL has become quite popular due to its various features fixing under/over fetching issues. It also allows for easy caching, federation, non-versioning APIs, subscriptions etc,.

For the modern Internet where data needs to be accessible on various types of applications running on various types of devices, GraphQL seems like a great way forward and also a good concept to put into your knowledge bag.

What are we trying to do?

GraphQL request and responses are typically in JSON format even though the GraphQL Spec doesn't mandate any format.

All data fetching and uploading can be done easily with GraphQL and responses can also use GZIP for compression.

One thing GraphQL lacks (or rather doesn't have a standard implementation for) is File Uploads.

Why/Why not?

There's no right or wrong here, but here are a few things to consider when you want to have file uploads and you also have a GraphQL API.

Standardization: Because typically GraphQL APIs use JSON format, they don't require Content Negotiation. This means that File Uploads, which use a multipart format, can be tricky to standardize. Most GraphQL implementations do provide provisions to implement File Uploads through your GraphQL API however.
Fully-Featured: All GraphQL APIs will use a text-based response format, so file downloads will still require a separate endpoint. This means your file upload and download will become separated. Decide based on whether you're fine with this or not.
All ingress at one-point: A good reason why you might want to use File Uploads through GraphQL is because you can still make sure all incoming data into your system is through the same endpoint. Not a strong argument, but traffic management does become easier.

File Upload Approaches for GraphQL

Few ways to go about it -

1. Files as strings

If your APIs deal with very small files, you can get away with a simple conversion from the binary representation of your file to a base64 string.

Let's see a simple example. If your file has the following content.

$ cat upload.txt
hello this is a simple file to be uploaded

You can use an input field to get the file in the Frontend and read its contents (with a FileReader perhaps) and then create a base64 string with the window.btoa WebAPI.

window.btoa('hello this is a simple file to be uploaded')
> 'aGVsbG8gdGhpcyBpcyBhIHNpbXBsZSBmaWxlIHRvIGJlIHVwbG9hZGVk'

From now, your file can be treated as a base64 string so processing it is fairly similar to how you process regular strings in your application.

Note: As file sizes grow, your application needs to be able to handle larger strings as payload and response sizes will drastically increase.

2. All File Handling happens on a separate endpoint

This would mean that your files can be uploaded to a separate REST endpoint, either hand-written or something like a pre-signed URL upload to a Storage Account on Microsoft Azure/S3 on Amazon Web Services.

3. File Uploads through GraphQL

Finally! As mentioned earlier, some GraphQL implementations do allow uploading files with a multipart/form-data request format.

Let's now see how this can be done with a NestJS GraphQL Server and a .NET GraphQL Server (with HotChocolate)

- GraphQL Server on NestJS

For NestJS, the GraphQL setup is fairly simple, read more about it here - docs.nestjs.com/graphql/quick-start

This uses the Apollo GraphQL Server, which does have support for File Uploads albeit through a different package.

So let's install this package. This is the graphql-upload package, and because we're using TypeScript, it's good to also install the typings for it.

npm i graphql-upload && npm i -D @types/graphql-upload

NestJS uses TypeGraphQL behind the scenes, which means our GraphQL Schema can be generated from TypeScript classes. I have a basic Model here.

import { Field, Int, ObjectType } from '@nestjs/graphql';

@ObjectType()
export class Person {
  @Field(() => Int)
  id: number;

  @Field()
  firstName?: string;

  @Field()
  lastName?: string;

  @Field(() => Int, { nullable: true })
  coverPhotoLength?: number = null;

  @Field(() => String, { nullable: true })
  coverPhoto?: string;

  private _coverPhoto?: Buffer;
}

This is a basic model to store details about a user, or a person rather.

For our File Upload to work, we need to initialize the graphql-upload package in our main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { graphqlUploadExpress } from 'graphql-upload';

async function bootstrap() {
  const port = process.env.PORT || 8080;

  const app = await NestFactory.create(AppModule);
  // Allow maximum file size of 2 Megabytes - 
  // change based on your needs and 
  // what your server can handle
  app.use(graphqlUploadExpress({ maxFileSize: 2 * 1000 * 1000 }));
  await app.listen(port);
  console.log(`App running at ${await app.getUrl()}`);
}

bootstrap();

Let's add a mutation which allows the consumer of our GraphQL API to upload a file and we'll return the length of the file in bytes.

import { Args, Int, Mutation, Query, Resolver } from '@nestjs/graphql';
import { Person } from './person.model';
import { GraphQLUpload, FileUpload } from 'graphql-upload';
import * as fs from 'fs/promises';

@Resolver(() => Person)
export class PersonResolver {
  person: Person;

  public constructor() {
    this.person = {
      id: 1,
      firstName: 'Saurav',
      lastName: 'Sahu',
    };
  }

  ...

  @Mutation(() => Int, { name: 'coverPhoto' })
  async uploadCoverPhoto(
    @Args('file', { type: () => GraphQLUpload }) file: FileUpload,
  ): Promise<number> {
    try {
      const { createReadStream } = file;

      const stream = createReadStream();
      const chunks = [];

      const buffer = await new Promise<Buffer>((resolve, reject) => {
        let buffer: Buffer;

        stream.on('data', function (chunk) {
          chunks.push(chunk);
        });

        stream.on('end', function () {
          buffer = Buffer.concat(chunks);
          resolve(buffer);
        });

        stream.on('error', reject);
      });

      const buffer = Buffer.concat(chunks);

      const base64 = buffer.toString('base64');
      // If you want to store the file, this is one way of doing
      // it, as you have the file in-memory as Buffer
      await fs.writeFile('upload.jpg', buffer);
      this.person.coverPhotoLength = base64.length;
      this.person.coverPhoto = base64;

      return base64.length;
    } catch (err) {
      return 0;
    }
  }
}

Here, the GraphQLUpload type creates a scalar in our GraphQL Schema which allows for uploading. As you can see, we get the stream in our handler and we can do any type of processing on it.

We're putting the chunks of the multipart upload together and then writing to a file, but you can also pipe the readStream to a file directly. This is just to show that you can handle the raw bytes in your file.

However, this code looks a bit unwieldy due to the stream events, so thanks to a newer node feature, we can use a for await loop instead.

We can replace the stream.on calls with this -

...
const stream = createReadStream();
const chunks = [];

for await (const chunk of stream) {
    chunks.push(chunk);
}

const buffer = Buffer.concat(chunks);
...

This is pretty neat, isn't it.
So, that's how you can implement File Uploads on your GraphQL API with NestJS.

GraphQL Server on .NET (HotChocolate)

HotChocolate, one of the most popular GraphQL libraries for .NET also has an implementation for File Uploads.

At the time of writing, I was on an RC version of .NET 6. But this works for .NET 6.0.100 as well. Yay! this means there's really less code.

This is my Program.cs

using HotChocolate.Types;
using BlogGraphQLFileUpload.GraphQL;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllers();

builder.Services
    .AddGraphQLServer()
    .AddQueryType<Query>()
    .AddMutationType<Mutation>()
    .AddType<UploadType>();

var app = builder.Build();

// Configure the HTTP request pipeline.
app.UseAuthorization();
app.MapControllers();

app
    .UseRouting()
    .UseEndpoints(endpoints => { endpoints.MapGraphQL(); });

app.Run();

As you can see I'm setting up GraphQL with Services. To allow file uploads, I have to add the Upload Scalar to my GraphQL Schema. This is done with the builder.Services.AddType<UploadType>() call.

Now we can write a similar mutation to handle our File Upload, which is the Mutation class I have registered in this case.

using BlogGraphQLFileUpload.Data;
using HotChocolate.Types;

namespace BlogGraphQLFileUpload.GraphQL;

public class Mutation
{
  public async Task<long?> coverPhoto(IFile file)
  {
    await using var stream = file.OpenReadStream();

    var streamWriter = new FileStream("./output.jpg", FileMode.OpenOrCreate);

    await stream.CopyToAsync(streamWriter);

    GlobalData.me.CoverPhotoLength = stream.Length;

    return GlobalData.me.CoverPhotoLength;
  }
}

HotChocolate gives you an IFile interface to work with, and you can get the stream from there. Now you have the power to process it however it makes sense for your application.

Testing your File Uploads

At the time of writing, Apollo Playground doesn't support File Uploads through its UI. So you're going to have to use Postman to test out your File upload

Shoutout to this answer on Stack Overflow - helped a lot - https://stackoverflow.com/a/61892790/5640343

You can also use the same thing with a curl command

curl --location --request POST 'http://localhost:8080/graphql' \
--form 'operations="{\"query\": \"mutation updateProfilePhoto($file: Upload!) {  coverPhoto(file: $file)} \", \"variables\": {\"file\": null}}"' \
--form 'map="{\"0\": [\"variables.file\"]}"' \
--form '0=@"./assets/grand-palais-mrsauravsahu.jpg"'

Here, the map property maps our file and passes it on to our handler. You should also be able to get the mime-type and add more logic for those.

So, this was how you can do File Uploads with GraphQL, and also a few thoughts on if you really should? You can find the full code base in the links at the top.

Have a great one!

- Saurav, @mrsauravsahu everywhere.

I automated publishing my VSCode Extension

Sahu, S — Sun, 03 Oct 2021 10:08:43 +0000

Github Actions has changed the way CI/CD is done for Open-Source projects. In this blog post, I want to show you one awesome way this has come in handy, in one of my projects.

Premise

I manage 'Custom Profiles for VSCode', which is an extension to help you create isolated VSCode Instances and also for teams to align on their VSCode configuration.

The Problem

Every time I make an improvement to the project, I have to do this additional task of creating a .vsix bundle and upload it to the VSCode Marketplace. What I'd love to do is, merge my code changes and automate all the deployment related tasks.

Github Actions to the Rescue

I chose to tackle this with Github Actions. I create a PR - which should ideally try to build and test my package and once merged, automatically deploy to the VSCode Marketplace.

Let's Dive into the Code

All the code is available on github in the 'Custom Profiles for VSCode' repository. You can find the workflow file here - cd.yml

Here's the simple workflow file I used to automate the deployment.

name: "cd"

on:
  push:
    branches:
      - cool

jobs:
  cd:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout to branch
        uses: actions/checkout@v2

      - name: Setup node.js
        uses: actions/setup-node@v1
        with:
          node-version: ${{ secrets.NODE_VERSION }}

      - name: Install packages
        run: npm ci

      - name: Calculate version
        id: calculateVersion
        run: |
          APP_VERSION=`cat package.json | jq ".version" -M | sed 's/\"//g'`
          echo "::set-output name=AppVersion::$APP_VERSION"
          echo "app version = v$APP_VERSION"
      - name: Build VSIX package
        run: npm run build -- -o custom-profiles-for-vscode.v${{ steps.calculateVersion.outputs.AppVersion }}.vsix

      - name: Publish extension package
        env:
          VSCODE_MARKETPLACE_TOKEN: ${{ secrets.VSCODE_MARKETPLACE_TOKEN }}
        run: npm run vsce -- publish -p $VSCODE_MARKETPLACE_TOKEN

      - uses: actions/upload-artifact@v2
        name: Upload artifact
        with:
          name: custom-profiles-for-vscode.v${{ steps.calculateVersion.outputs.AppVersion }}.vsix
          path: custom-profiles-for-vscode.v${{ steps.calculateVersion.outputs.AppVersion }}.vsix

The steps should be fairly simple to understand, which include:

get the code from my branch
setup node.js on the Runner
install the npm packages

4. Calculate the version

I'm using the version field in the package.json file to determine which version of the package I need to deploy.

This is not an issue even if I forget to bump the version, as the deployment would anyway fail.

I will integrate GitVersion with this at some point. Stay tuned for that blog post! 😁

5. Building the project

I'm using VSCE - VSCode Extension Manager package to build and deploy my project to the Marketplace.

"scripts": {
    ...
    "build": "(rm -rf out || true) && mkdir out && cp package.json out && vsce package"
    ...
},

Here I copy the package.json and the contents of the build and get ready to deploy. This creates the .vsix file which we'll check out later.

6. Deploy to Marketplace

Again, VSCE comes handy to push the build to the marketplace. I've added a token for authentication.

You can create this token through Azure DevOps. Check this page for more details - https://code.visualstudio.com/api/working-with-extensions/publishing-extension. You need a token with the marketplace:manage scope and you should be good to go.

Inject this as a secret in your Github repository's Secrets page, and you'll be able to use it in your Workflow.

7. Publishing an artifact

If the VSCode Marketplace isn't your thing, I also publish the extension as a .vsix file which can be installed in VSCode by using the Command Palette (Ctrl/Cmd + Shift + P) and then Extensions: Install from VSIX

And it's that easy to automate deployment for your VSCode Extension Projects to the Marketplace! Give it a try, I'm sure it'll save a you a lot of time.

Have a great one. 👋

-Saurav

Referential Data Validations with yupjs

Sahu, S — Sun, 23 May 2021 14:35:12 +0000

What is Data Validation?

Data validation is the process of checking whether a given value fits certain criteria based on its business requirements.

For any input - a UI input field or an API input body, data validation is crucial. Any arbitrary input should never be trusted. And data validation plays a vital role in making sure these inputs are rigorously funnelled through the right pipes before they create unintended side-effects in our applications.

Data Validation in the JavaScript world

In JavaScript projects, both the browser and node.js, that is, there are several npm packages available to do data validation. I've personally used joi and yupjs.

joi was my goto choice for Data Validation for a long time. It worked really well with hapijs and has a great community around it. Trust me, I don't have anything against joi, it's just that I find yupjs to be more easier for me to work with.

yupjs is also a data validation library, and gets lots of its characteristics from joi but focuses more on client side validation and can be easily extended.

An example of a Data Validation

Data validations are done on each property of an incoming "Data Transfer Object". Just a fancy way 🎓 of saying an object which is created from the raw inputs and passed along for cleaning and processing before actually getting stored or used in other places of an application.

Let's take a simple signup page example. We will have two inputs and the DTO will have the shape shown below:

type SignUpDto = {
  userName: string | undefined,
  password: string | undefined
}

Simple data validations here are:

the userName and password fields are required
userName should be of a maximum length of 12
password should be a minimum length of 8

etc.

Enter yupjs

To achieve this, yupjs uses a concept called as a schema for validation. I'm sure you'll find the yupjs library very similar to joi, so let's take a look. The simple validations for the userName and password can be written like shown below:

import * as yup from 'yup'

type SignUpDto = {
  userName: string | undefined,
  password: string | undefined
}

const signUpSchema = yup.object({
  userName: yup
    .string()
    .required('please enter a username')
    .max(12),
  password: yup
    .string()
    .required('please enter a password')
    .min(8)
})

As you can see, you can define custom error message for each validation as well. Now this signUpSchema can be used to actually to the data validation, which is shown below:

const signUp: SignUpDto = {
  userName: 'sample',
  password: undefined
}

signUpSchema.validate(signUp, { abortEarly: false })
  .then(console.log)
  .catch(console.error)

>
ValidationError: please enter a password
    at finishTestRun (.../node_modules/yup/lib/util/runTests.js:63:20)
    at .../node_modules/yup/lib/util/runTests.js:17:5
    at finishTestRun (.../node_modules/yup/lib/util/runTests.js:67:9)
    at .../node_modules/yup/lib/util/createValidation.js:72:127 {
  value: { userName: 'sample', password: undefined },
  path: undefined,
  type: undefined,
  errors: [ 'please enter a password' ],
  inner: [
    ValidationError: please enter a password
        at createError (/Users/sauravsahu/Documents/personal/code/yuppers/node_modules/yup/lib/util/createValidation.js:54:21)
        at /Users/sauravsahu/Documents/personal/code/yuppers/node_modules/yup/lib/util/createValidation.js:72:107 {
      value: undefined,
      path: 'password',
      type: 'required',
      errors: [Array],
      inner: [],
      params: [Object]
    }
  ]
}

As we can see, we get the detailed explanation as to why the validation failed in the inner property. I map over the inner property and keep only the path and value fields - this is enough for my frontend app to understand what localised message to show.

signUpSchema.validate(signUp, { abortEarly: false })
  .then(console.log)
  .catch(err => {
    var validationErrors = err.inner.map((error: any) => ({ type: error.type, path: error.path }))
    console.error(JSON.stringify(validationErrors, undefined, 2))
  })

>
[
  {
    "type": "required",
    "path": "password"
  }
]

This is great, and yupjs has support for lots of different types of validations out-of-the-box, listed here - yupjs API

What is referential validation?

Unlike some validation rules which depend on just one key of a property, more complex validations could reference other properties as well. yupjs allows us to refer to other property of our DTO with test methods.

For our example, let's say we want to make sure the password doesn't contain the username as a string - meaning, if username is sample, password cannot be 123saMplE456 because the word sample appears in the sample.

To validate this password, we need to refer to the username field as well. We can write this with the test method from yupjs. Let's modify our schema as shown below.

const signUpSchema = yup.object({
   userName: yup
     .string()
     .required('please enter a username')
     .max(12),
   password: yup
     .string()
     .required('please enter a password')
     .min(8)
+    .test('contains-username', (password, context) => {
+      const { userName } = context.parent;
+      const userNameString = userName ?? '';
+      const containsUserName = (password ?? '').toLowerCase().includes(userNameString.toLowerCase())
+
+      return !containsUserName
+    })
 })

As you can see, I've added default values with the null coalescing operator as userName and password could be falsey.

Now if we try to validate our sample user, we get this validation error, which is exactly what we wanted.

[
  {
    "type": "contains-username",
    "path": "password"
    }
]

For the test method, the first argument is the name of the validation, for us, it is contains-username and the second method is the actual test function which gets the current value and the context with which it is getting validated, and we can pick the userName with this context.

Conclusion

yupjs is a very versatile data validation library. It can used in both the browser and in node.js. It has great in-built validators but also supports custom validation. Referential validation is a breeze and those methods can be easily unit-tested as well.

yupjs also contains casting methods to transform objects from one shape to other. I'm currently enjoying yupjs on the Daily Vocab App

Have a great one! Keep on coding.

- mrsauravsahu

Documenting .env files for nodejs Projects

Sahu, S — Fri, 14 May 2021 18:51:27 +0000

The original post is published on my Blog at mrsauravsahu

Note: There's a video version available where I actually build this project and deploy it to npmjs: https://youtu.be/4N1lwa6w6HA

Documentation of any sort looks like an overhead at the time, but pays off really well for projects that need to be maintained for a long time, when teams change, when onboarding new members, and a whole lot others.

For nodejs projects, application configuration is usually read from process.env which in turn, come from a place like ENVIRONMENT variables or a configuration file like .env. During development, this package dotenv is a great tool to set your environment variables.

Documentation is Key

For large projects with even larger teams, code-base changes constantly and so does the configuration. So documentation is key to keep anyone who uses the code-base later.

A typical .env file looks like this (it's a collection of key=value pairs)

# The Node environment
NODE_ENV=development

# Url to a third party service
API_SERVICE_URL=https://mrsauravsahu.tech/posts/41/file

Since the value could contain sensitive information, to document this, we should ideally omit the value from each key=value pair and add this template of sorts to source control, which look something like the example below:

# The Node environment
NODE_ENV=

# Url to a third party service
API_SERVICE_URL=

What did I build?

I created an npm package which generates these template .env files from the real .env file, called gen-env-template.
This is a dev tool so you can install it as a devDependency.

# Use your favorite package manager to install this. (You can use npx to run directly as well)
npm i -D gen-env-template

Now that we have the package, we can pass in the .env file we're using and path to the outfile file. For example, if this is our input file -

➜ cat .env
# The Node environment
NODE_ENV=

# Url to a third party service
API_SERVICE_URL=

We can generate our template file with this command

➜ ./node_modules/.bin/gen-env-template .env template.env

Now we get the generated template file

➜ cat template.env
# The Node environment
NODE_ENV=

# Url to a third party service
API_SERVICE_URL=

Now, this template.env file can be safely committed to source control as all secrets have been omitted. You can find the Github repository for this project here - mrsauravsahu/gen-env-template on Github