DEV Community: Origho Precious

How to add live cursors to your product with Next.js and Liveblocks using the public key API.

Origho Precious — Wed, 10 Nov 2021 09:08:03 +0000

Almost everyone loves real-time collaborating tools especially developers. Take the Figma real-time indication of viewers' cursor for example. When on a Figma design board, you can see exactly where other viewers are. It’s awesome, right? I bet we all love it. This real-time feature/experience is exactly what Liveblocks provides. With Liveblocks, we don’t have to use WebSockets directly or use the popular socket.io. We can add real-time experience to our product using some of the Liveblocks integrations. Click here to read a more detailed overview of Liveblocks.

In this article, we will learn how to add a live cursor to a Next.js app using Liveblocks public key API. To do this, we will clone a Next.js app (Windbnb - a mini Airbnb clone), integrate it with Liveblocks, and add a live cursor to it.

Get started by cloning the Next.js app from Github. Open your terminal and run the command below.

git clone https://github.com/Origho-precious/windbnb-next.git

You should have git installed on your computer for the above command to work. If you don’t have git installed already, you can do that from here. After downloading and installing git, run the above command to clone the project.

After cloning the repo, navigate into the project’s folder and run the command below to install the project’s dependencies.

yarn install

npm install

Open the project in your favorite code editor. The folder structure should look like this.

📦public
 ┣ 📜favicon.ico
 ┗ 📜vercel.svg
📦src
 ┣ 📂components
 ┃ ┣ 📂Cursor
 ┃ ┃ ┗ 📜Cursor.jsx
 ┃ ┗ 📂Nav
 ┃ ┃ ┣ 📜Nav.jsx
 ┃ ┃ ┗ 📜nav.module.css
 ┣ 📂pages
 ┃ ┣ 📜_app.js
 ┃ ┗ 📜index.js
 ┣ 📂styles
 ┃ ┣ 📜Home.module.css
 ┃ ┗ 📜globals.css
 ┗ 📜data.js

Let’s quickly go over the components and some of the files we have there. In the src folder, we have three folders;

components: this folder contains two components
- Nav, the Nav component handles searching in the app, and
- Cursor, we will use this to indicate the presence of other users in the app with the help of Liveblocks.
pages: since this is a Next.js app, the page handles the route, and there we have a file named index.js. This page renders some Airbnb locations in Finland. And also the Nav for searching.
styles: this houses the app’s CSS files.

Integrating Liveblocks with Next.js.

In this section, we will integrate our windbnb app with Liveblocks and add live cursors. To achieve this, we need to signup on liveblocks.io to get a public key with which we can successfully integrate our app with Liveblocks.

Let’s head over to the Liveblocks website by clicking here. On the navbar, you’ll see a “Sign up” link, click on it to signup. After signing up, you will be logged in automatically and routed to your dashboard. Your dashboard should look like this.

Check your email for a verification mail from Liveblocks to activate your account. In your dashboard,
click on “API Keys” on the sidebar and copy your public key. For security reasons, you might want to create a .env file and save the public key there so it’s not accessible to everyone.

For the integration, we will need two packages provided by Liveblocks;

@liveblocks/client: This package lets you create a client to connect to Liveblocks servers.
@liveblocks/react: This package provides hooks to make it easier to use the Liveblocks client in a React app.

We will get a better understanding when we use them in the next section. In your terminal, run the command below to install them.

yarn add @liveblocks/client @liveblocks/react

npm install @liveblocks/client @liveblocks/react

N.B: This article assumes you have a basic understanding of React and Nextjs, so it focuses on explaining Liveblocks integration and not React and Nextjs specific syntax.

In your code editor, navigate to src/pages/_app.js. We will add Liveblocks integration in there by updating the content of the file with the code below.

import { createClient } from "@liveblocks/client";
import { LiveblocksProvider } from "@liveblocks/react";
import "../styles/globals.css";

const client = createClient({
  publicApiKey: {YOUR PUBLIC KEY}, 
});

function MyApp({ Component, pageProps }) {
  return (
    <LiveblocksProvider client={client}>
      <Component {...pageProps} />
    </LiveblocksProvider>
  );
}
export default MyApp;

We’ve successfully configured our app to use Liveblocks. We imported;

createClient; This function creates a client using a public key. With this client we can communicate with Liveblocks servers.
LiveblocksProvider. This is a context provider for the state of the client we created with createClient as in React Context API.

We then passed the client we created with our public key to LiveblocksProvider and wrapped the entire app with it, thereby making data from the server available to be consumed by any component in the app.

Next, we will create a Room that any user viewing the page will be connected to. To achieve this, we need to create a Component to show the presence of users on the page including our presence. Navigate to src/components in here, create a folder called Presence and a file inside it called Presence.jsx. Add the code below to the file.

import { useMyPresence, useOthers } from "@liveblocks/react";
    import Cursor from "../Cursor/Cursor";
    const COLORS = [
      "#E57373",
      "#9575CD",
      "#4FC3F7",
      "#81C784",
      "#FFF176",
      "#FF8A65",
      "#F06292",
      "#7986CB",
    ];

    const Presence = () => {
      const [{ cursor }, updateMyPresence] = useMyPresence();
      const others = useOthers();

      return (
        <div
          style={{
            position: "fixed",
            height: "100vh",
            left: 0,
            top: 0,
            width: "100vw",
            zIndex: 5,
          }}
          onPointerMove={(event) =>
            updateMyPresence({
              cursor: {
                x: Math.round(event.clientX),
                y: Math.round(event.clientY),
              },
            })
          }
          onPointerLeave={() =>
            updateMyPresence({
              cursor: null,
            })
          }
        >
          <div
            style={{
              textAlign: "left",
              color: "#81C784",
              transform: `translateX(${cursor?.x || 0}px) translateY(${
                cursor?.y || 0
              }px)`,
            }}
          >
            {cursor ? `ME` : ""}
          </div>
          {others.map(({ connectionId, presence }) => {
            if (presence == null || presence.cursor == null) {
              return null;
            }
            return (
              <Cursor
                key={`cursor-${connectionId}`}
                color={COLORS[connectionId % COLORS.length]}
                x={presence.cursor.x}
                y={presence.cursor.y}
              />
            );
          })}
        </div>
      );
    };

    export default Presence;

Above, We imported useMyPresence, and useOthers from @liveblocks/react.

useMyPresence is a hook. It contains the current position of the current user (that is, you viewing the page) and a function to update it.
useOthers is also a hook. It returns every other user connected to the room. but unlike useMyPresence, it doesn’t have a setter function.

I know the concept of a room might sound strange. When using Liveblocks, you have to create a room and each room should have a unique Id. This is done using a component provided by Liveblocks; RoomProvider. Only components wrapped by the RoomProvider will be able to access the data from other users in the room.

After that, we created an array of HEX colors, we will dynamically assign these colors to the cursor of other users on that page. Using the data from useMyPresence and useOthers, we rendered some jsx to show the position of the current user and of others on the page.

Now let’s create a room and wrap the page with it by navigating to src/pages/index.js and updating the code there to be the one below.

import { useEffect, useState } from "react";
import Head from "next/head";
import { RoomProvider } from "@liveblocks/react";
import styles from "../styles/Home.module.css";
import SearchNav from "../components/Nav/Nav";
import data from "../data";
import Presence from "../components/Presence/Presence";

const Home = () => {
  const [search, setSearch] = useState("");
  const [results, setResults] = useState(data);
  const [stays, setStays] = useState(data.length);
  useEffect(() => {
    const processSearchResult = () => {
      if (search) {
        const filteredResult = data.filter((item) => {
          return (
            `${item.city}, ${item.country}` === search.location &&
            item.maxGuests > search.guests
          );
        });
        setResults(filteredResult);
        setStays(filteredResult.length);
      }
    };
    processSearchResult();
  }, [search]);

  const renderHouses = () => {
    return results.map((item) => {
      return (
        <div className={styles.gridItem} key={item.title}>
          <img src={item.photo} alt={item.title} />
          <div className={styles.texts}>
            {item.superHost ? (
              <span className={styles.superHost}>SUPERHOST</span>
            ) : null}
            <span>
              {item.type} &nbsp; {item.beds ? `${item.beds} beds` : null}
            </span>
            <span>
              <i className="fas fa-star"></i> {item.rating}
            </span>
          </div>
          <p>{item.title}</p>
        </div>
      );
    });
  };

  return (
    <div className="App">
      <Head>
        <meta name="theme-color" content="#EF7B7B" />
        <meta
          name="description"
          content="Windbnb: Airbnb clone for stays in Finland"
        />
        <link rel="icon" href="/favicon.ico" />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
          integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
          crossOrigin="anonymous"
          referrerpolicy="no-referrer"
        />
        <title>Windbnb - Airbnb Clone</title>
      </Head>
      <RoomProvider
        id="windbnb"
        defaultPresence={() => ({
          cursor: null,
        })}
      >
        <Presence />
        <SearchNav getSearch={setSearch} />
        <main className={styles.Home}>
          <header>
            <h2>Stays in Finland</h2>
            <p>{stays ? `${stays} stay(s)` : "12+ stays"}</p>
          </header>
          <div className={styles.grid}>{renderHouses()}</div>
        </main>
      </RoomProvider>
    </div>
  );
};

export default Home;

We have now completely added live cursor to our Next.js app using Liveblocks. You can go ahead and test the app by starting the dev server with the command below.

yarn dev

npm run dev

Go to your browser and visit http://localhost:3000. If you followed along very well, you should see a page like the one below.

If you see any errors in your console or browser, please re-read the article from the beginning and compare your code with the final version (link in the next section).

Resources for more learning.

Saving Netlify App Secrets using Doppler

Origho Precious — Fri, 01 Oct 2021 19:23:25 +0000

Summary

When deploying applications on netlify, we usually add our app’s environment variables manually. And whenever there’s a need to update it, we have to go back there to netlify to do it. With Doppler, an organization/team or individuals can manage their application’s environment variables easily. In this article, we will be learning how to integrate Doppler with Netlify.

Goal

In this article, we will clone a mini e-commerce project built with Reactjs that uses firebase for authentication from Github, save the app’s environment variables in a doppler workspace and sync it with netlify. To achieve this, we will set up a doppler account, create a workspace, add a project to the workspace and sync it with netlify. At the end of this article, readers will know how to integrate Doppler with netlify.

Prerequisites

You should have a netlify account. If you don’t already, you can create one here.

What is Doppler and why should I use it?

Following the first two sections of this article, you might be wondering, “what exactly is doppler?”. In this section, we will briefly go over what doppler is and why you should use it.

Doppler is a universal secret manager. It helps Software Engineers store/manage credentials used in their applications just like the traditional .env files. With doppler, we can share secret credentials/variables across many platforms, in several programming languages. See all the possible doppler integrations here.

With Doppler, we can manage all the secret credentials/variables used in an application across different platforms in one place (a single source of truth), for example, if your company has a MERN stack app with the frontend deployed on netlify, and maybe a test version of the frontend on vercel and the backend on AWS, you can easily manage all the credentials used in all these platforms with doppler. It's that easy and fast.

Syncing Doppler with Netlify

In this section, we will learn how to sync credentials saved in doppler with an app deployed on netlify. To get started, Let’s clone the project we will be deploying on netlify from Github using the code below. To do this, you need to have git installed in your machine.

git clone https://github.com/Origho-precious/ecommerce-project.git

Next, create a repository and add the project to it. You need to do this to deploy the project on netlify via Github. After doing that, log in to your netlify account and deploy the application there.

The next thing to do is to set up a doppler workspace, create a project for the e-commerce app, and add the env variables we need in the app. let’s do that below.

Creating a Doppler Workspace.

When creating a doppler account, you will be prompted to create a workspace. You can add your team members to it and manage the access level each person should have in that workspace.

Let’s create a doppler workspace. Let’s get started by visiting the doppler official website and creating an account. After that, we will get to a screen where we need to create a workspace as seen below.

After filling and submitting the form. the workspace will be created, and we will be routed to a screen like this.

That is what your workspace should be like if you create a new workspace. If you notice, there’s a test project added there already, but we won’t be using that. Let’s add a new project for the e-commerce app by clicking on the plus icon there.

As seen above, I named my project firebase-commerce and added a description. Next, we need to add the environment variables needed in the project. Clicking on the project we just created will take us to a screen like the one below

There you’ll see different environments prepopulated for us, development, staging, and production. We can add different variables needed in each environment. And if they all use the same variables, we can easily add them to one and sync them across all environments. Note that we can also add custom environments by clicking on the hamburger icon at the top right of the page.

Let’s add variables to the development environment, and also sync them to the two others. To do this, we need to click on the rectangle with dev in it. It will open a page like the one below.

We can add variables singly by clicking on the ‘Add first Secret' or by clicking on the other button and where we import all our variables from ENV, JSON, or YAML format. We will use the second option to make things faster. Click on the button. You should see a screen like the one below

Copy and paste the below code into the textarea provided and click on ‘Import Secrets` below.

REACT_APP_APIKEY = AIzaSyBzklmuZsb_5Ait1FatkT-Mg3Vor1hFJ8A
REACT_APP_AUTH_DOMAIN = ecomerce-project-40990.firebaseapp.com
REACT_APP_DATABASE_URL = https://ecomerce-project-40990.firebaseio.com
REACT_APP_PROJECT_ID = ecomerce-project-40990
REACT_APP_STORAGE_BUCKET = ecomerce-project-40990.appspot.com
REACT_APP_SENDER_ID = 361284578530
REACT_APP_APP_ID = 1=361284578530:web:58896ab84048601b9682bb

Importing it will take us back to this screen with all the variables set up.

There’s a ‘Save’ button at the top right of the page, click on it to save the variables.

I’m selecting the two other environments do they will have the environment variables also.

We have now set up a doppler account, a workspace, and a project. We also variables to environments in the project. Next, let’s add a netlify integration to this project. to do this click on ‘Integrations’.

Now, let’s add a netlify integration by clicking on the ‘Add Integration’ button. then select netlify

We will be routed to a page where we need to authorize netlify to use doppler

Next, we select the website needed from the list of sites we have deployed to netlify. At this point, If you are yet to deploy the e-commerce project to netlify, you need to do it now to continue.

As seen above, we will also select the config we want to use from the environments we have in the project e.g development, staging and production. I will go with development (dev). The last input is for selecting which variables should be used in cases where we have variables from doppler and netlify. I set my preference to doppler. When you’re done, click on the button below.

We have now integrated the project we deployed on netlify with our secrets from doppler.

To verify that the variables on the doppler workspace are correctly integrated with the netlify app, go to the project on netlify and check the environment variables. You can see mine below.

You can go ahead and test the app if you want using the netlify site link.

Conclusion

We have now learned how to save secrets in doppler and integrate them with Netlify. While learning to do this, we learned how to create a doppler workspace and how to add environment variables/secrets. We did this and were also able to confirm they were added correctly to the project on netlify. Now you see how easy and fast is it to manage netlify app secrets with doppler, you will see more of the advantages when you want to update any of the variables. We can do that in the doppler workspace and save it, any platform integrated with that workspace will be updated accordingly.

Resources for More Learning

Intro to Doppler
Doppler Integration with Netlify Documentation

Object-Oriented Programming in Javascript(ES5 & ES6) EXPLAINED.

Origho Precious — Tue, 28 Apr 2020 12:59:43 +0000

INTRODUCTION

OOP - Object-oriented Programming, in general, is very useful. It helps developers to model real-world things that we want to represent inside our code, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of.
Getting a full understanding of how OOP works in javascript is a bit difficult especially in ES5 syntax, ES6 class made it a lot easier to use object constructor but as developers, we will run into ES5 object prototype codes along our journey and in case you do not know, ES6 class, work as object prototypes under the hood.

This article will explain javascript object in ES5 and ES6 syntax. Stay tuned!

WHY USE OBJECT CONSTRUCTOR NOTATION?

You must have questioned the need for using object constructor and not stick with object literals. Well, object literals are easy and straight forward to understand but let's think of a scenario whereby we want to create an object from data gotten from an input field, for example; we have a website and in our website a form field that requests for the name, email, phone number, and address of our users. We want to use the data gotten from the form field to create an object as a way to keep user data together and then create a profile for each user and make sure each user should have the same properties(in this case name, email, number, and address). Using object literal notation requires us to create an object every time for each user, for instance from our form we got these data from three (3) users:

// 1st user
const user1 = {                               
  name: 'Precious',
  email: 'precious@gmail.com',      
  number: '+234-810-5025-740',
  address: 'Earth'
}

// 2nd User
const user2 = {                               
  name: 'Frank',
  email: 'frank@gmail.com',      
  number: '+234-800-5525-540',
  address: 'Jupiter'
}

// 3rd User
const user3 = {                               
  name: 'Charles',
  email: 'charles@yahoo.com',      
  number: '+234-810-4985-376',
  address: 'Mars'
}

The code is repetitive and that is against the DRY(Don't Repeat Yourself) principle of programming and we don't want that. The perfect solution to that is using object constructor notation, and then making instances of the object. Now let's write the above code using object constructor notation and how to make instances of an object:-

// Object Constructor(ES5)
function User(name, email, number, address){
  this.name = name;
  this.email = email;
  this.number= number;
  this.address = address;
}

// Instances
// 1st user
const user1 = new User('Precious', 'precious@gmail.com', '+234-810-5025-740', 'Earth');

// 2nd user
const user2 = new User('Frank', 'frank@gmail.com', '+234-800-5525-540', 'Jupiter');

// 3rd User
const user3 = new User('Charles', 'charles@yahoo.com', '+234-810-4985-376', 'Mars');

From the above code, we just created, we used a constructor function which as the name implies is a function that constructs object instances to create objects from the data each user submitted in the form. It is DRY and clean with the constructor notation, and values from the object can be accessed with the same syntax

// OBJECT LITERAL NOTATION
// To get the name of the first user.
   console.log(user1.name) // Precious

// OBJECT CONSTRUCTOR NOTATION(ES5)
// To get the name of the first user.
   console.log(user1.name) // Precious

Let us explain some keywords that are used in the constructor notation.

The this keyword: In case you do not know before now, The this keyword in the constructor function above refers to the object itself i.e the user, meaning by saying this.name = name we mean the name property of that user should be set to the value of the parameter name. the this actually means different things in different context but inside the object constructor it is as stated above
The new keyword is simply used to instantiate(create) a new object from the constructor.

OBJECT CONSTRUCTOR IN ES5 AND ES6

ES5 Syntax
1. Prototype and prototypal Inheritance: We have looked at how object constructor is written in ES5 syntax now let's look at what an object prototype is. Syntax:

function Dog(name, age){
 // Properties
  this.name = name;
  this.age = age;

 // Method
  this.canBark = function(){
    if(this.age => '180 days'){
       return 'YES';
    } else{
      return 'NO';
    }
  }
}

The method in the constructor function can better be written in javascript by writing it as a prototype like this:

function Dog(name, age){
 // Properties
  this.name = name;
  this.age = age;
}

// Object Prototype
  Dog.prototype.canBark = function(){
    if(this.age => '180 days'){
       return 'YES';
    } else{
      return 'NO';
    }
  }

Now, What is an Object Prototype? An object prototype is an object that is associated with every instance of an object by default in JavaScript. Prototypes allow you to easily define methods to all instances of a particular object. This is very useful in that the method is applied to the prototype, so it is only stored in the memory once, but every instance of the object has access to it.
We can also add a property to the object using a prototype which is not possible normally after declaring a constructor function, but it should only be used for properties we want all instances to share:

Dog.prototype.breed = 'German shepherd'

What if we have another object that we want to have all the properties and methods of the first object and their own special properties and/or methods, what do we do keeping DRY in mind?
The answer to that is provided by prototypes inheritance which simply means one object inheriting properties and methods of another. for instance, we want another group of dog to inherit some properties of the first group plus their own special properties(dog weight):

// Group 1
function Group1(dogName, dogAge){
 // Properties
  this.dogName = dogName;
  this.dogAge = dogAge;
}

// Object Prototype
  Group1.prototype.canBark = function(){
    if(this.dogAge => '180 days'){
       return 'YES';
    } else{
      return 'NO';
    }
  }

// Group 2
function Group2(dogName, dogAge, dogWeight){
  Group1.call(this, dogName, dogAge);
  this.dogWeight = dogWeight;
}

To Inherit the properties from the first group we used the call() method which is used to call the contractor we want to inherit its properties, and it takes in this as the first parameter and then the parameters to be inherited from that constructor(in this case:- dogName and dogAge). After which we then set the special property of the object(in this case: dogWeight);
This only inherits the properties and not the prototypes. To inherit the prototypes, we will say:

Group2.prototype = object.create(Group1.prototype);

With this, we have made the 2nd group of dogs possess all the properties and objects of the 1st group.

ES6 Syntax
Classes in ES6 is same as Object constructor function in ES5 under the hood that means both work in the same way just that ES6 has a much better syntax which one of my favorite tutor(Brad Traversy) calls "syntactic sugar" and also methods are directly made prototypes(made accessible to all instances of the Class). Now let's dive in ES6 classes.

Declaring an ES6 class & Constructor:

class Person{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;    // PROPERTIES
    this.age = age;
  }

   getAge(){
     return `${this.firstName} ${this.lastName};   // METHOD
   }   
}

KEYWORDS EXPLANATION:
A. class - is simply used to declare a class(ES6 object) it is followed by the name of the object.
B. constructor - Just as we used function in ES5 syntax. constructor is used construct the object.

NOTE: Value of objects in ES^ can be accessed in same way asin ES5 and also instantiation has the same syntax.

As simple as that looks we have just written our first object using ES6 class.

Inheritance: Inheritance in ES6 class has a different syntax and in involves using 2 new keyword extends and Super, let's take a look at it. if we want a customer object to inherit from the person object:

class Person{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;    
    this.age = age;
  }

   getAge(){
     return `${this.firstName} ${this.lastName};   
   }   
}

class Customer extends Person{
  constructor(firstName, lastName, age, memberShip){
    Super(firstName, lastName, age)   
    this.memberShip = memberShip;
  } 
}

KEYWORDS EXPLANATION:
A. extends : specifies that the Customer object inherit the properties and methods the Person object.
B. super : Just asin call() in ES5 objects, super states the properties inherited but here we don't have to use the this keyword.

NOTE: In ES6, we do not have to write a special line of code to inherit prototypes. as we already know, prototypes are accessible by all instances of the class object and so inherited by the extending class.

Lastly, let's talk about a special method available in ES6( static Methods): Static methods come in handy when we have methods that do not make use of argument passed into instantiate(create an instance) a copy of an object and we want all instances of the object to have it. for example, if we want all instances of the Person object to have a tag of 'human' we will write:

class Person{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;    
    this.age = age;
  }

   getAge(){
     return `${this.firstName} ${this.lastName};   
   }   

   static isHuman(){
     return 'Is a Human'
   }
}

Just as simple as that. But mind you, Static methods are defined on the class itself, and not on the prototype.

That means you cannot call a static method with the instance but with the class itself e.g calling the static method in our class above will be

Person.isHuman();

CONCLUSION:

I know this article was long, but I believe you have understanding of Object in ES5 and ES6 syntax; what object prototype mean, how to inherit from objects in ES5 and ES6, as well as ES6 class features and syntax.

Thank for reading, cheers!!!.

How to Customize Bootstrap Theme using Sass.

Origho Precious — Wed, 22 Apr 2020 13:26:31 +0000

Hello there, my name is Precious. I'm a frontend developer from Nigeria and this is my first article.

Bootstrap is a very awesome front-end library used to build responsive, mobile-first projects on the web. It is the world’s most popular front-end component library. A lot of us developers have made use of bootstrap either slightly or heavily in our projects especially for prototyping or when building demo projects, It is very useful and easy to implement but sometimes we wish we could edit some of bootstrap pre-built theme classes to our preference. For example, the primary color in our project is not the default primary-color(blue) in bootstrap and we wish we could just change it to our own project color to make our work easier, This can actually be achieved using the CSS pre-processor called sass.

To follow up with this article you need to have a basic understanding of

How SASS works,
What variables are,
What are partials and
How to compile SASS.

Note: this is not a hack.
It is supported by the Bootstrap Team and included in their documentation under theming, you can check on it using this link

How it works

In a summary, we will override their default styles set up in their SASS code and recompile it into our own CSS code which we will use in our project.

Steps:

You need bootstrap in your local project file which we can get either by installing it with a package manager or by downloading the source files not the compiled CSS files from the official bootstrap but here we will be working with Bootstrap installed using a package manager(npm).

How to install Bootstrap using NPM

You need node installed, so download node from here if you don't have it installed yet.
After installation, open the terminal in your text editor. In VScode use ctrl + ~ (a shortcut). Then Initialize npm in your project using npm init follow the prompt by just clicking enter till the end. Install bootstrap with npm install bootstrap and you're done!

After installing Bootstrap, create an scss folder in your project directory and inside it a file for your custom SASS codes. The files should be structured like this:

NOTE: The SCSS folder in the above image is the one created by you.
Your project folder has to be structured that way to work so make sure you have your files set in the format.

If you check the node_modules folder in your text editor and then open the scss folder, you will see the sass code files used for each component of bootstrap. You might be tempted to edit but don't it won't work simply because it won't be compiled into CSS. Instead, we will override them in our custom sass file.

By now, your custom Sass codes should be linked to compile into CSS. Which you should know how to do by now if you understand Sass.

They are two things you can do here, (a) Import all the bootstrap files in one as a partial in our custom sass file e.g

@import "../node_modules/bootstrap/scss/bootstrap";

(b) Import the sass files of the bootstrap components you used in your project into your custom sass file but in this method, they are 3 files we must import, these are the function, variables, and mixin files. For example, if you used bootstrap grid in your project. you will import the sass grid partial and the required 3 mentioned above like this:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Used
@import "../node_modules/bootstrap/scss/grid";

To know which file to import you can check your project and the bootstrap scss folder in node_module folder to see how the files are named.

The first method is preferred so that you can effectively import all of bootstrap styles once but for performance it's makes loading slow but if you import the files you used in your project, it loads the webpage faster. So if you are sticking with the second method be careful to import all the files you used.

Customizing The styles: NOTE: All your sass codes to override the bootstrap default codes should be above the partials you imported i.e

// Your code
$body-bg: #000;
$body-color: #111;

// Bootstrap file partials
@import "../node_modules/bootstrap/scss/bootstrap";

We can override colors like this e.g

//Bootstrap default code
$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

// Our Custom sass code
$theme-colors: (
  "primary": green,
  "danger": coral
);

What we did above is using the same theme-color map that was used in their code(variables.scss) and we changed the values of the variable. This is to say w can customize everything in the variables folder by simply looking at how they are structured and use the same pattern in our sass file but change the values to our preference. We can also set our own color themes like this:

// You can put your desired name in place of 'the custom-color' and your desired color as the value
$theme-colors: (
  "custom-color": #red
);

For example, we can customize the default container max-widths by doing this:

// How bootstrap structured theirs in their variable.scss file
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

// Ours in our scss file
$container-max-widths: (
  sm: 500px,
  md: 768px,
  lg: 920px,
  xl: 1140px
);

In your sass file it should look like this:

Conclusion:

Following the examples stated in the article, you can customize bootstrap theme to your preference.

This is my very first article. If you find it interesting and educative please leave a like to cheer me up. Thanks!