DEV Community: Mukesh

How to build a faucet CLI using NodeJS 🚀

Mukesh — Sat, 23 Apr 2022 04:57:41 +0000

Hey everyone 👋! I guess I took a long break from blogging but I am back with some interesting web3 stuff. Today we are doing to be BUIDLing a command-line interface that would act as a faucet and we would be also adding metamask authentication to it 🚀!

💡 The idea

Let’s understand the idea of the command-line interface which we are going to be building. It’s a simple command-line interface that would transfer testnet tokens to the user and we are going to be adding metamask authentication also 👀.

Wait what? Metamask authentication via a CLI ???

Let me explain how are we going to implement the Metamask authentication.

We would create a basic website using Next.js which would have the connect with wallet (Metamask authentication) button. We would be using thirdweb to add Metamask authentication to our Next.js website.
After the user has authenticated themselves via Metamask on the website, they would be redirected to a page with route /callback. When redirected the page would also contain a query parameter that contains the user’s wallet address 👀. So the user would be redirected to a page with route path something like this: /callback?address=0xd24CA0297558f0827e2C467603869D1AC9fF435d.
We would be starting up a local express application at port 9991 (don’t worry we would be immediately closing the port after the authentication process is been completed). The /callback route exists on this local express application.
👀 We don’t want the user to be seeing a blank page for hours right? (in context to make the user stay on the /callback route on the local express application) Instead, we can redirect them to a /done route on the main website, so that they will know that the authentication process is being completed.

😵‍💫 Woah! That’s hard to digest in one go

⚒️ Tech stack

The tech stack which we are going to be using to build this CLI:

TypeScript as the main programming language that we are going to be using to program the command-line interface, website, and the backend
Next.js as the framework that we are going to be using to build the website
Tailwind CSS as our CSS framework to style the website
Express as the backend framework
Oclif as our command-line interface framework
Thirdweb for the metamask authentication
Web3.js and Ethers to perform tasks such as sending the testnet token to the user
Alchemy as our blockchain node service

🛠️ Building the website

🏗️ Creating a new Next.js project

Let’s create a new Next.js project by using the following command:

npx create-next-app -e=with-tailwindcss thw-faucet-cli

I am using thw-faucet-cli as my CLI name. Feel free to change the name of the CLI.

This should generate a folder structure similar to this:

🦁 Adding metamask authentication using thirdweb

We would have to install a few packages so that we can build the metamask authentication using thirdweb.

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers

After you have installed it, go ahead and open the pages/_app.tsx file. We would have to set up the ThirdwebProvider that provides all the context consumed by your app. With this context, you will have a standard web3 provider that you can use throughout your app.

To set up the ThirdwebProvider you need to just wrap your app with the following setup:

import type { AppProps } from "next/app";
import { ThirdwebProvider, ChainId } from "@thirdweb-dev/react";

import "../styles/globals.css";

function MyApp({ Component, pageProps }: AppProps) {
  const desiredChainId = ChainId.Mumbai;

  return (
    <ThirdwebProvider desiredChainId={desiredChainId}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Let’s now add the feature where the user can click a button and can connect their wallet to the website.

Head over to the pages/index.tsx file and add the following code:

import type { NextPage } from "next";

import {
  useAddress,
  useMetamask,
  useCoinbaseWallet,
  useWalletConnect,
  useDisconnect,
} from "@thirdweb-dev/react";

const Home: NextPage = () => {
  const connectWithCoinbaseWallet = useCoinbaseWallet();
  const connectWithMetamask = useMetamask();
  const connectWithWalletConnect = useWalletConnect();
  const address = useAddress();
  const disconnectWallet = useDisconnect();

  if (address) {
    return (
      <div>
        <p className="m-12 font-medium text-gray-600">Address: {address}</p>
        <br />
        <button
          onClick={disconnectWallet}
          className="w-64 rounded-full bg-blue-600 py-2 font-medium text-white transition-all duration-75 hover:bg-blue-500"
        >
          Disconnect
        </button>
      </div>
    );
  }

  return (
    <>
      <div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-gray-50">
        <button
          onClick={connectWithCoinbaseWallet}
          className="w-64 rounded-full bg-blue-600 py-2 font-medium text-white transition-all duration-75 hover:bg-blue-500"
        >
          Connect Coinbase Wallet
        </button>
        <button
          onClick={connectWithMetamask}
          className="w-64 rounded-full bg-blue-600 py-2 font-medium text-white transition-all duration-75 hover:bg-blue-500"
        >
          Connect MetaMask
        </button>
        <button
          onClick={connectWithWalletConnect}
          className="w-64 rounded-full bg-blue-600 py-2 font-medium text-white transition-all duration-75 hover:bg-blue-500"
        >
          Connect WalletConnect
        </button>
      </div>
    </>
  );
};

export default Home;

Let’s understand what kind of magic is the above code doing 👀

We are using the React hooks provided by the @thirdweb-dev/react package which we have installed just a while ago. We are importing the following hooks:

useAddress, Used to get the address when the user has successfully authenticated themselves via metamask
connectWithMetamask, Used to open the metamask popup from which the user can authenticate themselves
connectWithCoinbaseWallet, Used to authenticate the user via Coinbase Wallet
connectWithWalletConnect, Used to authenticate the user via Wallet Connect

Let’s now test it out by running yarn dev command.

%[https://youtu.be/Kk5WpFlbC4Y]

🎉 Woohoo!! It’s working

🎨 Building the done page

Let’s now build the done page. We are going to keep it simple as of this tutorial, you can improve the UI as you wish.

Create a new file named done.tsx under the pages folder and add the following code:

import type { NextPage } from "next";

const Done: NextPage = () => {
  return (
    <p className="m-12 font-medium text-gray-600">
      You have successfully connected your metamask wallet to the CLI. You can
      now close this tab and return to the CLI
    </p>
  );
};

export default Done;

🛠️ Building the CLI

🏗 Creating a new CLI project using Oclif

Let's create a new CLI project using the following command:

npx oclif generate cli

Fill in the inputs which are been asked and hit enter. This should generate a folder structure similar to this:

Psst... I am making a monorepo for this tutorial. So make sure to add the code responsible for CLI into the cli folder and the code responsible for the website into the web folder.

Let's now delete some default generated files by Oclif that we are not going to be using in this tutorial.

We are not going to write any kind of tests for this tutorial. So let's just delete the tests folder and the .mocharc.json file.
We are not going to be using CircleCI for this tutorial. So let's just delete the .circleci folder.
Oclif has also generated a default command (hello) which isn't necessary for this tutorial, so let's just delete the src/commands/hello folder.

🔑 Building the login command

Oclif CLI has pretty useful generator commands which can be used to generate commands quickly!

Let's create a new command named login which would be used to authenticate the user via metamask.

npx oclif generate command login

This would generate two files:

src/commands/login.ts
src/test/commands/login.test.ts

As I have said before, we would be not writing any tests in this tutorial. So let's just delete the test folder again.

Head over to the src/commands/login.ts file. You would see that there is a lot of boilerplate code.

Let's clean it up and add a console log to run the run function by which we can verify that our Oclif CLI setup doesn't have any issues.

import { Command } from "@oclif/core";

export default class Login extends Command {
  static description = "🦁 Connect your Metamask wallet to the faucet CLI";

  static examples = ["faucet-cli login"];

  async run() {
    console.log("🎉 It's working!");
  }
}

The description and the examples are shown in the help sub-command.

Let's test the CLI out but first, we need to compile TypeScript code into JavaScript code. We do it by running the yarn build command. It would create a dist folder with the compiled JavaScript code.

To run the CLI, we need to run the run file present in the bin folder along with the command. So to run the login command, we have to run the ./bin/run login command.

🎉 Woohoo! It's working!

Let's now actually build the login command 👀.

Create a new folder named lib and then create a new file under it named connectWallet.ts. This file would contain the logic to connect the user's wallet to the CLI.

Let's install a package called inquirer which is used to prompt the user for input. We would be using this package to prompt the user to open the browser or not.

yarn add inquirer

As we are using TypeScript, we need also to install @types/inquirer as a dev dependency. The @types/inquirer package includes the type declarations for the inquirer package.

yarn add -D @types/inquirer

Let's import the inquirer package into our src/lib/connectWallet.ts file.

import * as inquirer from "inquirer";

Let's now programmatically create a prompt that asks the user whether to open the browser or not using inquirer.

import * as inquirer from "inquirer";

const connectWallet = () => {
  inquirer
    .prompt([
      {
        name: "openBrowser",
        type: "confirm",
        message: "Would you like to open the browser to connect wallet?",
        default: true,
      },
    ])
    .then((answer) => {
      console.log(answer);
    });
};

export default connectWallet;

I have wrapped the entire code which is responsible for connecting the user's wallet inside a function. As we are going to be importing this into the src/commands/login.ts file.

Let's import the connectWallet function into our src/commands/login.ts file and call it inside the run function.

import { Command } from "@oclif/core";

import connectWallet from "../lib/connectWallet";

export default class Login extends Command {
  static description = "🦁 Connect your Metamask wallet to the faucet CLI";

  static examples = ["faucet-cli login"];

  async run() {
    connectWallet();
  }
}

Let's build the code and test it out.

As you can see the inquirer package returns an object with the key as the name of the prompt and the value as the answer.

Let's add a console log that says that the user won't be able to use the request command if they don't connect their wallet.

import * as inquirer from "inquirer";

const connectWallet = () => {
  inquirer
    .prompt([
      {
        name: "openBrowser",
        type: "confirm",
        message: "Would you like to open the browser to connect wallet?",
        default: true,
      },
    ])
    .then((answer) => {
      if (!answer.openBrowser) {
        console.log(
          "You won't be able to request testnet tokens if you don't connect your wallet."
        );
        return;
      }
    });
};

export default connectWallet;

Let's now start building the cool part of the CLI, authenticating the user 🦄.

We need to first need a few packages:

express, to start a local server at port 9991 to handle the authentication.
open, to open links in the browser from the cli.
chalk, to colorize the console output.

To install all of the above packages, run the following command:

yarn add express open chalk@4.1.2

We are using the v4.1.2 of chalk as v5 of chalk is complete ESM module. As we are using TypeScript, it is better to stay on the v4.1.2.

As we are using Typescript, we need also to install the TypeScript declarations for the above packages. chalk and open come with in-built TypeScript declarations. So we need to just install the TypeScript declarations for the express package.

yarn add -D @types/express

Let's start a local express application when the user chooses Yes for the prompt.

import * as inquirer from "inquirer";
import * as express from "express";
import * as open from "open";

const connectWallet = async () => {
  inquirer
    .prompt([
      {
        name: "openBrowser",
        type: "confirm",
        message: "Would you like to open the browser to connect wallet?",
        default: true,
      },
    ])
    .then(async (answer) => {
      if (!answer.openBrowser) {
        console.log(
          "You won't be able to request testnet tokens if you don't connect your wallet."
        );
        return;
      }

      try {
        const app: express.Application = express();

        app.use(express.json());
        app.use(express.urlencoded({ extended: false }));

        const server = app.listen(9991);

        server.close();

        process.exit(0);
      } catch (err) {
        console.log(err);

        process.exit(1);
      }
    });
};

export default connectWallet;

👀 We have to change some code in the website. So let's head back to the web folder and open the pages/index.tsx file. Let's replace the code where we were showing the user's wallet address after they have connected theirs to redirecting the user to the local express's /callback with the address query parameter.

import type { NextPage } from "next";

import {
  useAddress,
  useMetamask,
  useCoinbaseWallet,
  useWalletConnect,
} from "@thirdweb-dev/react";
import { useRouter } from "next/router";

const Home: NextPage = () => {
  const connectWithCoinbaseWallet = useCoinbaseWallet();
  const connectWithMetamask = useMetamask();
  const connectWithWalletConnect = useWalletConnect();
  const address = useAddress();
  const router = useRouter();

  if (address) {
    router.push(`http://localhost:9991/callback?address=${address}`);
  }

  return (
    <>
      <div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-gray-50">
        <button
          onClick={connectWithCoinbaseWallet}
          className="w-64 rounded-full bg-blue-600 py-2 font-medium text-white transition-all duration-75 hover:bg-blue-500"
        >
          Connect Coinbase Wallet
        </button>
        <button
          onClick={connectWithMetamask}
          className="w-64 rounded-full bg-blue-600 py-2 font-medium text-white transition-all duration-75 hover:bg-blue-500"
        >
          Connect MetaMask
        </button>
        <button
          onClick={connectWithWalletConnect}
          className="w-64 rounded-full bg-blue-600 py-2 font-medium text-white transition-all duration-75 hover:bg-blue-500"
        >
          Connect WalletConnect
        </button>
      </div>
    </>
  );
};

export default Home;

Let's now try to open the http://localhost:3000 in the browser and console log the user's wallet address when he successfully connected his wallet.

import * as inquirer from "inquirer";
import * as express from "express";
import * as open from "open";

const connectWallet = async () => {
  inquirer
    .prompt([
      {
        name: "openBrowser",
        type: "confirm",
        message: "Would you like to open the browser to connect wallet?",
        default: true,
      },
    ])
    .then(async (answer) => {
      if (!answer.openBrowser) {
        console.log(
          "You won't be able to request testnet tokens if you don't connect your wallet."
        );
        return;
      }

      try {
        const app: express.Application = express();

        app.use(express.json());
        app.use(express.urlencoded({ extended: false }));

        const server = app.listen(9991);

        let resolve: any;

        const p = new Promise((_resolve) => {
          resolve = _resolve;
        });

        // get the address query param which is been sent by the website and redirecting the user to the done page.
        app.get(
          "/callback",
          async (req: express.Request, res: express.Response) => {
            resolve(req.query.address);
            res.redirect("http://localhost:3000/done");
          }
        );

        // opening the main website in browser
        open("http://localhost:3000");

        // grabbing the address from the query param
        const code = await p;

        console.log(code);

        // closing the server as we don't want it to run forever
        server.close();

        process.exit(0);
      } catch (err) {
        console.log(err);

        process.exit(1);
      }
    });
};

export default connectWallet;

Let's test it out by starting the website with the yarn dev command. Make sure that you are present in the web folder before running this command.

Let's also compile the TypeScript code of the CLI into JavaScript by using the yarn build command. Make sure that you are present in the cli folder before running this command.

Let's now finally test the login command by running the ./bin/run login command while being there in the cli directory.

%[https://youtu.be/w-aUXaZueLE]

👀 We are missing out on something...

We don't want the user to connect their wallet every single time they use our CLI to request testnet tokens. So let's store the user's wallet address in a local file that lives in the user's root directory. The path of the config file (config.json) would be something like this <user's-root-dir>/.thw-faucet-cli/config.json. The structure of content inside the config.json would be something like this:

{
  "address": "0x0"
}

Create a new folder named utils and create a new file under it named saveAddress.ts. This file would contain the logic for creating a new file and then writing the user's wallet address to it.

import * as fs from "fs";
import * as os from "os";

import { configFilePath } from "../constants/constants";

const saveAddress = (address: string) => {
  try {
    fs.mkdirSync(`${os.homedir()}/.thw-faucet-cli`);
    fs.writeFileSync(configFilePath, JSON.stringify({ address: address }));
  } catch (err) {
    console.log(err);
    return;
  }
};

export default saveAddress;

I have created a new file named constants/constants.ts which contains the path of the config file. I did this because we are going to be using the path of the file in multiple places.

Let's import the saveAddress function into the lib/connectWallet.ts file and call it along with the user's wallet address as the parameter.

import * as inquirer from "inquirer";
import * as express from "express";
import * as open from "open";
import * as chalk from "chalk";

import saveAddress from "../utils/saveAddress";

const connectWallet = async () => {
  inquirer
    .prompt([
      {
        name: "openBrowser",
        type: "confirm",
        message: "Would you like to open the browser to connect wallet?",
        default: true,
      },
    ])
    .then(async (answer) => {
      if (!answer.openBrowser) {
        console.log(
          "You won't be able to request testnet tokens if you don't connect your wallet."
        );
        return;
      }

      try {
        const app: express.Application = express();

        app.use(express.json());
        app.use(express.urlencoded({ extended: false }));

        const server = app.listen(9991);

        let resolve: any;

        const p = new Promise((_resolve) => {
          resolve = _resolve;
        });

        // get the address query param which is been sent by the website and redirecting the user to the done page.
        app.get(
          "/callback",
          async (req: express.Request, res: express.Response) => {
            resolve(req.query.address);
            res.redirect("http://localhost:3000/done");
          }
        );

        // opening the main website in browser
        open("http://localhost:3000");

        // grabbing the address from the query param
        const code = await p;

        // storing the user's address locally in the config file
        saveAddress(code as string);

        console.log(
          chalk.greenBright(
            `\nYou have successfully connected your wallet to the faucet CLI!\nWallet address: ${code}`
          )
        );

        // closing the server as we don't want it to run forever
        server.close();

        process.exit(0);
      } catch (err) {
        console.log(err);

        process.exit(1);
      }
    });
};

export default connectWallet;

If the user has logged in once and the address has been saved then if the user tried to log in again, then it would be a problem 🤔. So let's first check if the config.json file exists or not. If it exists then call the connectWallet function or else console log that the user is already logged in.

Let's create a new file named utils/getToken.ts which contains the logic for getting the token which is been stored in the local file (config.json).

import * as fs from "fs";

import { configFilePath } from "../constants/constants";

const getToken = () => {
  try {
    const config = JSON.parse(fs.readFileSync(configFilePath, "utf8"));
    return config.address;
  } catch (err) {
    return null;
  }
};

export default getToken;

We are returning null if the address key in the config.json file doesn't exist and the value of the address key if it exists.

Let's import the getToken function into the src/commands/login.ts file and call it.

import { Command } from "@oclif/core";
import * as chalk from "chalk";

import connectWallet from "../lib/connectWallet";

import getToken from "../utils/getToken";

export default class Login extends Command {
  static description = "🦁 Connect your Metamask wallet to the faucet CLI";

  static examples = ["faucet-cli login"];

  async run() {
    // checking if the user is already logged in or not
    if (getToken() === null) {
      console.log(chalk.redBright("\nYou are already logged in!"));
      return;
    }
    connectWallet();
  }
}

Let's test it out 👀

🎉 Woohoo! We have successfully made the login command. Phew! That was long. Let's take a coffee break ☕.

Let's back to work now 🚀!

🚰 Building request command

Let's start building the main core command of the CLI, the request command.

👷‍♂️ Workflow of the request command

Let's understand the workflow of the request command:

The user first uses the request command, we would check if the user is logged in or not via the getToken function.
If the user is not logged in, then we console log saying that you need to be logged in to use this command.
If the user is logged in, then send a request to the backend with the specified network (for this tutorial I am going to be Rinkeby and Polygon Mumbai testnet networks)
The backend would use web3.js and ethers to send the testnet tokens to the user and it would return with the transaction hash in the response.

Let's use Oclif's CLI to generate a new command:

npx oclif generate command request

As I have mentioned before, we would not be writing any kinds of test in this tutorial. So let's delete the generated test folder again.

Go ahead and open the src/commands/request.ts file and let's clean the boilerplate code.

import { Command } from "@oclif/core";

export default class Request extends Command {
  static description = "🚰 Request for testnet tokens";

  async run() {}
}

Let's use the inquirer package to prompt the user with the supported testnet networks. In this tutorial, I would be using Rinkeby and Polygon Mumbai. Feel free to add any testnet network in which you have a sufficient amount of tokens to build a faucet out of it.

Let's create a file named src/data/questions.ts which would contain an array with all the questions which would be prompted to the user. I have created another file named src/data/networks.ts which would contain an array with all the supported testnet networks.

src/data/networks.ts

const networks = ["mumbai", "rinkeby"];

export default networks;

src/data/questions.ts

import networks from "./networks";

const questions = [
  {
    type: "list",
    name: "network",
    message:
      "🦄 choose the testnet network on which you want to request the tokens",
    choices: networks,
  },
];

export default questions;

Let's import the questions array in the src/commands/request.ts file and use the inquirer package to create a prompt out of it.

import { Command } from "@oclif/core";
import * as inquirer from "inquirer";

import questions from "../data/questions";

export default class Request extends Command {
  static description = "🚰 Request for testnet tokens";

  async run() {
    inquirer.prompt(questions).then((answers) => {});
  }
}

👀 Oh wait... We forgot to check whether the user is logged in or not firstly. Let's import the getToken function into the src/commands/request.ts file and call it.

import { Command } from "@oclif/core";
import * as inquirer from "inquirer";
import * as chalk from "chalk";

import getToken from "../utils/getToken";

import questions from "../data/questions";

export default class Request extends Command {
  static description = "🚰 Request for testnet tokens";

  async run() {
    if (getToken() === null) {
      console.log(
        chalk.redBright(
          "\nYou need to be logged in first to use this command!\nUse `faucet-cli login` command to login."
        )
      );
      return;
    }

    inquirer.prompt(questions).then((answers) => {});
  }
}

✨ Building the backend

Let's now start building the backend 🦄.

Create a new folder named server in the root directory.

Let's initialize a new npm project by using the yarn init -y command. Make sure to run cd server, if you are present in the root directory. This should generate a package.json file.

Let's edit the package.json file a bit:

{
  "name": "server",
  "version": "0.0.1",
  "main": "dist/index.js",
  "license": "MIT"
}

Let's now add the packages which we would need to build the backend:

express, as our backend framework
web3 and ethers, as our blockchain library
dotenv, to read the environment variables from the .env file

To install the above packages, run the following command:

yarn add express web3 ethers dotenv

As we are using TypeScript, we would also need to install a few more packages as dev dependencies:

@types/express, type declarations for express
typescript, to compile the TypeScript code
ts-node, to run the TypeScript code
nodemon, to run the reload the server on file changes

yarn add -D @types/express typescript ts-node nodemon

After the package has been installed, let's create a new tsconfig.json where we defined the configuration to be followed by the TypeScript compiler.

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "lib": ["dom", "es6", "es2017", "esnext.asynciterable"],
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "removeComments": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "baseUrl": "."
  },
  "exclude": ["node_modules"],
  "include": ["./src/**/*.ts", "tsconfig.json", "index.ts"]
}

Let's create a new file named src/index.ts and add the following code:

import express, { Express, Request, Response } from "express";

const app: Express = express();

app.get("/", (_req: Request, res: Response) => {
  res.json({
    status: "Alive!",
  });
});

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at ${port}`);
});

Let's understand what does the above code does:

We are importing the express package and creating an instance of express called app.
We have defined a GET route / which returns a JSON object saying `status: 'Alive!'.
We have defined a middleware app.use which is used to parse the incoming request body as JSON and URL encoded.
We are defining a port variable that would be used to listen to the port. The port which we are defining right now (in our case it's 3000) might vary from the port on which the server would run in the production mode. So, we are defining a process.env.PORT variable which would be used to listen to the port.

Let's add a few scripts in the package.json:

json "scripts": { "watch": "tsc --watch", "start": "node dist/src/index.js", "build": "tsc", "dev": "nodemon dist/src/index.js" }

Let's now open two terminal windows, one for compiling the TypeScript code and the other for running and automatically reloading the server on file changes. Run yarn watch in one of the terminals and yarn dev in the other terminal. Make sure that you are present in the server directory, if not then run the cd server command before running the above commands.

👀 We have just created a basic express application. Let's now understand how can we test the routes which we have added. Currently, we only have one route but as our backend grows, we would have more and more routes.

If you are using VSCode then there is a pretty good extension that can help you to test the API routes inside VSCode itself. Go ahead and search for Thunder Client in the extensions tab and install the one whose author is Ranga Vadhineni.

After you have installed Thunder Client, you would see a thunder icon in the left sidebar.

Click that thunder client and you would see a webview something like this:

Click the "New Request" button and you would see a screen like this:

If you have used Postman before then you would feel this interface is familiar.

Let's change the URL to http://localhost:3000/ and click the "Send" button.

You would see the response like this:

Let's now start building the actual request route which would send the tokens to the user.

Let's create a new folder called controllers, this folder would contain the core logic for the respective routes. Create a new file called request.ts under the controllers folder.

It's the time to interact with the blockchain using ethers and web3.js libraries.

Let's add the following code to the src/controllers/request.ts file, don't worry we would be explaining the code:

`ts
import { Request, Response } from "express";
import { ethers } from "ethers";
import dotenv from "dotenv";
import Web3 from "web3";

import constants from "../data/constants";
import { chainId, txUrl, apiUrls, amount } from "../data/networks";

dotenv.config();

const privateKey = process.env.PRIVATE_KEY!.toString();
const wallet = new ethers.Wallet(privateKey);

const request = async (req: Request, res: Response) => {
const address = wallet.address;

const httpsUrl = apiUrls.get(String(req.query.network!));

var web3 = new Web3(new Web3.providers.HttpProvider(httpsUrl!));

const httpsProvider = ethers.getDefaultProvider(httpsUrl);

let nonce = await httpsProvider.getTransactionCount(address, "latest");

let feeData = await httpsProvider.getFeeData();

const balance = web3.utils.fromWei(
// @ts-ignore
await web3.eth.getBalance(constants["fromAddress"]),
"ether"
);

if (web3.utils.isAddress(String(req.query.address!)) === false) {
res.json({
error: "Invalid receiver address",
invalidAddress: true,
});
} else {
// @ts-ignore
if (balance < amount?.get(req.query.network)!) {
res.json({
error: "Insufficient funds",
insufficientFunds: true,
});
} else {
const tx = {
type: 2,
nonce: nonce,
to: req.query.address,
maxPriorityFeePerGas: feeData["maxPriorityFeePerGas"],
maxFeePerGas: feeData["maxFeePerGas"],
// @ts-ignore
value: ethers.utils.parseEther(amount.get(req.query.network)),
gasLimit: 30000,
chainId: chainId.get(String(req.query.network)),
};

  // @ts-ignore
  const signedTx = await wallet.signTransaction(tx);

  const txHash = ethers.utils.keccak256(signedTx);
  console.log("Precomputed txHash:", txHash);
  httpsProvider.sendTransaction(signedTx).then(console.log);

  res.json({
    txLink: `${txUrl.get(String(req.query.network))}/${txHash}`,
  });
}

}
};

export default request;
`

Damn! That's a lot of code. Let's break it down:

We are importing the express (along with the Request and Response types), ethers, web3.js, and dotenv libraries.
We are importing the chainId (Chain ID of the supported networks), txUrl (The URL of the blockchain explorer along with the tx route), apiUrls (URL of Alchemy project), amount (The amount of tokens to be sent on each network). Wait what's this data/network.ts file now? What does it contain? The data/networks.ts basically contains a quite few hashmaps to map the network name with the properties mentioned above.

`ts
import dotenv from "dotenv";

dotenv.config();

const chainId = new Map([
["mumbai", 80001],
["rinkeby", 4],
]);

const txUrl = new Map([
["mumbai", "https://mumbai.polygonscan.com/tx"],
["rinkeby", "https://rinkeby.etherscan.io/tx"],
]);

const apiUrls = new Map([
["mumbai", process.env.ALCHEMY_API_URL_MUMBAI],
["rinkeby", process.env.ALCHEMY_API_URL_RINKEBY],
]);

const amount = new Map([
["mumbai", "1"],
["rinkeby", "0.1"],
]);

export { chainId, txUrl, apiUrls, amount };
`

We configured the dotenv library to load the environment variables from the .env file.
We are creating a wallet using the ethers library using the private key. Wait whose private key is it? Is it the private key of the user? Nope! It's the private key of a new metamask wallet which we are going to be creating now specifically for this faucet.

If you have metamask then you can skip to step 5.

To install the metamask extension, go ahead to https://metamask.io and install the extension.
After you have installed the extension, you would see a page something like this. Click get started.
Click on create a new wallet
Type in the password for your Metamask account
Metamask would give you a secret recovery phrase which makes it easy to recover your account. Never share your secret recovery phrase with anyone.
Let's create a new wallet for this faucet specifically. Click on the icon of the metamask extension. You would see something like this.
Click on the avatar of the account which is present on the top right.
Select "Create Account". This should ask you for the name of the new wallet that you are going to create.
After you have entered the name of the new wallet, click on the "Create" button.
Let's now export the private key of this wallet. Click on the three dots on the top right and then select "Account details".
Click on "Export private key", and you would be asked for your metamask password. Enter that in copy the private key.
Create a new file called .env under the server folder and add the following text in that file.

PRIVATE_KEY=<add your private key over here>
- We have then grabbed the API URL from the hashmaps of the src/data/networks.ts file. Wait what are these API URLs? These are the API URLs of our Alchemy project.
If you don't know have an account at Alchemy, you can create one at https://www.alchemy.com.
After you have created the account head over to https://dashboard.alchemyapi.io and create a new project. We would be creating two apps one for Rinkeby and one for Polygon Mumbai.
After you have created the project, click on it and it would open the dashboard for that project and click on the "View key"
Copy the HTTP API key and paste it into the .env file. The .env file would look something like this now:

PRIVATE_KEY=<add your private key over here> ALCHEMY_API_URL_MUMBAI=<add the alchemy api url for the polygon mumbai network over here> ALCHEMY_API_URL_RINKEBY=<add the alchemy api url for the rinkeby network over here>

We are checking whether the given wallet address is valid or not using the web3.js library.

ts if (web3.utils.isAddress(String(req.query.address!)) === false) { res.json({ error: "Invalid receiver address", invalidAddress: true, }); }

We are also checking whether we have a sufficient amount of balance in the wallet or not.

ts if (balance < amount?.get(req.query.network)!) { res.json({ error: "Insufficient funds", insufficientFunds: true, }); }

We are then using the ethers library to send the tokens to the receiver.

`ts
const tx = {
type: 2,
nonce: nonce,
to: req.query.address,
maxPriorityFeePerGas: feeData["maxPriorityFeePerGas"],
maxFeePerGas: feeData["maxFeePerGas"],
// @ts-ignore
value: ethers.utils.parseEther(amount.get(req.query.network)),
gasLimit: 30000,
chainId: chainId.get(String(req.query.network)),
};

// @ts-ignore
const signedTx = await wallet.signTransaction(tx);

const txHash = ethers.utils.keccak256(signedTx);
console.log("Precomputed txHash:", txHash);
httpsProvider.sendTransaction(signedTx).then(console.log);

res.json({
txLink: ${txUrl.get(String(req.query.network))}/${txHash},
});
`

Create a new file called router.ts under the server folder and add the following text in that file.

`ts
import { Router } from "express";

import request from "./controllers/request";

const router = Router();

router.post("/request", request);

export default router;
`

Here we are importing the request controller from the controllers folder and creating a specific route for it (/request).

Let's now import router into the src/index.ts file and use the app.use method on router

ts import router from "./router";

ts app.use("/api", router);

Let's test the /api/request route but before testing, we need to get some testnet tokens into the account of the faucet CLI. Recently I have made a CLI get testnet tokens right away from the terminal so maybe it can help y'all 👀.

GitHub repo: https://github.com/Kira272921/faucetli

If you don't want to get the testnets tokens from the CLI, then you can get the testnet tokens from these faucets:

Polygon Mumbai faucet: https://faucet.polygon.technology/
Rinkeby faucet: https://faucets.chain.link/rinkeby

After you have got a sufficient amount of testnet tokens, we can now test the /api/request route. Go ahead and open Thunder Client and change the API link to http://localhost:3000/api/request and change the HTTP request method to POST.

We need to also pass the following query parameters while sending the request:

network - The network on which the user wants the testnet token. In our case, it's either mumbai or rinkeby.
address - The address of the receiver.

Let's now send the request 🚀!

🎉 Woohoo! It's working like a charm

👀 Integrating the backend and the CLI

Let's now integrate the backend and the cli using the axios library. We would be calling the backend using axios and then console logging the transaction link into the terminal.

Let's create a new file called src/lib/sendTokens.ts under the cli folder. This file would be containing the core logic for calling the backend and error handling.

`ts
import * as ora from "ora";
var axios = require("axios").default;
import * as chalk from "chalk";

import { apiUrl } from "../constants/constants";

const sendTokens = async (wallet: string, network: string) => {
const spinner = ora(🦄 sending tokens to ${wallet} on ${network}).start();

await axios
.post(${apiUrl}/request?address=${wallet}&network=${network})
.then((res: any) => {
if (res.data.insufficientFunds === true) {
spinner.fail(
chalk.redBright(
😿 I'm out of funds! You can use the Chainlink Faucet until I get refilled. https://faucets.chain.link.\nDonate: 0x16aD561aC34818E2f314E2D1d5a777cC39f5E3aB
)
);
} else {
if (res.data.invalidAddress === true) {
spinner.fail(chalk.redBright(🤷‍♂️ The address provided is invalid));
} else {
spinner.succeed(
chalk.greenBright(
🎉 sent the tokens to ${wallet} on ${network}, check ${res.data.txLink} to verify if the transaction was successful
)
);
}
}
})
.catch((err: any) => {
spinner.fail(chalk.redBright😿 ${err});
});
};

export default sendTokens;
`

Woah! That's a lot of code. Let's break it down:

We are importing a package called ora by which we can create terminal spinners. To install ora run the following command:

yarn add ora@5.4.1

Why are we installing the v5.4.1 of ora? Because the latest version of ora is a pure ESM module and instead of changing a hell lot of code, we can just install the version of ora which isn't pure ESM.

Ora comes with in-built TypeScript declarations so there is no need to install separately for its types.

We are importing the axios package and the chalk package. We have already installed the chalk package previously. So to install axios package run the following command:

bash yarn add axios

You might notice we are importing a variable called apiUrl from the constants/constants.ts file. The apiUrl variable is the base URL of the backend. As we didn't deploy the backend till now so we would be using localhost.

`ts
import * as os from "os";

const configFilePath = ${os.homedir()}/.thw-faucet-cli/config.json;
const apiUrl = http://localhost:3000;

export { configFilePath, apiUrl };
`

We are starting a spinner by calling the ora function and passing the message as 🦄 sending tokens to ${wallet} on ${network}.

ts const spinner = ora(🦄 sending tokens to ${wallet} on ${network}).start();

We are calling the backend with the address and network query parameters. We are then returning the transaction link which is sent along with the response when we call the backend.

ts await axios .post(${apiUrl}/request?address=${wallet}&network=${network}) .then((res: any) => { if (res.data.insufficientFunds === true) { spinner.fail( chalk.redBright(😿 I'm out of funds! You can use the Chainlink Faucet until I get refilled. https://faucets.chain.link.\nDonate: 0x16aD561aC34818E2f314E2D1d5a777cC39f5E3aB) ); } else { if (res.data.invalidAddress === true) { spinner.fail(chalk.redBright(🤷‍♂️ The address provided is invalid)); } else { spinner.succeed( chalk.greenBright(🎉 sent the tokens to ${wallet} on ${network}, check ${res.data.txLink} to verify if the transaction was successful) ); } } }) .catch((err: any) => { spinner.fail(chalk.redBright😿 ${err}); });

Let's now import the sendTokens function into the src/commands/request.ts and call with along with the wallet address and the network parameters.

`ts
import { Command } from "@oclif/core";
import * as inquirer from "inquirer";
import * as chalk from "chalk";

import sendTokens from "../lib/sendTokens";

import getToken from "../utils/getToken";

import questions from "../data/questions";

export default class Request extends Command {
static description = "🚰 Request for testnet tokens";

async run() {
if (getToken() === null) {
console.log(
chalk.redBright(
"\nYou need to be logged in first to use this command!\nUse faucet-cli login command to login."
)
);
return;
}

inquirer.prompt(questions).then((answers) => {
  sendTokens(getToken(), answers.network);
});

}
}
`

🧪 Testing the entire project

Let's test it out 🚀! Let me delete the .thw-faucet-cli folder from my root directory as I want to test the login command as well.

Let's first build the code of the cli by using the yarn build command. Open another terminal window cd into the server folder and run the yarn dev command. Open another terminal window cd into the web folder and run the yarn dev command.

😱 Oh no! We have just found an issue the login command redirects to localhost:3000 which we thought to be the port where the frontend would run but we have given that port to the backend so let's do a quick fix in the backend code and change the port from 3000 to 8080. We would also have to change the apiUrl variable in the cli/src/constants/constants.ts folder.

`ts
import * as os from "os";

const configFilePath = ${os.homedir()}/.thw-faucet-cli/config.json;
const apiUrl = http://localhost:8080/api;

export { configFilePath, apiUrl };
`

As we have changed some code in the cli folder, we would have to build the code again so let's run the yarn build again.

🎉 It's working!!! LFG 🚀

🚀 Deploying

Let's now deploy the frontend and the backend and publish the entire cli to npmjs.

🎨 Deploying the frontend

Let's deploy the frontend on Vercel. If you are building a Next.js application and want to deploy it, Vercel is the best option in my opinion.

Let's first create a initialize a git repository from the root directory of the project.

bash git init

Create a new GitHub repository (Psst.. https://repo.new 👀) and push the code to the repository.

Head over to https://vercel.com/dashboard and create a new project and edit the root directory from ./ to web.

Click on deploy and that's it 🎉!

🚄 Deploying the backend

We would be deploying the backend on Railway. Create a new project and select "Deploy from GitHub repo"

Select the GitHub repo and select add environment variables.

This should create a new project for us. Open up that project you would first see that the deployment has failed, don't worry we would fix that in a minute.

Open the settings tab

We would have to change the scripts in the backend a bit:

json "scripts": { "watch": "tsc --watch", "build": "tsc", "start": "ts-node src/index.ts", "dev": "nodemon dist/src/index.js" },

We also need to add a file called Procfile which contains the start command. Create a file named Procfile under the server folder and add the following to that file:

web: yarn start

Push the code to the GitHub repo and this should railway should redeploy it for us.

This should redeploy the latest commit again. You might see the deployment has failed again no worries we will fix it.

Head over to the variables tab and bulk import the environment variables from the .env file. We would also need to change the root directory from / to server. Head over to the settings tab and scroll down a bit and change the root directory from / to server and add the start command as yarn start.

That's you have just deployed the backend on the railway! 🎉

📦 Publishing the CLI

Let's now finally publish our CLI on npmjs. We would need to change the links of the backend and the frontend in the code of CLI. So let's do that:

In the src/constants/constants.ts change the backend URL from localhost:8080 to the deployed URL of the backend.
In the src/lib/connectWallet.ts change the frontend URL from localhost:3000 to the deployed URL of the frontend.

Let's test the cli out for the last time.

Woohoo! It's working! 🎉

Let's now generate the README.md using oclif 👀. Run yarn oclif readme command. This should generate a README.md with the table of content of all the commands which we have created and their usage and descriptions.

Let's now publish it to npmjs by using the npm publish command. Woohoo! It's finally done!

👋 The end

All those who have read the blog post until here deserve a big round of applause. Hope y'all have learned something new from this blog post

🔗 Links

GitHub: https://github.com/Kira272921/thw-faucet-cli
npmjs: https://www.npmjs.com/package/thw-faucet-cli
Website: https://thw-faucet-cli.vercel.app
Backend: https://thw-faucet-cli-production.up.railway.app

~ Happy building!

🚀 Solidity Quickstart [0]

Mukesh — Wed, 23 Feb 2022 08:46:00 +0000

Hey folks 👀. Hope y'all are doing great. You might have heard about web3 and its hype on Twitter and maybe you wanna explore it as well. Well, so today I am here to give all a quick tour of solidity 🚀. So let's get started.

NOTE: This blog post isn't a complete tutorial of solidity. You can take this blog post as a quickstart for the journey with solidity and web3. If you are in search of resources, checkout the resources notion page of X Days of Solidity: https://links.kiradev.co/misc/solidity-resources

🤔 What's Solidity?

Solidity is a programming language for implementing smart contracts.

Smart contracts are simply programs stored on a blockchain that run when predetermined conditions are met. An advantage of these programs is that you can verify they are what they are and do what they claim they are doing. This allows for a permission-less autonomous ecosystem between untrusted and anonymous stakeholders.

Solidity is a curly-bracket language with the influence of C++, Python, and JavaScript being visible.

Enough of theory, now let's dive into solidity 🚀

🛠 Setting up developer environment

Before working with Solidity, we would have to set up our development environment in such a way that we could local test them 🚀.

👀 Magical powers of Hardhat

We would be using a tool called Hardhat. This would create a local Ethereum network and give us fake test ETH and fake test accounts to work with. Sounds interesting right? So what are you waiting for so let’s set up Hardhat 🚀.

Create a new folder for the project

  mkdir x-days-of-solidity

Navigate into that folder

  cd x-days-of-solidity

Initializing the project

  npm init -y

If you get an error saying npm command not found then go ahead and install NodeJS from https://nodejs.org. Install the LTS version
- Installing Hardhat

   npx hardhat

You would be presented with a prompt something like this

Let's choose the first option and press enter for the rest of the options

We would have to install a few other dependencies as well

  npm install --save-dev chai ethereum-waffle @nomiclabs/hardhat-waffle ethers @nomiclabs/hardhat-ethers

chai is a testing library.

ethereum-waffle is the waffle package by which you can test your smart contracts.

@nomiclabs/hardhat-waffle allows to test smart contracts using waffle and hardhat.

ethers is a library for complete Ethereum wallet implementation.

@nomiclabs/hardhat-ethers is a hardhat plugin for ethers.

📁 Folder structure

After you have completed setting up the developer environment you would see a folder structure similar to this

contracts is the folder where all our smart contracts would be stored.
scripts is the folder where all scripts such as run.js and deploy.js would be stored.
test is the folder where all our chai tests would be stored.

👋 Hello, World!

Let's get started by creating a smart contract using solidity that prints "Hello, World!" in the terminal

First of all let's clean up the default hardhat contract, script, and test files. Let's create a new file called HelloWorld.sol inside the contracts folder.

Let's get started by adding a ✨SPDX License Identifier✨. It's just a fancy comment, which tells the license of your smart contract. In my case, I am going to be using the MIT license.

// SPDX-License-Identifier: MIT

Let's now specify the the version of solidity compiler. As we are using Hardhat, we have to check that the solidity compiler version in the hardhat.config.js file is the same as we are specifying in our smart contract

pragma solidity ^0.8.4;

As solidity doesn't natively support "console logs" we would have to use the magical powers of Hardhat again. Hardhat allows use to use "console logs" in solidity.

import "hardhat/console.sol"

Now we have the superpowers to use console log in solidity. This makes debugging much simpler.

Let's now start writing the actual smart contract 👀. In solidity, the syntax of a smart contract is similar to classes in other programming languages.

contract HelloWorld {
    constructor() {
        console.log("Hello, World");
    }
}

We use the contract keyword along with the contract name to define a contract. Defining a contract is similar to defining a class in other programming languages like JavaScript.

Any code inside the constructor is run once when the contract is been deployed.

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract HelloWorld {
    constructor() {
        console.log("Hello, World");
    }
}

TADA 🎉! We have written our first smart contract. But 🤔 How to run it locally?

⚙ Running smart contract locally

We would use creating a script (run.js) and run the smart contract using that script and Hardhat.

Create a new file called run.js under the scripts folder.

Let's first get our smart contract, compile it, and generate all the necessary files under the artifact folder.

artifact folder is similar to a build folder

const helloWorldFactory = await hre.ethers.getContractFactory('HelloWorld');

Let's now deploy our compiled smart contract to the local blockchain

const helloWorld = await waveContractFactory.deploy();

We will wait until our smart contract has been officially deployed on the local blockchain.

await waveContract.deployed();

We would only see the "Hello, World!" console log only after the smart contract has been officially deployed on the local blockchain because the code inside constructor only runs once when the smart contract has been deployed.

Let's add a console log to the run script which tells the address of the account where our smart contract has been deployed.

console.log('Contract deployed to:', helloWorld.address);

Finally, our run.js script would look something like this

const main = async () => {
  const helloWorldFactory = await hre.ethers.getContractFactory('HelloWorld');
  const helloWorld = await helloWorldFactory.deploy();
  await helloWorld.deployed();
  console.log('Contract deployed to:', helloWorld.address);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

I have added a new runMain function that would catch errors while deploying

Now let's run it using npx hardhat run scripts/run.js command

You would see the output something like this

TADA 🎉! You have created a smart contract and deployed it as well

Let's talk more about solidity now 🤔.

📦 Data types in Solidity

🔢 Integers

In solidity, there are two types of integers unsigned integers (uint) and signed integers (int). Unsigned integers are non-negative integers whereas signed integers are negative integers (PS: ** means to the "to the power of" or "exponent operator" aka ^ )

uint8 ranges from 0 to 2 ** 8 - 1
uint16 ranges from 0 to 2 ** 16 - 1
uint256 or uint ranges from 0 to 2 ** 256 - 1
int8 ranges from -2 ** 8 to 2 ** 8 - 1
int16 ranges from -2 ** 16 to 2 ** 16 - 1
int256 or int256 ranges from -2 ** 256 to 2 ** 256 - 1

📍 Address

There is a special data type, "Address". Address is a 20 byte long (size of an ethereum wallet address) data type in solidity.

🏹 Array

Syntax:

<data type> <array name>[size] = <initialization>

In solidity, you can create a fixed (with only a specific length) and dynamic (the length of the array can be anything)

// An array of fixed length of 10 unassigned integers
uint[10] myFixedArray;

// An array of the dynamic length of strings
string[] myDynamicArray;

✨ Array operations

Let's now talk a look at the array operation in solidity 👀

Accessing an element from an array: Accessing an element from an array in solidity is just like in any other programming language

    // SPDX-License-Identifier: MIT

    pragma solidity ^0.8.0;

    import "hardhat/console.sol";

    contract AccessingElement {
        string[3] data = ["hi", "hello", "yo"];

        constructor() {
            console.log(data[1]);
        }
    }

Here are creating a fixed array of name data and data type string and length of 3. We are trying to console log the second element of the array, which is hello.

Let's try to run it now using npx hardhat scripts/run.js

NOTE: You need to change the name of the smart contract which you are compiling in the scripts/run.js file.

TADA 🎉! It worked

Assigning values: Let's now assign values to an array

   // SPDX-License-Identifier: MIT

   pragma solidity ^0.8.0;

   import "hardhat/console.sol";

   contract AssigningValues {
       string[5] data = ["hi", "hello", "yo"];

       constructor() {
           data[3] = "yo yo";
           console.log(data[3]);
       }
   }

Here we are trying to assign the value of the 4th element of the array as yo yo.

Let's test it out.

TADA 🎉! It worked

Length of an array: Let's now find the length of an array.

You can use the length method to get the length of an array. Similar to how to find the length of an array in JavaScript.

    // SPDX-License-Identifier: MIT

    pragma solidity ^0.8.0;

    import "hardhat/console.sol";

    contract ArrayLength {
        string[3] data = ["hi", "hello", "yo"];

        constructor() {
            console.log(data.length);
        }
    }

Let's test it out

TADA 🎉 It worked

Push: Push is used to add elements to the end of a dynamic array.

    // SPDX-License-Identifier: MIT

    pragma solidity ^0.8.0;

    import "hardhat/console.sol";

    contract AddingElement {
        string[] data = ["hi", "hello", "yo"];

        constructor() {
            data.push("yo yo");
        }
    }

Pop: Pop is used to remove the last element from a dynamic array

    // SPDX-License-Identifier: MIT

    pragma solidity ^0.8.0;

    import "hardhat/console.sol";

    contract AddingElement {
        string[] data = ["hi", "hello", "yo"];

        constructor() {
            data.pop();
        }
    }

Phew, that was long 😓

🗜 Structs

Structs are more complex data types, where you can combine multiple data types to create your own complex data type.

struct myStruct = {
  address myAddress;
  uint myNumber;
  string myName
}

We can use structs with arrays too!

struct Person = {
  string name;
  uint age
}

Person[] personArray; // Creates a dynamic array

Person james = Person("James", 25) // Creates a new Person

personArray.push(james); // Adds that new person to the `personArray` array

🔤 Variables in Solidity

Syntax:

<data-type> <access-modifier> <variable-name>;

🌀 Types of variables

In solidity, there are 3 different types of variables:

state: State variables are declared in contract scope. Stored on the blockchain.
local: Local variables are declared inside functions. Destroyed after execution and not stored on the blockchain.
global: Global variables are some special variables that can be used globally and give information about the transactions and blockchain properties.

✨ Variable modifiers

There are 2 variable modifiers for state variables

constant, disallow assignment (except initialization), does not occupy storage slot.
immutable, allows exactly one assignment at construction time and is constant afterward. Is stored in code.

👋 The End

That's the end folks 👋. I would be releasing another part on "Solidity Quickstart" on "Functions in Solidity" and "How to deploy the smart contract to a test net", such as Rinkeby

The code for this entire "Solidity Quickstart" series would be available on my GitHub:

https://github.com/kira272921/solidity-quickstart

Checkout the notion board for "X Days of Solidity"

https://links.kiradev.co/project/x-days-of-solidity

How to build a blog using Remix and MDX

Mukesh — Mon, 07 Feb 2022 11:21:28 +0000

Hey, folks 👋. Today we are going to build a new blog
site from scratch using Remix, MDX and TailwindCSS

🤔 What's Remix? Yet another JavaScript framework

Remix is a full-stack web framework based on web fundamentals and modern UX. It is created by the team of React Router. Remix isn't any brand new framework it had been over for a year but it was a paid framework over then but now the time had been changed and Remix is now free and open-source software 🚀.

Remix is a React-based framework that allows to you render code on the server-side. Wait for a second 🤔 Doesn't NextJS do the same thing?

Remix took the old problems but approached them in a new style 🐱‍💻.

Remix only does Server Side Rendering (SSG), no Static Site Generation (SSG), and Incremental Static Regeneration (ISR) like NextJS.

Applications which use Static Site Generation (SSG) are fast, easy to deploy but it is really hard to use dynamic data, as the pages would be re-built every time the dynamic data has been changed. In Remix, we are only doing Server Side Rendering (SSG), which is great for dynamic data but it would be hard to deploy as you would need to have an actual server to run it.

Remix is suitable for applications that have multiple pages and which depend on some sort of dynamic data

🛠 Setting up the project

Let's set up our project before getting started to code.

Create a new folder for our remix blog

   mkdir remix-blog

Navigate into that folder

   cd remix-blog

Open that folder in VSCode

   code .

Initialize remix project in that folder

   npx create-remix@latest

The path of the remix application would be ./, as we have already created a folder of our project
We would be going to deploy our remix application on Vercel
We are going to be using JavaScript for this project

Starting a local development server

   npm run dev

This would start a local development server at localhost:3000

📁 Understanding the folder structure

The folder structure of a remix application is pretty simple.

api folder contains all the backend/api code.
app folder contains most of the frontend code.
- app/routes folder contains the code for each route. Remix has the file-system based router similar to nextjs
public folder contains the static files and assets that are served to the browser when our app is built or deployed.

👨‍💻 Building the project

Let's start building the blog now. Let's first clean up the app/routes/index.jsx file.

app/routes/index.jsx

export default function Index() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Welcome to my blog</h1>
    </div>
  );
}

Remix supports the use of MDX to create a route module, which means we could create a new route using just a plain MDX file.

Let's create a new directory inside the routes directory called posts and inside that directory let's create a new file called first-blog-post.mdx

app/routes/posts/first-blog-post.mdx

Hey, welcome to my first blog post 👋

To check out your first blog post, visit localhost:3000/posts/first-blog-post

TADA 🎉, we have built a basic blog within 2 minutes

🙌 Adding frontmatter

The lines in the document above between the --- are called "frontmatter"

Let's add some front matter to your first blog post page. You can think frontmatter as the metadata of that page.

You can reference your frontmatter fields through the global attributes variable in your MDX.

---
title: First Blog Post
---

Hey, welcome to {attributes.title} 👋

Let's now add metadata to our blog post's page using frontmatter.

---
title: First Blog Post
meta:
  title: First Blog Post
  description: ✨ WoW
---

Hey, welcome to {attributes.title} 👋

As you can see the title of the page has been changed

... and the description as well

Let's me quickly add a few blog posts

Umm... 🤔 Our blog isn't completed yet with any kind of syntax highlighting ✨

✨ Adding syntax highlighting

We are going to be using highlight.js for syntax highlighting, you could even use prism.

🔌 About MDX plugins

We are going to achieve syntax highlighting using something called "MDX plugins". By plugins, we could manipulate the process of MDX converting into HTML.

Generally, there are two types of plugins

Remark plugins are responsible for manipulating the process of converting MDX to markdown.
Rehype plugins are responsible for manipulating the process of converting the markdown to HTML.

For our remix blog, we are going to be using a rehype plugin called rehype-highlight. To install the package using the following command:

npm install rehype-highlight

We need to add a bit of configuration to the remix.config.js file

mdx: async (filename) => {
  const [rehypeHighlight] = await Promise.all([
    import('rehype-highlight').then((mod) => mod.default),
  ]);
  return {
    rehypePlugins: [rehypeHighlight],
  };
};

Now our remix.config.js file would look something like this:

/**
 * @type {import('@remix-run/dev/config').AppConfig}
 */
module.exports = {
  appDirectory: 'app',
  assetsBuildDirectory: 'public/build',
  publicPath: '/build/',
  serverBuildDirectory: 'api/_build',
  ignoredRouteFiles: ['.*'],
  mdx: async (filename) => {
    const [rehypeHighlight] = await Promise.all([
      import('rehype-highlight').then((mod) => mod.default),
    ]);
    return {
      rehypePlugins: [rehypeHighlight],
    };
  },
};

🧾 Creating a layout file

Now we have created a layout file, where we would import one of the highlight.js's styling. I would be using night owl style, you could choose your style from highlight.js's style demo page

To create a layout file for our blog posts, we have created a new file with the same name as the folder name (posts) and the same level of the posts folder.

Now we have to import the night owl theme into our layout file and use that as well.

import styles from 'highlight.js/styles/night-owl.css';
import { Outlet } from 'remix';

export const links = () => {
  return [
    {
      rel: 'stylesheet',
      href: styles,
    },
  ];
};

export default function Posts() {
  return <Outlet />;
}

In remix, we have the links function is similar to the links tag in HTML.

PS: If you are a VSCode user then install this remix run snippets extension 🚀.

Now let's restart our local development server.

TADA 🎉, we have this wonderful syntax highlighting for our code blocks in our blog now

🎨 Adding TailwindCSS Typography

Right now our blog has syntax highlight but the font isn't looking great 🤔 and there is nothing great than @tailwindcss/typography plugin to automatically styles our entire page's font using a single prose class.

📦 Installing dependencies

We need a few dependencies for us to use tailwindcss and tailwindcss's typography plugin.

Those dependencies are:

Concurrently: Concurrently allows you to run multiple commands in a single terminal, so we can watch and build our tailwindcss styles as well as our entire remix application in a single terminal session

Let's install all of them:

npm install -D tailwindcss concurrently @tailwindcss/typography

⚙ Configuring TailwindCSS

Create a new file named tailwind.config.js, this file would contain all the configurations for tailwindcss.

Add the following configuration to the tailwind.config.js file

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./app/**/*.{ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
};

We would have to change the scripts in package.json

  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch"
  },

Importing tailwindcss into the app/root.jsx file

app/root.jsx

import styles from './tailwind.css';

export const links = () => {
  return [{ rel: 'stylesheet', href: styles }];
};

Let's restart our server and run the npm run dev command

You would see an error saying that

app/root.jsx:9:19: error: Could not resolve "./tailwind.css

This occurred because there is no tailwind.css file but you would see that the file is been created. If in your case the file didn't create then create a new file named tailwind.css in the app directory and copy and paste the CSS from this gist, https://gist.github.com/Kira272921/4541f16d37e6ab4d278ccdcaf3c7e36b

💻 Using @tailwindcss/typography plugin

Let's open the app/routes/posts.jsx file and add few styling.

As app/routes/posts.jsx file is the layout file for all the blog posts, if few add any kind of styling then it would reflect in the blog posts pages

return (
  <div className='flex justify-center'>
    <div className='prose lg:prose-xl py-10'>
      <Outlet />
    </div>
  </div>
);

Here are using the @tailwindcss/typography plugin

TADA 🎉. Look how beautiful the blog posts are looking now

📰 Creating a list of articles

Let's create a list of articles on the main page (aka root route).

In remix, you could import the entire mdx module as well as the attributes within them.

app/index.js

import * as firstPost from './posts/build-a-cli-using-nodejs.mdx';
import * as secondPost from './posts/build-a-rest-api-using-nodejs.mdx';

The below function would return the slug (the file name, without the .mdx) with the markdown attributes

app/index.jsx

function postFromModule(mod) {
  return {
    slug: mod.filename.replace(/\.mdx?$/, ''),
    ...mod.attributes.meta,
  };
}

In remix, we use a loader function to load data on the server-side

app/index.jsx

export const loader = () => {
  return [postFromModule(firstPost), postFromModule(secondPost)];
};

Here we are loading each of our MDX modules on the server-side using the loader function

Finally, our app/index.jsx would look something like this

import { Link, useLoaderData } from 'remix';
import * as firstPost from './posts/build-a-cli-using-nodejs.mdx';
import * as secondPost from './posts/build-a-rest-api-using-nodejs.mdx';

function postFromModule(mod) {
  return {
    slug: mod.filename.replace(/\.mdx?$/, ''),
    ...mod.attributes.meta,
  };
}

export const loader = () => {
  return [postFromModule(firstPost), postFromModule(secondPost)];
};

export default function BlogIndex() {
  const posts = useLoaderData();
  return (
    <div className='prose lg:prose-xl py-10 pl-10'>
      <h2>Articles</h2>
      <div className='flex justify-center'>
        <ul>
          {posts.map((post) => (
            <li key={'posts/' + post.slug}>
              <Link to={'posts/' + post.slug}>{post.title}</Link>
              {post.description ? (
                <p className='m-0 lg:m-0'>{post.description}</p>
              ) : null}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

This is how our main page looks 🚀

🚀 Deploying to Vercel

As our application let's deploy it on vercel 🚀.

Initialize an empty git repository

   git init

Create a new GitHub repository
Push your changes to that repository

git remote add origin git@github.com:Kira272921/remix-blog.git # change URL to your repo's link
git add .
git commit -m "feat: initial commit"
git branch -M main
git push -u origin main

If you don't have an account on vercel, create one
Create a new project

Import the remix application from our GitHub account

Deploy the application

If you are getting an error something like this, add a new script to package.json
```
 "postinstall": "remix setup node"
```

The entire code for this tutorial is present on my GitHub: https://github.com/kira272921/remix-blog

Here is what we have built today 🚀: https://remix-blog-orcin.vercel.app/

🧑 About the author

So that's it for this blog post folks 🤞. Meet y'all in the next blog

How to build a REST API using NodeJS

Mukesh — Sat, 22 Jan 2022 14:08:57 +0000

👋 Hey everyone, I know it's been a long since I posted a new blog 😅. 👀 So in this blog post we are doing to build a REST API that would serve as a source of motivation for developers using NodeJS and MongoDB. So let's get started 🏄‍♂️

What's an API? 🤔

API stands for "Application Programming Interface" which is a tool that allows two applications to talk to each other 📞. Let's understand the meaning of API by some real-life examples ✨

So you have built an amazing e-store application and you wanted other developers to build applications on it. Now you have to build some sort of software that communicates between your web service and the developer's application and that's where API comes in.

What's a REST API? 🤔

Now as you have let's talk something about "REST APIs". REST stands for Representational State Transfer, it's one of the most popularly known type of API architecture. These types of APIs follow the client-server model, where one program sends a request and the other response with some data.
The requests are HTTP methods such as POST, GET, PUT, DELETE...

You would have a more clear understanding of APIs and REST APIs when we build a project 👀. So what are we waiting for, let's dive started into coding 👨‍💻.

Setting up the project 🛠

Let's set up our project so that we can start coding 👨‍💻.

Creating a separate folder for our project

   $ mkdir dev-credits-api

Navigate into the folder

   $ cd dev-credits-api

Initializing the project

   $ npm init

Installing the required packages

   $ npm install mongoose express dotenv cors

   # or

   $ yarn add mongoose express dotenv cors

Express is the framework by which we are going to our REST API
Mongoose is the tool that we are going to use to communicate with our MongoDB database

4.1. Installing nodemon as a dev dependency
```
 $ npm install nodemon -D

 # or

 $ yarn add nodemon -D
```
- Nodemon is used for automatically restarting the server on file changes detected in the directory. This would be helpful as we would not be restarting the server each time we do changes

Building the REST API 👨‍💻

As we have completed the setup for our project, let's get started building the REST API.

Create a new file named index.js

Here is the boilerplate code for a basic express app

index.js

const express = require('express');

const app = express();

const port = process.env.PORT || 3000;

app.listen(port, async () => {
  console.log(`Server is running at port ${port}`);
});

Let's breakdown it into and understand each part:

We are requiring the express package into our file so that we can use it
We are assigning some value to the variable port, the port where our server would be running. You might be thinking why is there a process.env.PORT? 🤔. It's because during deployment on services such as Heroku the port number might vary, it may not be 3000 so we are telling that if there is a PORT environment variable then use that else use 3000
The last piece of code is telling to which port the server should listen, in our case it's the PORT variable

Let's add a new script named start to the package.json file which uses nodemon to automatically restart the server on file changes detected. So after the changes our scripts in package.json would look something like this:

"scripts": {
   "start": "nodemon index.js"
}

Let's start our server by running the npm start command. The server would be running at http://localhost:3000. You prompted with an error something like this:

This is happening because we haven't defined the / (aka the root route)

HTTP methods explained

Let's take a break from coding and understand what do they do and what's the success and error status so that it would be easy for debugging 😎

GET

What it does: Request data from a specified resource

Successful response: 200 OK

Error response: 404 not found

POST

What it does: Send data to the server to create a new resource

Successful response: 201 Created

Error response: 404 not found or 409 conflict - if the resource already exists

PUT

What it does: Send data to the server to update a pre-existing resource

Successful response: 200 OK

Error response: 204 no content, 404 not found or 405 method not allowed

DELETE

What it does: Deletes a resource from the server

Successful response: 200 OK

Error response: 404 not found or 405 method not allowed

Check out http.cat for understanding what each HTTP status code means via funny cat images 😹

Adding routes 🛣

Routes are different URL paths of an express app that are associated with different HTTP methods, such as GET, POST, DELETE, PUT.

Let's get started by creating / which sends "Hello, World!"

Add the below piece of code above the line where we declared the port variable

index.js

app.get('/', function (req, res) {
  res.send('Hello, World!');
});

Let's breakdown this piece of code:

The get method specifies the HTTP method for that route. You could use other HTTP methods like post, delete...
- There is a special routing method all which is used for the routes which handle all kinds of HTTP methods
There is a callback method that is called when the server receives a request from that endpoint with that specified HTTP method

🥳 Horray! "Hello, World" is now visible in the / route

Setting up MongoDB

Let's get in the MongoDB database now 😎.

Head over MongoDB and sign up/sign in and create a new project

You could your co-worker into the project if you wanted too.

After the creation of the project, click on Build a Database

You would be shown with a screen something like this:

Let's go ahead and choose the free plan 👀

You would be shown some more options about the cloud provider and the location

Let's choose the nearest region and move forward.

You would be asked to create a user. This is required as you would need the username and password to generate a connection URL which is then used to connect MongoDB with your NodeJS app.

The creation of the cluster would take 1 - 3 minutes. So let's grab a cup of coffee until then ☕. Ahh... it's been successfully created so let's get back to coding 👨‍💻

Click on Connect

Click on Connect your application

Copy the connection URL

Create a .env file and replace <password> with the password of the user which you have replaced previously

MONGODB_URL="mongodb+srv://kira272921:<password>@dev-credits-api.t5tkf.mongodb.net/myFirstDatabase?retryWrites=true&w=majority"

Let's head back to the good old index.js file

Connecting Express app to MongoDB

Let's start by requiring mongoose and dotenv

const mongoose = require('mongoose');
const dotenv = require('dotenv');

Let's configure dotenv as well

dotenv.config();

Let's finally add the piece of code which connects our express application to MongoDB

mongoose
  .connect(process.env.MONGODB_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log('Connected to MongoDB');
  })
  .catch((err) => {
    console.log(err);
  });

The index.js file show looks something like this now

index.js

const express = require('express');
const mongoose = require('mongoose');
const dotenv = require('dotenv');

dotenv.config();

const app = express();

mongoose
  .connect(process.env.MONGODB_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log('Connected to MongoDB');
  })
  .catch((err) => {
    console.log(err);
  });

app.get('/', function (req, res) {
  res.send('Hello, World!');
});

const port = process.env.PORT || 3000;

app.listen(port, async () => {
  console.log(`Server is running at port ${port}`);
});

🥳 We successfully connected our express app to the MongoDB database.

Creating Schema and Model 📝

A Schema is the structure of the documents in our database. It tells what fields are required, what's the data type of each field.

A model provides a programming interface for interacting with the database (read, insert, update, etc).

Let's create a new folder named model and inside it let's create a model.js where we will define our schema

model/model.js

const mongoose = require('mongoose');

const devCredits = new mongoose.Schema({
  credits: {
    type: Number,
    required: true,
  },
  id: {
    type: Number,
    required: true,
  },
});

module.exports = mongoose.model('devCredits', devCredits);

Let's breakdown it down and understand

We imported the mongoose package into the model/model.js file
We created a new schema named devCredits. The structure has the credits and id. Credits are the number of dev credits the person has and the id is the discord id of the user (This API was initially created for a discord bot Dev credits bot so the schema of the database is kinda based on discord 🤷‍♂️)
We have finally created a model named "devCredits"

Adding more features 😎

Let's add more routes to our REST API. Let's add routes where we can get the total dev credits of a user via their discord ID and give dev credits to other users using another route.

Giving dev credits to other devs

Let's import our model which we have just created into the index.js file.

const devCredits = require('./model/model.js');

Let's add a new POST route in the index.js file

app.post('/post', function (req, res) {
  const credit = new devCredits({
    id: req.body.id,
    credits: req.body.credits,
  });

  devCredits.countDocuments({ id: req.body.id }, function (err, count) {
    if (count > 0) {
      devCredits.findOneAndUpdate(
        { id: req.body.id },
        {
          $inc: {
            credits: req.body.credits,
          },
        },
        { new: true },
        (err, devCredit) => {
          if (err) {
            res.send(err);
          } else res.json(devCredit);
        }
      );
    } else {
      credit.save((err, credits) => {
        if (err) {
          res.send(err);
        }
        res.json(credits);
      });
    }
  });
});

Let's understand what exactly is going on:

We have created a new POST route (/post)
We validate the data which we receive from the client using our model
In the next piece of code we are checking if the user (user id) already exists in the database or not
- If exists then we are going to increment the credits value
- Else we are going to create a new document with the user id and add the credits

How to test the API?

We have successfully created added a new feature in our API 🥳. But wait how are we going to test it out 🤔

👀 We are going to use a VSCode extension called Thunder Client, which is used for API testing. So let's quickly download it and test our new feature in our API 🥳.

After the completion of the download, you are going to see a thunder icon in your sidebar 👀

Click the thunder icon and you are going to see a section something like this

Click on New Request. You would be prompted to screen something like this

Let's test out our /post route now 🥳. Change the URL in the input box from https://www.thunderclient.com/welcome to HTTP:localhost:3000/post

Change the HTTP method from GET to POST

Navigate to the Body tab, this is the section where we are going to write the body of the request.

I have added my discord ID and gave 100 dev credits to it, cuz why not

Let's click and hope that it works 🤞

🥁🥁🥁🥁🥁 and we got an error

This happened because we didn't have any middleware so let's them quickly

index.js

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

NOTE: We had installed cors as a separated package, so don't forget to import it as well

Let's try again now so that it works now 🤞

🎉 TADA! We have successfully created our first feature in the API which interacts with the MongoDB database

Getting the total dev credits of a user

Let's import our model which we have just created into the index.js file.

const devCredits = require('./model/model.js');

Let's add a new route in the index.js file

app.get('/get/:id', function (req, res) {
  devCredits.find({ id: req.params.id }, { _id: 0, __v: 0 }, (err, data) => {
    if (err) {
      res.json(err);
    }
    res.json(data);
  });
});

Let's breakdown this down

We have created a new route with the GET method
We are finding in the database for the ID given in the parameters

Let's test it out again using Thunder Client 👀.

🎉TADA! It's works

Cleaning up the codebase

Let's clean up the codebase a bit 😅.

Let's create a new folder called routes and inside it let's create a new file router.js which contains the routes

routes/router.js

const router = require('express').Router();
const devCredits = require('../model/model.js');

router.get('/get/:id', function (req, res) {
  devCredits.find({ id: req.params.id }, { _id: 0, __v: 0 }, (err, data) => {
    if (err) {
      res.json(err);
    }
    res.json(data);
  });
});

router.post('/post', function (req, res) {
  const credit = new devCredits({
    id: req.body.id,
    credits: req.body.credits,
  });

  devCredits.countDocuments({ id: req.body.id }, function (err, count) {
    if (count > 0) {
      devCredits.findOneAndUpdate(
        { id: req.body.id },
        {
          $inc: {
            credits: req.body.credits,
          },
        },
        { new: true },
        (err, devCredit) => {
          if (err) {
            res.send(err);
          } else res.json(devCredit);
        }
      );
    } else {
      credit.save((err, credits) => {
        if (err) {
          res.send(err);
        }
        res.json(credits);
      });
    }
  });
});

module.exports = router;

We have imported the routes/router.js file into the index.js file and used it

index.js

const express = require('express');
const mongoose = require('mongoose');
const dotenv = require('dotenv');
const cors = require('cors');

dotenv.config();

const router = require('./routes/router.js');

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

mongoose
  .connect(process.env.MONGODB_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log('Connected to MongoDB');
  })
  .catch((err) => {
    console.log(err);
  });

app.get('/', function (req, res) {
  res.send('Hello, World!');
});

app.use(router);

const port = process.env.PORT || 3000;

app.listen(port, async () => {
  console.log(`Server is running at port ${port}`);
});

Let's test it out so that we are sure that our code and we didn't mess up by cleaning up the mess 😆

🥳 Horray! There isn't any error and the code still works as it was before

😅 Doesn't routes/router.js seem kinda filled up with the logic and make it kinda messy?

Let's create a new folder named controllers. In this folder, we will store the logic related to each route.

Let's get started by creating a new file in the controllers folder named getCredits.js and postCredits.js which contains the logic related to the /get route and /post route respectively

controllers/getCredits.js

const devCredits = require('../model/model.js');

const getCredits = (req, res) => {
  devCredits.find({ id: req.params.id }, { _id: 0, __v: 0 }, (err, data) => {
    if (err) {
      res.json(err);
    }
    res.json(data);
  });
};

module.exports = getCredits;

controllers/postCredits.js

const devCredits = require('../model/model.js');

const postCredits = (req, res) => {
  const credit = new devCredits({
    id: req.body.id,
    credits: req.body.credits,
  });

  devCredits.countDocuments({ id: req.body.id }, function (err, count) {
    if (count > 0) {
      devCredits.findOneAndUpdate(
        { id: req.body.id },
        {
          $inc: {
            credits: req.body.credits,
          },
        },
        { new: true },
        (err, devCredit) => {
          if (err) {
            res.send(err);
          } else res.json(devCredit);
        }
      );
    } else {
      credit.save((err, image) => {
        if (err) {
          res.send(err);
        }
        res.json(image);
      });
    }
  });
};

module.exports = postCredits;

routes/router.js

const router = require('express').Router();

const devCredits = require('../model/model.js');
const getCredits = require('../controllers/getCredits.js');
const postCredits = require('../controllers/postCredits.js');

router.get('/get/:id', getCredits);

router.post('/post', postCredits);

module.exports = router;

Phew, that was a lot of work 😹

Adding rate limit

You don't want some random guy to just spam your entire database 😆. So let's add a rate limit to our API when restricts the client to perform only a few requests every x minutes

Let's install express-rate-limit package

$ npm install express-rate-limit

# or

$ yarn add express-rate-limit

Let's create a middleware folder that contains all the middlewares of our API. Create a file named rateLimiter.js under the middleware folder

middleware/rateLimiter.js

const rateLimit = require('express-rate-limit');

const rateLimiter = rateLimit({
  windowMs: 1 * 60 * 1000, // 1 minute
  max: 10,
  message: 'Bonk 🔨',
});

module.exports = rateLimiter;

Let's understand what this piece of code is doing?

We are importing the express-rate-limit package
The windowMs specifies the duration
The max specifies the max amount of requests the client can make in the duration specified
The message is the message which is shown to the client when he exceeds the max limit

So let's import into the index.js file and test it out

index.js

const rateLimiter = require('./middleware/rateLimiter.js');

app.use(rateLimiter);

😹 I got bonked by myself

Deploying our API on Heroku

👀 We have successfully built an API but how would other developers use it if it isn't deployed?

Let's deploy it on Heroku 🚀.

Get started by initializing a git repository in the directory. Create a new GitHub repository and push your changes into that repository 👀

Let's create a new file named Procfile which is just a file that tells Heroku which command is need to be run. Add the below content to the Procfile file

web: node index.js

NOTE: nodemon doesn't work in the production stage. It only works in the development stage, so we have to use the good old node index.js

Create an account on Heroku and click on Create new app, give some cool name to your API

Head over to the settings tab and click Reveal Config Vars

These are the environment variables

Add a new config var with the key as MONGODB_URL and the value as your MongoDB connection URL

Head back to the deploy tab and connect the GitHub repository which you have created just before to your Heroku application

Click the Deploy branch button. TADA 🚀 You have successfully created a REST API and deployed it as well :D

The entire source code for this tutorial will be available on my GitHub https://github.com/Kira272921/dev-credits-api

Check out the API which we built today:

https://devcredits-api.herokuapp.com/

That's it for this blog folks 🤞. Meet y'all in the next blog post

How to build a CLI using NodeJS 💻

Mukesh — Tue, 04 Jan 2022 11:50:40 +0000

How to build a CLI using NodeJS 💻

CLI (Command Line Interface) is one of the most basic and powerful applications ever created by mankind. We all use CLI every day, whether it be npm, git, or any other CLI. Does your daily basis workflow have something that you have to do over and over again? 🤔. The chances are that it could be automated using CLI ✨

So let's get started 🏄

Today we are going to be building a CLI which would generate starter templates with TailwindCSS, ESLint, and Prettier pre-installed.

Prerequisites

Here are a few tools which you would need to follow along with the tutorial:

A LTS (Long Term Support) version of NodeJS installed.
A text editor.

Setting up the project

Let's initialize a NodeJS project

Open up your terminal
Create a folder for your project

mkdir tailwindcli

Navigate into it

cd tailwindcli

Initializing a NodeJS project

npm init

Building the CLI

Now that we have our NodeJS setup ready. Let's start building our CLI

Create a folder named bin in the root directory of your project folder.
Create a file called index.js in the bin folder. This is going to be the main file of the CLI.
Now open up the package.json file and change the value of the key main to ./bin/index.js.
Now add an entry into the package.json file called bin and add set its key to tcli and its value to ./bin/index.js

The word tcli is the keyword which we would be using to call our CLI.

After making the changes the package.json file should look something like this:

{
  "name": "tailwindcli",
  "version": "1.0.0",
  "description": "A CLI for generating starter files with TailwindCSS pre-installed",
  "main": "./bin/index.js",
  "bin": {
    "tcli": "./bin/index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["cli", "tailwindcss", "nodejs"],
  "author": "Your name",
  "license": "MIT"
}

Open bin/index.js file and add this line at the top of the file

#! /usr/bin/env node

The line starting with a #! is called a shebang line. A shebang line is used to tell the absolute path to the interpreter that will run the below code.

Let's add some JS code so that we can test the CLI out 🚀.

Adding some JS code

console.log('The CLI is working 🚀');

Installing and testing the CLI out

A CLI is meant to be called from anywhere in the system so let's install it globally by using the following command

npm install -g .

Let's test our CLI by running tcli command.

🎉 Tada, our CLI is working

Installing and working with Inquirer

Inquirer is a package that is used to make interactive CLI interfaces. Such as :

To install run the following command

npm install inquirer

Adding the boilerplate of inquirer

Here is the boilerplate for inquirer

#! /usr/bin/env node

const inquirer = require('inquirer');

inquirer
  .prompt([
    /* Pass your questions in here */
  ])
  .then((answers) => {
    // Use user feedback for... whatever!!
  });

Adding questions

We have to pass questions as objects. Let's add the first question asking about the JS framework.

#! /usr/bin/env node

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'list',
      name: 'framework',
      message: 'Choose the JS framework which you are using:',
      choices: ['React', 'NextJS', 'Angular', 'Svelte', 'VueJS'],
    },
  ])
  .then((answers) => {});

Let's break it down and understand what each part means

type : Inquirer currently has 9 different CLI user interfaces.
name : Inquirer returns the answers in the form of an object. For example:
- If we add console.log(answers);, then we would get a result something like this

So here the name is the key of the object

message : It is the question which is been displayed to the user
choices : These are the options given to user

Cleaning up the codebase [Optional]

We could create a folder inside the bin folder named utils and create a file inside the utils folder named questions.js. In the questions.js we can store the questions and import them into the index.js file

utils/questions.js

// This question would be shown at the starting
const questions = [
  {
    type: 'list',
    name: 'framework',
    message: 'Choose the JS framework which you are using:',
    choices: ['React', 'NextJS', 'Angular', 'Svelte', 'VueJS'],
  },
];

// This question would be shown only when the user choose either React or NextJS
const questionsTs = [
  {
    type: 'list',
    name: 'typescript',
    message: 'Does your project use TypeScript?',
    choices: ['Yes', 'No'],
  },
];

module.exports.questions = questions;
module.exports.questionsTs = questionsTs;

index.js

#! /usr/bin/env node

const inquirer = require('inquirer');

const { questions, questionsTs } = require('./utils/questions.js');

inquirer.prompt(questions).then((answers) => {
  // Use user feedback for... whatever!!
});

Adding logic

It's time to add some logic as we are doing creating questions.

Accessing answers to questions are similar to accessing the value of a key from an object. The value of the answer of a specific question is answers.<name-of-the-question>

As we are creating starter files, let's use ShellJS to run commands like git clone, mkdir...

Installing ShellJS

To install ShellJS run the following command

npm install shelljs

Working with ShellJS

Let's add a few if and else blocks for logic

#! /usr/bin/env node

const inquirer = require('inquirer');
const shell = require('shelljs');

const { questions, questionsTs } = require('./utils/questions.js');

inquirer.prompt(questions).then((answers) => {
  if (answers.framework === 'React') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        // If the user has choosen React and want to use TypeScript
      } else {
        // If the user has choosen React but doesn't want to use TypeScript
      }
    });
  } else if (answers.framework === 'NextJS') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        // If the user has choosen NextJS and want to use TypeScript
      } else {
        // If the user has choosen NextJS but doesn't want to use TypeScript
      }
    });
  else if (answers.framework === 'Svelte') {
    // If the user has choosen Svelte
  } else {
    // If the user has choosen VueJS
  }
});

Let's find some templates for the JS frameworks integrated with TailwindCSS

Thanks a lot to the wonderful people who have made these great templates for the community ✨

To run a git clone command, use ShellJS we have just used the exec method

shell.exec('git clone <repo-link>');

Let's fill up the if and else blocks now

#! /usr/bin/env node

const inquirer = require('inquirer');
const shell = require('shelljs');

const path = process.cwd();

const { questions, questionsTs } = require('./utils/questions.js');

inquirer.prompt(questions).then((answers) => {
  if (answers.framework === 'React') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        shell.exec(
          `git clone https://github.com/GKaszewski/react-tailwind-typescript-template ${answers.projectName}`
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        shell.exec(
          `git clone https://github.com/YashKumarVerma/react-tailwind-template ${answers.projectName}`
        );
        console.log('🛠️  Successfully build the required files');
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      }
    });
  } else if (answers.framework === 'NextJS') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        shell.exec(
          `git clone https://github.com/avneesh0612/next-starter ${answers.projectName}`
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        shell.exec(
          `git clone https://github.com/Neeraj1005/Nextjs-tailwind-template ${answers.projectName}`
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      }
    });
  } else if (answers.framework === 'Svelte') {
    shell.exec(`mkdir ${answers.projectName}`);
    shell.exec(
      `git clone https://github.com/jhanca-vm/Svelte-Tailwind ${answers.projectName}`
    );
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
    );
  } else {
    shell.exec(`mkdir ${answers.projectName}`);
    shell.exec(
      `git clone https://github.com/web2033/vite-vue3-tailwind-starter ${answers.projectName}`
    );
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
    );
  }
});

Cleaning up the codebase [Optional]

Let's create a new file in utils folder named links.js. Let's create a hashmap where we will store the GitHub repository links for the template repos.

let links = new Map([
  ['React', 'https://github.com/YashKumarVerma/react-tailwind-template'],
  [
    'React-TS',
    'https://github.com/GKaszewski/react-tailwind-typescript-template',
  ],
  ['NextJS', 'https://github.com/Neeraj1005/Nextjs-tailwind-template'],
  ['NextJS-TS', 'https://github.com/avneesh0612/next-starter'],
  ['Svelte', 'https://github.com/jhanca-vm/Svelte-Tailwind'],
  ['Vue', 'https://github.com/web2033/vite-vue3-tailwind-starter'],
]);

module.exports = links;

Let's import utils/index.js and replace the GitHub template repositories links.

#! /usr/bin/env node

const inquirer = require('inquirer');
const shell = require('shelljs');

const path = process.cwd();

const { questions, questionsTs } = require('./utils/questions.js');
const links = require('./utils/links.js');

inquirer.prompt(questions).then((answers) => {
  if (answers.framework === 'React') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log('📁 Created a folder for the project');
        shell.exec(`git clone ${links.get('React-TS')} ${answers.projectName}`);
        console.log(`🖨️  Cloned started files into ${answers.projectName}`);
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log('📁 Created a folder for the project');
        shell.exec(`git clone ${links.get('React')} ${answers.projectName}`);
        console.log(`🖨️  Cloned started files into ${answers.projectName}`);
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      }
    });
  } else if (answers.framework === 'NextJS') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log('📁 Created a folder for the project');
        shell.exec(
          `git clone ${links.get('NextJS-TS')} ${answers.projectName}`
        );
        console.log(`🖨️  Cloned started files into ${answers.projectName}`);
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log('📁 Created a folder for the project');
        shell.exec(`git clone ${links.get('NextJS')} ${answers.projectName}`);
        console.log(`🖨️  Cloned started files into ${answers.projectName}`);
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      }
    });
  } else if (answers.framework === 'Svelte') {
    shell.exec(`mkdir ${answers.projectName}`);
    console.log('📁 Created a folder for the project');
    shell.exec(`git clone ${links.get('Svelte')} ${answers.projectName}`);
    console.log(`🖨️  Cloned started files into ${answers.projectName}`);
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
    );
  } else {
    shell.exec(`mkdir ${answers.projectName}`);
    console.log('📁 Created a folder for the project');
    shell.exec(`git clone ${links.get('Vue')} ${answers.projectName}`);
    console.log(`🖨️  Cloned started files into ${answers.projectName}`);
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
    );
  }
});

Beautification using Chalk

We add colors to the text by using Chalk

To install chalk, use the following command:

npm install chalk

Let's now import chalk into our index.js file

const chalk = require('chalk');

Chalk have few pre built color methods

Chalk also offers a hex method by which you can use any color

Let's add green color to our success output

console.log(chalk.green('Hey 👀, I am a green colored text')); // This is how we can add colors by using chalk

#! /usr/bin/env node

const inquirer = require('inquirer');
const shell = require('shelljs');
const chalk = require('chalk');

const path = process.cwd();

const { questions, questionsTs } = require('./utils/questions.js');
const links = require('./utils/links.js');

inquirer.prompt(questions).then((answers) => {
  if (answers.framework === 'React') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log(chalk.green('📁 Created a folder for the project'));
        shell.exec(`git clone ${links.get('React-TS')} ${answers.projectName}`);
        console.log(
          chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          chalk.green(
            '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
          )
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log(chalk.green('📁 Created a folder for the project'));
        shell.exec(`git clone ${links.get('React')} ${answers.projectName}`);
        console.log(
          chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          chalk.green(
            '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
          )
        );
      }
    });
  } else if (answers.framework === 'NextJS') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log(chalk.green('📁 Created a folder for the project'));
        shell.exec(
          `git clone ${links.get('NextJS-TS')} ${answers.projectName}`
        );
        console.log(
          chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          chalk.green(
            '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
          )
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log(chalk.green('📁 Created a folder for the project'));
        shell.exec(`git clone ${links.get('NextJS')} ${answers.projectName}`);
        console.log(
          chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          chalk.green(
            '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
          )
        );
      }
    });
  } else if (answers.framework === 'Svelte') {
    shell.exec(`mkdir ${answers.projectName}`);
    console.log(chalk.green('📁 Created a folder for the project'));
    shell.exec(`git clone ${links.get('Svelte')} ${answers.projectName}`);
    console.log(
      chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
    );
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      chalk.green(
        '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
      )
    );
  } else {
    shell.exec(`mkdir ${answers.projectName}`);
    console.log(chalk.green('📁 Created a folder for the project'));
    shell.exec(`git clone ${links.get('Vue')} ${answers.projectName}`);
    console.log(
      chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
    );
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      chalk.green(
        '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
      )
    );
  }
});

Publishing it to npm 🚀

We have successfully completed building our CLI 🥳. Let's now deploy it to npm, so that other developers can use our CLI.

Creating a npm account

Go over to npmjs.org and create an account and make sure that you are verifying it as well

Unique package name

npm packages have unique names. npm doesn't allow publishing a package with a name that is already taken. Go over to npmjs.org and check whether your package name is taken or not.

tailwindcli is already taken by this package. So I have to change the name to tailwindcsscli

Changing name of the package

If your package is unique and is not taken, skip this step, if it isn't then follow along with this step.

Open package.json file
Change the value of the key name to a unique name, in my case I am changing it to tailwindcsscli

Adding keywords

Let's add a few keywords related to our package. As we have built a CLI during this tutorial, let's have the following as keywords :

cli
tailwindcss
nodejs

Adding license

Check out license-templates GitHub repository for license templates which you could use in your project. In my case, I am using MIT license

Adding repository link

If you have a repository on any git provider, such as GitHub, GitLab, you could link to that in a new entry named repository with the keys as type and url and the values as git and git+<your-git-repo-link>.git respectively. It would look something like this

"repository": {
  "type": "git",
  "url": "git+<your-git-repo-link>.git"
}

In my case, the repo link is https://github.com/Kira272921/tailwindcsscli. So it would look something like this

"repository": {
  "type": "git",
  "url": "git+https://github.com/Kira272921/tailwindcsscli.git"
}

Adding link to bugs reports

Let's add the link to the site/place where the users do report bugs about our package. Generally, it would be the link to the issues page in the GitHub repository

"bugs": {
  "url": "https://github.com/Kira272921/tailwindcsscli/issues"
}

Adding link to the homepage

Let's add the link to the homepage of our npm package. Generally, it would be the link to the README link of the GitHub repository

"homepage": "https://github.com/Kira272921/tailwindcsscli/issues#readme"

Login into your npm account via npm CLI

Let's now login in to our npm account via npm CLI so that we can publish our package to npm. To login into your npm account, run the following command and enter the correct credentials.

npm login

Publishing your npm package

Let's now publish our npm package by using the following command

npm publish

😱 Oh no! I got an error

Let's change the name of our package accordingly and publish using the command recommended. My package.json looks something like this now

{
  "name": "@kira272921/tailwindcsscli",
  "version": "1.0.0",
  "description": "A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed",
  "main": "./bin/index.js",
  "bin": {
    "tcli": "./bin/index.js"
  },
  "scripts": {
    "start": "node ./bin/index.js"
  },
  "keywords": ["cli", "tailwindcss", "nodejs"],
  "author": "Kira272921",
  "license": "MIT",
  "dependencies": {
    "inquirer": "^8.2.0",
    "shelljs": "^0.8.4"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Kira272921/tailwindcsscli.git"
  },
  "bugs": {
    "url": "https://github.com/Kira272921/tailwindcsscli/issues"
  },
  "homepage": "https://github.com/Kira272921/tailwindcsscli/issues#readme"
}

Let's try publishing it now again by using the following command

npm publish --access=public

Fingers crossed 🤞. Yay! We have successfully published our CLI to npm 🥳

The end

The code for this tutorial is available on Github
https://github.com/Kira272921/tailwindcsscli

That's for this blog folks. Hope that you have learned something new from this blog post. Meet y'all in the next blog post 👋.