DEV Community: Dev Sharma

Ditching Linux for WSL 2

Dev Sharma — Sat, 20 Nov 2021 14:10:28 +0000

WSL 2 == Microsoft's love for Linux

Development on Linux

I switched to Linux last year and shifted my development completely to the Linux ecosystem. Tried out arch, Manjaro, Pop OS!, Ubuntu, MX Linux. Development is really productive with a Linux environment.

Gaming on Windows

A few months back I upgraded my potato to a gaming laptop which of course came with Windows pre-installed, I also started gaming. I ended up doing dual boot to run Ubuntu as my daily driver for development, but this eventually meant a redundant set of tools on Windows as well.

Windows 💖 Linux

Windows released the Windows Subsystem for Linux 2 in May 2019. WSL 1 was a compatibility layer for running Linux binary executables on Windows. WSL2 built on top is built on the core technology of Hyper-V to provide better support and improved performance running a Linux kernel.

Why WSL 2 instead of native Windows

Most production environments run on Linux and with WSL 2 environment the tooling available on development become the same as in production. Also WSL 2 is super easy to set up and get started with.

Set up WSL 2 on Windows

Open an elevated Powershell (Run as administrator) from the start menu and use the following commands to get WSL 2 up and running.

(Note that: WSL 2 is only available in Windows 10, Version 1903, Build 18362 or higher)

Step 1 - Enable the Windows Subsystem for Linux

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

Step 2 - Enable the Virtual Machine feature

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

You need to restart your PC after this step.

Step 3 - Download & install the Linux kernel update package

https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

Step 4 - As a final step set WSL 2 as your default version

wsl --set-default-version 2

Now you can install your favourite Linux distro from the Microsoft Store. After the installation completes you'll need to restart and complete the setup of your Distro.

Enter the username and password for root user and you are good to go.

Set your default Linux distro for WSL 2.

wsl --set-version <distribution name> <versionNumber>

🎉🎉🎉That's it you have successfully set up WSL 2 and can now begin your journey to become a 10x Developer.

Feel free to reach out to me on Twitter @cryptus_neoxys and connect with me on LinkedIn.

Refs & Resources

Microsoft Docs

Ubuntu Wiki

ITProTV -YouTube

Nest JS REST API Tutorial

Dev Sharma — Wed, 17 Nov 2021 03:58:16 +0000

Nest JS REST API Tutorial

Getting started

The first things you'll need are:

Node installed
Your favourite Code Editor/IDE

Once you have those setup, let us get started with nest.
Install the nest js CLI:

npm i -g @nestjs/cli

Now we can use this to bootstrap our nest project, using the following command:

nest new <project-name>

The command should start scaffolding your app, select your preferred package manager and let the CLI setup and install dependencies.

Then navigate into your project directory and start the development server.

cd nest-beginner
npm run start:dev

Open a browser and go to http://localhost:3000/, and you should see a familiar message

Developing our API

To keep this tutorial simple, we are going to use nest CLI's resource generator recipe for generating our resources. Go ahead and run the following command to generate the User resource for our API.

For this tutorial, we will be developing a REST API, so go ahead and select that option and also let nest generate the CURD entry points to give us some boilerplate code to get started with.

After running the command successfully, you should have the following files in src/ directory:

We start by defining the user entity and the DTOs:

// user.entity.ts
export class User {
  id: number;
  username: string;
  email: string;
  password: string;
}

// create-user.dto.ts
export class CreateUserDto {
  username: string;
  email: string;
  password: string;
}

Since we are using nest generated resource's boilerplate, it makes it simpler as we need to modify just the business logic in the service layer which the controller is already utilising in the API layer. (for this tutorial, we will be storing everything in-memory, do note that in a real-world application we would use a database like MySQL or MongoDB)

// user.service.ts
@Injectable()
export class UsersService {
  private users: User[] = [];
  private idSeq = 0;

  create(createUserDto: CreateUserDto) {
  }

  findAll(): User[] {
    return this.users;
  }

  findOne(id: number): User {
  }

  update(id: number, updateUserDto: UpdateUserDto): User {
  }

  remove(id: number): User {
  }
}

Let us begin with the Get methods first.

// user.service.ts
  findAll(): User[] {
    return this.users;
  }

  findOne(id: number): User {
    return this.users.find((user) => user.id === id);
  }

To create the user, we push the create user DTO and use the idSeq variable to generate a sequential id for it:

// user.service.ts
  create(createUserDto: CreateUserDto) {
    this.users.push({
      ...createUserDto,
      id: this.idSeq++,
    });
    return this.users.at(-1);
  }

To update the user, we first find the index by the id, if the user exists then we overwrite the values with the update user DTO.

// user.service.ts
  update(id: number, updateUserDto: UpdateUserDto): User {
    const i = this.users.findIndex((user) => user.id == id);
    if (i === -1) return null;
    this.users[i] = {
      ...this.users[i],
      ...updateUserDto,
    };
    return this.users[i];
  }

For deleting, we similarly find if the user exists by id, and use the Array slice method to delete it from memory:

// user.service.ts
  remove(id: number): User {
    const i = this.users.findIndex((user) => user.id == id);
    if (i === -1) return null;
    const user = this.users[i];
    this.users.splice(i, 1);
    return user;
  }

Now all of our CRUD functionalities are in place and we can test our API, yes you heard that right, we don't need to wire up the controller, set up the module and wire it up with our app, the nest CLI did all of that for us when we generated users resource. So fire up Postman or Insomnia or whatever is your favourite HTTP client.

You can find the source code for this article on this GitHub repo.

Feel free to reach out to me on Twitter @cryptus_neoxys and connect with me on LinkedIn.

Refs & Resources

Nest JS Docs

Developing with VS Code on WSL 2

Dev Sharma — Thu, 11 Nov 2021 07:44:39 +0000

VS Code 🤯

VS Code seems to be the 1 size fit all code editor. VS Code offers really seamless integration to develop on a remote connection such as the WSL 2 with the simple installation of an extension.

Develop in WSL 2 on VS Code

If you don't have it already, install VS Code from the official site.

(You can also download the insiders build if you like living on the bleeding edge)

While installing VS Code, make sure to check the Add to Path option.

All you need to do is install the Remote - WSL Extension

Start a WSL 2 remote session
Press Ctrl + Shift + P and type in new wsl window to open up a new WSL 2 window and select the option

A new WSL 2 window should open up from the directory you were using.

It is advised to use VS Code from the Linux file system instead of the windows'. To do this just use the Open Folder option from the File menu.

Just traverse to ~ or $HOME directory and then add the projects to the Linux file system and use them from there.

Upon opening any projects in WSL window, you will see the WSL 2.0 connection on the bottom-left as well as the title bar.

🎉🎉🎉
That was it, now you can work on any project with VS Code inside WSL.

Feel free to reach out to me on Twitter @cryptus_neoxys and connect with me on LinkedIn.

Refs & Resources

Microsoft Docs

Setting up Nodejs with nvm on WSL 2

Dev Sharma — Sat, 22 May 2021 07:17:14 +0000

Installing node.js in WSL 2

( NOTE : Although this tutorial demonstrates WSL 2/Ubuntu, this installation is primarily for Linux) In this tutorial, we will use node version manager or nvm to install and manage node versions. nvm certainly has its advantages as it allows you to easily install and manage multiple node versions on your system. This also means you can easily switch node and npm versions with a single command and that comes in handy.

If you don't already have it, install curl



sudo apt-get install curl


curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

( Note: instead of v0.38.0 Use the latest version of nvm from GitHub)

Verify your installation using



command -v nvm

(If you get an error command not found, restart your shell and try again.)

Let's install the LTS and latest stable version of Nodejs, you can also choose one of those if you prefer, but believe me, it's super simple to switch between different node versions using nvm.

Install the LTS version



nvm install --lts

Install the latest version



nvm install node

You can check all the installed versions using the following command



nvm ls

Check the version of node and npm you are running:



node --version
npm --version

You can install a specific version of node:



nvm install 14.17.0

To use a specific node version:



nvm use 14.17.0
# lts version
nvm use --lts
# latest stable version
nvm use node

Feel free to reach out to me on Twitter @cryptus_neoxys and connect with me on LinkedIn.

Refs & Resources

Microsoft Docs

nvm-sh/nvm

How to setup Tailwind CSS jit with NextJS

Dev Sharma — Thu, 13 May 2021 12:12:07 +0000

The JAMStack

The latest addition to the Tailwind project is the its just-in-time compiler that generates your styles on-demand as you author your templates instead of generating everything in advance at the initial build time.

Here are the advantages that JIT offers:

Lightning fast build times
Every variant is enabled out of the box
Generate arbitrary styles without writing custom CSS (top[-10px])
Identical CSS in development and production
Better browser performance in development

Lets get Started

Create a next project.

npx create-next-app next-tailwind-tutorial
cd ./next-tailwind-tutorial

Next, let's install Tailwind dependencies and create a Tailwind config.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/jit
npx tailwindcss init -p

A better folder structure

Now we need to modify these two files, but before that lets organize our folder structure

Create an src folder in the root directory
Move styles and pages folders inside it.

tailwind.config.js

module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

This will make our development run with Tailwind JIT and in production, it will run JIT one-off.

Now add the Tailwind directives to your

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

🎉🎉🎉That's it and you are ready to use Tailwind in your next project.

Run the dev server and test out your app.

npm run dev

Bonus

Tailwind CSS has a VS Code extension you can use to speed up development and boost productivity.

Also check out the Headwind extension, this tool automatically enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

Refs & Resources

Tailwind Docs

Next Tailwind

Tailwind JIT Compiler

If you loved the article and would like to support me, you can buymeacoffee!

How to use Redis with Express

Dev Sharma — Sat, 08 May 2021 11:17:21 +0000

Building an App that can cache

Let's take a look at trying to build an app without Redis that caches response data. We can use a global variable. As soon as the process is terminated, the variable will be destroyed and as you see we no longer have a persistent cache as we used a variable, which is ephemeral.

Redis to the rescue

Redis really becomes useful when you want to persist data in memory, for faster access that allows you to use it as a cache. So what does Redis do, Redis is an in-memory data store but a persistent on-disk database, meaning we can use Redis as a database that performs reads and writes directly into memory while also achieving persistence as the Redis server writes to disk from time to time.

Let's get coding

For this tutorial, I have decided to go with a combination of express as a server and mongoose ODM with JavaScript.

To work with Redis inside of a node server, we need a Redis driver and we are going to use the official Redis package.

Let's install the dependencies:

npm i express mongoose redis dotenv
npm i -D nodemon

Once we have the set up complete, we can go ahead and configure our .env file.

MONGODB_URI=<your mongodb connection string>

If you configured Redis locally, you can skip the REDIS_* variables, and just pass in the password.

If you used a docker container, spin it up with a port mapped to 6379 (or something else like 63791 here).

docker run --name some-redis -d -p 63791:6379 redis

if you used a Redislabs instance, log in and select your database and go to the configuration page, where you can find your connection env variables.

.env

REDIS_HOST=<your Redis HOST>
REDIS_PORT=<your Redis PORT>
REDIS_PASSWORD=<your config PASSWORD>

We are completely configured to use Redis in our app. To keep this article short I'm gonna skip over setting up mongoose and express, as this is a more generalised approach towards using Redis in any of your node apps.
(You can find the code for models, controllers, etc on the GitHub repository)

Let's set up the Redis Client in our index.js, add the following lines to your code.

index.js

import redis from "redis";
import { promisify } from "util";

// create redis client
const client = redis.createClient({
  host: process.env.REDIS_HOST,
  port: parseInt(process.env.REDIS_PORT),
  password: process.env.REDIS_PASSWORD,
});

// redis.js doesn't support async utils as of writing this article
// we can use the recommended workaround
export const getAsync = promisify(client.get).bind(client);
export const setAsync = promisify(client.set).bind(client);

We will use getAsync to get the values from Redis store and setAsync to set values in our Redis store.

We need to modify our APIs to use Cache when we request data, via Get requests.

Express GET route

app.get("/api/<resource>", async (req, res) => {
  try {
    // Get from cache using the "Key"
    const getRes = await getAsync("resourceKey" );
    if (getRes)
      return res.json({ success: true, data: JSON.parse(getRes) });

    // On cache-miss => query database
    const users = await <Model>.find({});

    // Set cache
    await setAsync("resourceKey",   // Key
      JSON.stringify({res}),        // Value
      "EX",                         // Set explicit expiry
      60                            // TTL in seconds
    );

    return res.status(200).json({success: true, data: <resource>});
  } catch (error) {
    // Handle errors
  }
});

Add the Cache getAsync and setAsync to all your GET routes and that's it. Now you have a basic cache setup with your express server.

🎉🎉🎉 Super fast and efficient caching.

This blog is part of a Redis learning series, in the previous post, I have explained setting up Redis using 3 different ways.

Feel free to reach out to me on Twitter @cryptus_neoxys and connect with me on LinkedIn.

Refs

NPM Redis.js

yoursTRULY YouTube

Traversy Media

Installing and setting up Redis

Dev Sharma — Mon, 03 May 2021 22:15:10 +0000

Redis

Redis is an in-memory data structure store, used as a database, cache, and message broker that allows for incredibly fast read and write ops.

We are going to see 3 ways of setting up Redis. I will be using Ubuntu 20.04 for this tutorial.

1. Installing Redis Locally

Installing docker on

sudo apt update
sudo apt install redis-server

You need to configure a couple of thing after this, use any editor and change the supervised directive to systemd.

sudo nano /etc/redis/redis.conf

You can also set your redis password, since Redis is pretty fast you need a very strong password. Use the following command to generate one.

openssl rand 60 | openssl base64 -A

Save the files and restart the Redis service to check if its running.

sudo systemctl restart redis.service
sudo systemctl status redis

2. Use a Docker Image

Pull the Redis docker image

docker pull redis

And start a redis instance

docker run --name some-redis -d redis

3. Managed Redis Labs instance

You can also use a free tier instance from Redis Labs.

Create an account and select your favourite cloud provider.

I'm gonna select the 30 MB free tier, that's more than enough for our project.

You will be directed to set up a database:
A few things to consider here:

Type of eviction policy (I highly recommend setting up an eviction policy).
If you want to use a Redis module, you can set it up here.

I have selected the allkeys-lru eviction policy and no modules.

This blog is part of a series, in the next part, we will set up our node server to cache data with Redis. You can continue with the series using any of the Redis setups mentioned in this blog.

Feel free to reach out to me on Twitter @cryptus_neoxys and connect with me on LinkedIn.

Refs

https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-redis-on-ubuntu-18-04

https://redis.io/download

Deploy a node server to Vercel!

Dev Sharma — Wed, 28 Apr 2021 01:36:28 +0000

Vercel 😏

Vercel, the creator of Next js. But isn't that where you are supposed to host your frontend applications.
Yes, but not just that!
We can host a node backend applications on Vercel. Vercel essentially allows running a server on Vercel.

Deploying to Vercel

Create a free account on Vercel. (Preferably, use a provider where the repository for code is hosted)

Add a vercel.json file in the root folder.

{
  "version": 2,
  "name": "name-of-your-vercel-app",
  "builds": [
    { "src": "script.js", "use": "@vercel/node" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/index.js" }
  ]
}

Now create a new projecton Vercel.

When setting up the repository, we need to select the Other option in Frameworks to deploy a backend server. You can also configure Environment variables at this stage.

And that's it you have deployed your server blazing fast 🚀.

If you are a developer enjoying Vercel to deploy your front-end applications, you will definitely love Vercel for hosting your backend node applications.

What's your go-to way for deploying a node server? 🙌🏻

Source repo: mongo-CRUD-basics
Deployed app: https://mongoose-crud.vercel.app/
Feel free to reach out to me on Twitter and connect with me on LinkedIn