Forem: Aditya Nagla

It's Easy to Build: Custom docs project | Part 3 - ERB templating

Aditya Nagla — Mon, 08 Jun 2020 10:51:23 +0000

Hello there, welcome to part 3 of my series to build a custom docs project. Since I'm a kind of DRY person, you should see part 1 of this series to see the introduction and problem statement of this project.

In this tutorial, we'll learn about what ERB templating is and how we can inject the processed markdown code and inject it into the HTML file.

From our part 1 of series, we saw that our index.html didn't have a valid HTML structure like <head>, <body> tags were not present. Also, we can't deploy this file to production as there are no Meta tags or SEO tags. We'll solve this issue in this tutorial.

Getting Started

Image from Pixabay

What is ERB?

ERB stands for eRuby or Embedded RuBy and has a .erb file extension.

It is a templating system that embeds Ruby into a text document. It is often used to embed Ruby code in an HTML document. -- Wikipedia

In other words, we can write ruby code in our files(text, HTML, among others), and this way, we can bring programming features(like variables, loops, etc.) in our regular files.

All the ruby code in ERB files are in this format: <%= "Hello" %>, i.e. between the <%= %>. The = sign shows that you want to evaluate code + SHOW this as output. If you use <% "Hello" %>, this will evaluate the code but doesn't show anything as output. We use <% %> for looping or flow control. See below for an example.

Why is this useful?

You can add ruby code dynamically to the files. I can explain it better in a form of an example. Say you want to write <p> tag with I'm just a P tag 5 times. In normal HTML you would do something like this:

<!-- index.html -->
<div class="container">
  <p>I'm just a P tag</p>
  <p>I'm just a P tag</p>
  <p>I'm just a P tag</p>
  <p>I'm just a P tag</p>
  <p>I'm just a P tag</p>
</div>

But with ERB, you can use the DRY principle for the above.

<!-- index.html.erb -->
<div class="container">
  <% 5.times do %>
    <%= "<p>I'm just a P tag</p>" %>
  <% end %>
</div>

The above code will do the same, but it respects the DRY principle. Also, see the difference between <% %> and <%= %>.

Revision

In part 1 of the series, we only did 1 task: Convert our markdown to HTML, then inject this HTML to index.html. It looked something like this:

Left is HTML preview, right is HTML code that got generated

So like I said, we can't deploy this to production. So let's make it fancier.

Codebase

Let's start writing the code:

Create a new file named template.html.erb:

$ touch template.html.erb

The template.html.erb file will be like our template, we'll add all our static content here + variables for dynamic content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Docs Project</title>

  <!-- Other Meta tags -->

</head>
<body>
  <div class="container">
    <%= body_content %>
  </div>
</body>
</html>

In the above code, everything is like regular HTML, but we also injected a <%= body_content %> ERB code. This is where we'll insert all our HTML code generated from our markdown.

From part 1, we have this in our config.rb file:

require 'redcarpet'

hello_md_text_file = File.open('./hello.md', 'r')
index_html_file = File.open('./index.html', 'w+')

md_renderer_options = {}
md_extensions = {}

md_renderer = Redcarpet::Render::HTML.new(md_renderer_options)
markdown = Redcarpet::Markdown.new(md_renderer, md_extensions)

md_text = hello_md_text_file.read

md_to_html_text = markdown.render(md_text)

index_html_file.puts md_to_html_text

hello_md_text_file.close
index_html_file.close

In short, what above code does it, It reads the Markdown file, converts that markdown to HTML, then injects this HTML in index.html file.

Now, let's modify our config.rb file, see the comments:

require 'redcarpet'

hello_md_text_file = File.open('./hello.md', 'r')
index_html_file = File.open('./index.html', 'w+')

## Import the template file
## We only give it READ permission
template_file = File.open('./template.html.erb', 'r')

md_renderer = Redcarpet::Render::HTML.new(md_renderer_options)
markdown = Redcarpet::Markdown.new(md_renderer, md_extensions)

md_text = hello_md_text_file.read

md_to_html_text = markdown.render(md_text)

## Now let's read the contents of template file
template_content = template_file.read

## This variable will be injected
body_content = md_to_html_text

## Create a new instance of ERB with the template_content
erb_renderer = ERB.new(template_content)

## Now, parse the ERB template, and replace
## body_content with the HTML generated code
final_html_output = erb_renderer.result()

## Finally, inject all the HTML code in `index.html` file
index_html_file.puts final_html_output

## Close all files
hello_md_text_file.close
index_html_file.close
template_file.close

The above code is simple; everything is explained in the code comments above, and to summarize:
First, we import and read our template file and save it in our variable template_content
We then Initialize a new instance of ERB with the template_content
Then we parse this ERB instance. This part will replace all our variables in template.html.erb with appropriate content.
We save all the above parsing in final_html_output variable.
Then finally, we inject final_html_output content into our index.html file.

Running the script:

Run the script by using this command:
```
$ ruby config.rb
```
Now, in the index.html file, you'll see all your template + markdown to HTML converted code.

You can now upload this generated index.html file to production. This will have valid HTML structure, Meta tags and SEO tags that you mention in template.html.erb file.

Summary and conclusion

Let's take a quick look at what we learned today:

First of all, I introduced myself, so don't forget to connect with me on Twitter or elsewhere.
Since I'm a DRY person, I referred to my part 1 article where you can see the introduction and problem statement.
Then we got the introduction to ERB and how it's templating works with a cute example.
We then created our template file with a variable that makes it dynamic.
We then wrote our ruby code logic to solve our problem, i.e., replace the variable dynamically to inject our converted HTML code. Then place this HTML to our index.html file.
Finally, we took a quick look at this very summary...

That's it and let there be the end. 🙏

It's Easy to Build: Custom docs project | Part 2 - HTML to MD

Aditya Nagla — Wed, 22 Apr 2020 05:17:01 +0000

Hello there, welcome to part 2 of my series to build a custom docs project. Since I'm a kind of DRY person, you should see part 1 of this series here to see the introduction and problem statement of this project.

In this tutorial, we'll learn how to convert our HTML code to the markdown text using the reverse_markdown gem. We'll also learn how to add a definition of a custom HTML tag(<bold></bold>) and parse it with this gem.

Note: This part is not something that we'll implement in our docs project. I wanted to write this to show you guys that we can do something like this for your future projects.

Getting Started

Image from Pixabay

For this tutorial, you'll need Ruby installed in your machine. You can use this GoRails guide to setup ruby.

First, create a new folder and cd into it:

$ mkdir htmltomd
$ cd htmltomd

Install the reverse_markdown gem:

First, you need to create a file named Gemfile

$ touch Gemfile

Then add reverse_markdown gem to this file:

# Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

# Your ruby version
## It's a good practice to mention it here!
ruby '2.6.5'

gem 'reverse_markdown', '~> 2.0'

Install the dependencies:

$ bundle i

Now create three files:

config.rb: We'll write our ruby code logic in this file
bold_converter.rb: We'll implement a custom tag <bold></bold> in our example, so reverse_markdown will not know about our custom tag, so we'll add this logic here.
index.html: We'll write our HTML code in this file
hello.md: The output of the converted HTML code to markdown will be injected in this file.

$ touch config.rb
$ touch bold_converter.rb
$ touch input.html
$ touch hello.md

Codebase:

Let's start writing the code:

First, open up your favorite editor and write a sample HTML code in index.html file:

<h1>Hello world</h1>

<p>Hey there</p>

<hr />

<blockquote>Let there be the end</blockquote>

<table>
  <tr>
    <td>Hello 1</td>
    <td>Hello 2</td>
  </tr>
  <tr>
    <td>Body 1</td>
    <td>Body 2</td>
  </tr>
  <tr>
    <td>Body 3</td>
    <td>Body 4</td>
  </tr>
</table>

<bold>This is bold</bold>

Now, open the config.rb file and write our logic:

# First, we need to import `reverse_markdown` library
require 'reverse_markdown'

# Then import the `bold_converter.rb` - See point 3
require './bold_converter'

# Now let us import our `index.html` and `hello.md` files:
## For `index.html`, we only give READ permission
## For `hello.md`, we'll give RE-WRITE permission
### This means, everytime we parse code,
### It will clean `hello.md` file and rewrite code.
index_html_file = File.open('./index.html', 'r')
hello_md_text_file = File.open('./hello.md', 'w+')

# Read the contents of `index.html` file
html_code = index_html_file.read

# Register our custom `<bold></bold>` tag - See point 3
ReverseMarkdown::Converters.register :bold, ReverseMarkdown::Converters::Bold.new

# Config for reverse_markdown
ReverseMarkdown.config do |config|
  ## If there is an unknown tag, raise an error
  config.unknown_tags = :raise
  config.github_flavored = true
end

# Now, convert the HTML code to MD
md_text = ReverseMarkdown.convert(html_code)

# Now, inject the MD text in `hello.md` file
hello_md_text_file.puts md_text

# Now, close the files
index_html_file.close
hello_md_text_file.close

This was simple; everything is explained in the code comments above, and to summarize:
We first import the reverse_markdown gem.
Then we import our bold_converter.rb file - See next point
Then we import our index.html and hello.md files.
We then register our new Bold tag, add config to reverse_markdown and then convert our HTML code to MD.
We inject the converted MD text to hello.md file.
Finally, we close both the files as a good practice.
If you run the script now, you'll see an error because <bold></bold> tag is not yet defined. We'll get this error because we've used config.unknown_tags = :raise to raise errors when we have undefined tags. For more options details see the docs. We'll define it now!

Now, open the bold_converter.rb file and write our custom tag logic:

# bold_converter.rb

module ReverseMarkdown
  module Converters
    class Bold < Base
      # This is the main convert logic
      def convert(node, state = {})
        content = treat_children(node, state.merge(already_bolded_out: true))
        if content.strip.empty? || state[:already_bolded_out]
          content
        else
          " **#{content}**"
        end
      end
    end
  end
end

treat_children method performs conversion of all child nodes. If <bold></bold> tag is already defined in reverse_markdown(which it is not), then we don't want to convert anything.
Even if the string is empty, we don't want to convert anything.
If everything is right, add ** to the content.

Running the script:

Run the script by using this command:

$ ruby config.rb

Now, in the hello.md file, you'll see the HTML to MD converted text.

Summary and conclusion

Image from Pixabay

Let's take a quick look at what we learned today:

First of all, I introduced myself, so don't forget to connect with me at Twitter or elsewhere.
Since I'm a DRY person, I referred to my part 1 article where you can see the introduction and problem statement.
Then we saw what the prerequisites are, and we also set up and understood our file structure for this tutorial.
We then wrote our ruby code logic to solve our problem, i.e., to convert an HTML code to markdown text and injecting it into an hello.md file.
Finally, we took a quick look at this very summary...

That's it and Let there be the end. 🙏

It's Easy to Build: Custom docs project | Part 1 - MD to HTML

Aditya Nagla — Mon, 30 Mar 2020 08:33:38 +0000

Hey there, Long time lurker here. This is my second post here. 😇

Introduction

Recently, I had a task to write my documentation for all my self-projects in a separate place other than GitHub's README. To accomplish this, I came across a few open-source projects like Slate Docs, Docusaurus, to name a few. They are useful in their ways, but they didn't fit my expectations. I also wanted my docs in my desityle library, which is impossible to achieve from these projects.

So I decided to build my own docs project, and it's live at Drabkirn Docs, and it's open-source. It took me a couple of days to learn things and complete this project, and in this tutorial series, I'll share my learnings as a beginner-friendly way.

For developers, writing docs is super-easy when we write it in markdown syntax, as writing in HTML will be a harrowing experience. That's why GitHub's README file looks simple clean with such a less code written in README.md file.

For this problem statement, I came up with this solution:

I write my docs content in a markdown(MD) file.
The app converts the above MD file content to an HTML code.
We configure our app to include our desityle library, add our custom SEO tags and custom elements generation.
We then inject this HTML code to our index.html file.
Then build our code to minify content and push to production.

In this part 1 tutorial of this series, we'll take a very first small step to learn how to convert a markdown code to an HTML code and inject this HTML code into an HTML file. To accomplish this, we'll use the Ruby language and redcarpet gem.

Getting Started

Image from Pixabay

For this tutorial, you'll need Ruby installed in your machine. You can use this GoRails guide to setup ruby.

First, create a new folder and cd into it:

$ mkdir mdtohtml
$ cd mdtohtml

Install the redcarpet gem:

First, you need to create a file named Gemfile

$ touch Gemfile

Then add redcarpet gem to this file:

# Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.5'

gem 'redcarpet', '~> 3.5'

Install the dependencies:

$ bundle i

Now create three files:

config.rb: We'll write our ruby code logic in this file
hello.md: We'll write our markdown text in this file
input.html: The output of the converted markdown text which will be injected in this file.

$ touch config.rb
$ touch hello.md
$ touch input.html

Codebase:

Let's start writing the code:

First, open up your favorite editor and write a sample text in hello.md file

# Hello

This is just a hello file

[Link](https://google.com)

> This is a blockquote

*This is em*

**This is bold**

## This is header 2

### This is header 3

Now, open the config.rb file and write our logic:

# First, we need to import `redcarpet` library
require 'redcarpet'

# Now let us import our `hello.md` file and `index.html` file:
## For `hello.md`, we only give READ permission, so that we don't mess
## up with our markdown file
## For `index.html` we'll give RE-WRITE permission, that means
## Everytime the code parses, it will clean this file and re-enter code
hello_md_text_file = File.open('./hello.md', 'r')
index_html_file = File.open('./index.html', 'w+')

# Now we'll initialize Redcarpet:
## For now, we'll not use any options, we'll keep this simple
md_renderer_options = {}
md_extensions = {}

md_renderer = Redcarpet::Render::HTML.new(md_renderer_options)
markdown = Redcarpet::Markdown.new(md_renderer, md_extensions)

# Read the contents of `hello.md` file and put it in `md_text` variable
md_text = hello_md_text_file.read

# convert MD to HTML, put it in `md_to_html_text` variable
md_to_html_text = markdown.render(md_text)

# Now inject this HTML content in `index.html` file
index_html_file.puts md_to_html_text

# Now, close the files
hello_md_text_file.close
index_html_file.close

This was simple; everything is explained in the code comments above, and to summarize:

We first import the redcarpet gem
Then we import the hello.md and index.html files
We'll then initialize redcarpet with no options to keep things simple.
We then convert our markdown text to HTML code and inject this code to index.html file
Finally, we close both the files as a good practice.

Running the script:

Run the script by using this command:

$ ruby config.rb

Now, in the index.html file, you'll see the MD to HTML converted code.

Testing it:

Image from Pixabay

We finished with the coding part, now let's test it out:

Most of the modern machines have python installed, so we'll use SimpleHTTPServer to fire up our server, you can use any server:

$ python -m SimpleHTTPServer 3000
# Or any other web server

Now, visit localhost:3000 or $YOUR_IP:3000, to the see your index.html file. It looks like this:

To summarize, here is how the workflow will work from now:

You keep adding more content to hello.md file
Then, run the script:

$ ruby config.rb

The above command will update the index.html file.
Now, refresh your webpage, and you'll see the updated markdown to HTML code.

Summary and conclusion

Let's take a quick look at what we learned today:

First of all, I introduced myself, so don't forget to connect with me at Twitter or elsewhere.
Next, we described and understood our problem statement.
We then outlined a solution to our problem statement, and this tutorial is a partial solution to our big problem statement.
Then we saw what the prerequisites are, and we also set up and understood our file structure for this tutorial.
We then wrote our ruby code logic to solve our problem, i.e., converting a markdown text to HTML code and injecting it into an index.html file.
Next, we tested our index.html file by firing up a server.
We then defined what our workflow will be for adding more content to our hello.md file.
Finally, we took a quick look at this very summary...

That's it and Let there be the end. 🙏

It's Easy to Use: Gulp

Aditya Nagla — Thu, 19 Dec 2019 14:28:08 +0000

Hey there, New member here and this is my first dev post, so I'm really excited about it. 😇

Recently, I came across Gulp, and I was amazed by its features. I came to know how useful a task runner can be for web developers. So, I just wanted to write about it. So without further adieu, let's get started.

Introduction

What is gulp BTW? Gulp is a task runner or builds runner. We provide some instructions in a file called gulpfile.js, and it will execute those instructions to get our work done.

We as developers waste too much of our time doing repetitive tasks, so Gulp is a great simple way to automate our repetitive tasks, thus, making us more productive.

Let's say we built a simple static website, and now it's ready to be deployed to production for the world to see. But before that, we'll need to make some optimization(s) like compressing CSS and JS files, so end users don't have to download huge files and thus leading to bad UX.

So now, you compress your HTML, CSS, JS, and Image files from websites like https://minify-html.com/, https://cssminifier.com/, https://jscompress.com/, and https://tinypng.com respectively. You then deploy your code to production. It works, Yay. But wait, you've made a simple spelling mistake. Now, you go back to your editor. Then you'll have to beautify(or prettify) your whole codebase using websites like https://codebeautify.org. You'll then correct your spelling mistake. Again you'll need to compress your files. Now, you push to production. It works, Yay. But wait Still, there's some other spelling mistake...

But isn't there a better way to automate this stuff? The good news is, there is. And that's what we're going to learn today, and it's effortless to use. We'll write all of our code in src/ folder, write a gulp script gulpfile.js that will compress all of our files, and put it in dist/ folder. You always work with src/ folder and always deploy dist/ folder only(If you deploy src/ folder, then my whole time writing this article will be a waste). With this approach, you don't always have manually to minify(or compress) files or beautify them, you can do it with just one command.

Getting Started

Image from Pixabay

Prerequisites: NodeJS, Yarn(or NPM), and obviously, your codebase of the static website.

From the root of your project, run:

$ npm init -y

This will create a package.json file with defaults.

Our initial folder structure must be something like this:

.
├── dist
├── package.json
└── src
    ├── assets
    │ ├── img1.jpg
    │ └── img2.jpg
    ├── css
    │ ├── 01-style1.css
    │ ├── 02-style2.css
    │ └── 03-style3.css
    ├── fonts
    │ ├── font1.woff
    │ └── font2.woff
    ├── index.html
    └── js
        ├── 01-app1.js
        ├── 02-app2.js
        └── 03-app3.js

You can see that our CSS/JS files have a numeric prefix. We do this because gulp processes file alphabetically.
So, for example, If you have 2 CSS files named custom.css and library.css, then gulp will process custom.css and then library.css, thus all the custom code that you write in custom.css will be overridden by library.css.
But we don't want this. So we change their names to 01-library.css and 02-custom.css. Sweet and simple.

Let's add some dependencies, run:

yarn add gulp gulp-autoprefixer gulp-clean gulp-clean-css gulp-concat gulp-htmlmin gulp-imagemin gulp-replace gulp-uglify-es merge-stream
# or
# npm i --save gulp gulp-autoprefixer gulp-clean gulp-clean-css gulp-concat gulp-htmlmin gulp-imagemin gulp-replace gulp-uglify-es merge-stream

Let's understand what each of these packages does:

gulp: The main toolbox.
gulp-autoprefixer: It will prefix the CSS with Autoprefixer.
gulp-clean: It helps to remove files and folders.
gulp-clean-css: Minify the CSS with cleancss
gulp-concat: Concatenate files, so all of our CSS/JS files will be produced in just one CSS/JS file. Thus, it helps in reducing the requests count.
gulp-htmlmin: Minify HTML
gulp-imagemin: Compress images
gulp-replace: Replace some text in the files with custom texts.
gulp-uglify-es: Minify JS
merge-stream: We'll use this to copy other static parts.

Finally, create gulpfile.js file in the root of your project, run:

$ touch gulpfile.js

Enough of the theory, let's dive into code.

Codebase:

Let's start writing our automation script:

Let's include all of our packages in gulpfile.js:

// gulpfile.js
let gulp = require('gulp');
let clean = require('gulp-clean');
let concat = require('gulp-concat');
let replace = require('gulp-replace');
let minifyCSS = require('gulp-clean-css');
let uglify = require('gulp-uglify-es').default;
let htmlmin = require('gulp-htmlmin');
let autoprefixer = require('gulp-autoprefixer');
let merge = require('merge-stream');

Next, let's defile the location of our files in the codebase in globs variable:

// Location to our files
let globs = {
  dist: './dist',
  css: './src/css/*.css',
  js: './src/js/*.js',
  html: './src/*.html',
  images: './src/assets/**',
  fonts: './src/fonts/**'
};

Now, the first step is to clean the dist/ folder for any old files, and we'll do that by:

// Step: 1 - This will delete the folder and re-create it
gulp.task('clean', gulp.series(function() {
  return gulp.src(globs.dist, {read: false})
    .pipe(clean());
}));

The second step is to place our fonts/ directory to the dist/ folder, and we'll not do any compression or optimization to it. Just copy it to the dist/ folder:

// Step: 2 - Just copy fonts/ folder
gulp.task('fonts', gulp.series('clean', function() {
  return gulp.src(globs.fonts)
      .pipe(gulp.dest(globs.dist + '/fonts'));
}));

Now let's work on our CSS files. We'll take all of our CSS files, concatenate them into one CSS file called main.min.css, Apply autoprefixer to it, then minify it and then finally place this CSS file to dist/css folder:

// Step: 3 - CSS processing
gulp.task('styles', gulp.series('clean', function() {
  return gulp.src(globs.css)
    .pipe(concat('main.min.css'))
    .pipe(autoprefixer())
    .pipe(minifyCSS())
    .pipe(gulp.dest(globs.dist + '/css'));
}));

Now let's work on our JS files. We'll take all of our JS files, concatenate them into one JS file called app.min.js, minify them, then export them to dist/js folder:

// Step: 4 - JS processing
gulp.task('js', gulp.series('clean', function() {
  return gulp.src(globs.js)
    .pipe(concat('app.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(globs.dist + '/js'));
}));

Now let's work on our image files. We'll take all of our Images, compress them, then export them to dist/assets/ folder:

// Step: 5 - Image processing
gulp.task('assets', gulp.series('clean', function() {
  return gulp.src(globs.js)
    .pipe(imagemin())
    .pipe(gulp.dest(globs.dist + '/assets'));
}));

Finally, let's work on our HTML file:

In our HTML file, we'll have our <link> tags something like this:

<link rel="stylesheet" href="css/01-style1.css">
<link rel="stylesheet" href="css/02-style2.css">
<link rel="stylesheet" href="css/03-style3.css">

So, we'll need to replace these lines with our one CSS file main.min.css.
Also, we need to do the same for our JS files to one JS file app.min.js.
We'll now minify our HTML file and remove comments also.
We can do this by these lines:

// Step: 6 - HTML processing
gulp.task('html', gulp.series('clean', function() {
  return gulp.src(globs.html)
    .pipe(replace(`<link rel="stylesheet" href="css/01-style1.css">`, ''))
    .pipe(replace(`<link rel="stylesheet" href="css/02-style2.css">`, ''))
    // Replace this with our one `main.min.css` file
    .pipe(replace(`<link rel="stylesheet" href="css/03-style3.css">`, '<link rel="stylesheet" href="css/main.min.css">'))

    .pipe(replace(`<script src="js/01-app1.js"></script>`, ''))
    .pipe(replace(`<script src="js/02-app2.js"></script>`, ''))
    .pipe(replace(`<script src="js/03-app3.js"></script>`, '<script src="js/app.min.js"></script>'))
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true
    }))
    .pipe(gulp.dest('./dist'));
}));

The final step is to build the task, and we can tell gulp with this:

// Step: 7 - Build the task
gulp.task('build', gulp.parallel('fonts', 'styles', 'js', 'assets', 'html'));
gulp.task('default', gulp.series('build'));

That's it; your complete gulp file must look like this:

Testing it

We're done with the coding part, let's test it out:

We need to add gulp to our scripts in our package.json file. So in package.json file, add:

"scripts": {
  "build": "gulp"
}

Now from the root directory of your project, run this command:

$ yarn build
# or
# npm run build

Now, go to the dist/ folder and run your server:

$ cd dist/
$ python -m SimpleHTTPServer 3000
# Or any other web server

Summary and conclusion

Let's take a quick look at what we learned today:

First of all, I introduced myself, so don't forget to connect with me at Twitter or elsewhere.
We saw a quick introduction to gulp, and we discussed a scenario of how we'll use gulp to solve our problem
Then we saw what the prerequisites are and we also set up our environment
Then we wrote our automation script in gulpfile.js.
Then we tested our script by adding gulp command to package.json file and running yarn build, which will export our app to dist/ folder.
Finally, we took a quick look at this very summary...

That's it and Let there be the end. 🙏