DEV Community: Chiamaka Mbah

Automate CI/CD build pipeline for your Springboot app using Jenkins and Github Webhooks

Chiamaka Mbah — Sat, 02 Oct 2021 16:49:56 +0000

In this article, you will be learning how to set up a CI/CD pipeline for your springboot application using Jenkins and Github webhooks.

Prerequisites

A working knowledge of Springboot
Jenkins installed on your machine

Introduction

Continous integration and delivery make up the devops lifecycle. There are 8 phases in the devops lifecyle.

Continous delivery make up the first four phases which include: plan, code, build and test. Continous integration make up the last four phases which include: integrate, deploy, operate and monitor.

Jenkins is a tool for integrating automatically into the existing codebase after testing is complete. It spans both continous delivery (build and test phase) and continous integration (integration).

Step 1: Create a repository and branches

If your project is already hosted on Github, you can skip this step. Otherwise, create a repository on Github, map the remote url to your project and create two branches: prod and dev.

The dev branch is what Jenkins will be interfacing with, once there is a successful build in this branch then we can integrate the changes into our prod branch, this would interface with your deployment platform.

Using this method, we will catch errors during development and avoid them at production.

Step 2: Setup Jenkins server

To start up Jenkins for Ubuntu users, locate the jenkins.war file in the /usr/share/jenkins path. Once found, run the command below to start Jenkins manually.

java -jar jenkins.war --httpPort=8080

For Windows and MacOs users, view the official Jenkins documentation for how to setup the server.

You should have Jenkins running now. Jenkins default port is 8080. Head over to your browser and run localhost:8080.

An aside, Springboot runs on port 8080 as well, you will have to change your port using server.port=9090 in your application.properties file.

If you're using Jenkins for the first time, you will be presented with a page that has path to a file. The file contains your Jenkins administrator password. Copy the path. To view the contents, run this command

cat <file path>

Once that is done, you should be able to see the password. Copy and paste into the input field provided and click the button. Next up, you will be required to install Jenkins plugins. You can choose to install all plugins or install selected plugins. Go for the former and wait for the installation to be done. If it fails, retry.

After the installation is complete. You will be required to create a new user admin. You can choose to skip this step and continue with the initial administrator credentials provided by Jenkins. I strongly advise you create a new user. Once that is done, you will be redirected to your Jenkins dashboard.

Step 3: Set up Jenkins credentials

This step is vital in the build automation. On the dashboard menu items, click Manage Jenkins and then, Manage Credentials. There is an already existing Jenkins credential. Click on it and then the Global credentials.

Click Add Credentials and you will be presented with where to fill your details.

Github no longer has support for username and password. In selecting a credential kind, pick SSH Username with private key. This means you should already have your SSH keys (private and public).

If you do not have one, follow this link to generate yours and link to Github here.

Enter your username and select Enter directly in the private key option and make sure it is your generated private SSH key you are entering not the public SSH key. Click OK to continue.

Step 4: Set up Jenkins pipeline

Go back to your dashboard. Create a job. Enter a name for your job, select Freestyle project and save to continue.

Enter a description for your Jenkins job in the General tab. In the source code management tab, select Git, enter the repository url for your project. Under credentials, select the credential your created. In branches to build, edit the prepopulated branch and set to dev.

In the Build Triggers tab, check GitHub hook trigger for GITScm polling. You can choose to run this trigger with the Poll SCM option. This setup would require you input a time schedule for when the hook trigger would happen. Currently, I didn't select the Poll SCM option.

Scroll to the Build tab and select Execute shell. This is where we specify the build command for our Spring application.

./mvnw install test

Input this maven build command, it runs both test and build our app into an artifact. Once done, click save.

Step 5: Setup Github WebHook

The webhook automates the build process as opposed to manually running the build from Jenkins.

Navigate to the settings tab of your spring app github repository, click on Webhooks. You will be required to provide a Payload URL and secret. The secret key is a token you generate in Jenkins and it is used to make API calls. For our payload URL, we will generate one using ngrok.

Ngrok is a tool for generating a live URL for your locally hosted project. We need to expose Jenkins to our webhook, hence the need for ngrok.

Download ngrok zip file from here and unzip. Open your terminal and cd into the directory you unzipped ngrok.

For Ubuntu users, run this command to generate a url:

./ngrok http 8080

Make sure to append /github-webhook/ to your payload url, this is required by the webhook. Set content type to application/json.

Let's get our secret token. In your Jenkins dashboard, click on the dropdown arrow beside your name located at the top left corner. Select configure.

Scroll down to locate the API token tab, click on Add new token and generate one. Once it is generated, copy the token, save and paste it in the secret field in github.

In github, still in webhooks, the question Which events would you like to trigger this webhook?, for this article we will select Just the push event option and click Add webhook. You can explore other options to see what they offer.

Step 6: Test CI/CD pipeline

You should be in your dev branch. Make changes to your code and push. The build started automatically.

Once the build is successful, next, make a merge request to the prod branch and deploy.

Conclusion

In this article, we successfully setup a CI/CD pipeline using Jenkins and with Github webhooks, automated our build process as opposed to manually triggering the build from Jenkins.

How to deploy a web app using AWS and Nginx

Chiamaka Mbah — Tue, 14 Sep 2021 19:06:43 +0000

In this tutorial, we wil be learning how to deploy a simple web application to the cloud using AWS and Nginx.

Prerequisites

A web application you want to deploy
An AWS account

Step 1: Select a region

Regions are very important in deploying your application to the cloud. Why? The closest the region is to the user, the faster they can access resources from the server.

In the image above, I selected North Virginia as my server region, and you are free to choose a different one.

Step 2: Create an instance

First step, we need to set up the instance where we would be deploying our application.

An instance in layman term is a remote computer or as written in the AWS docs - a virtual computing environment. Instance is the term given to a remote machine by AWS, other cloud service providers like Digitalocean and Microsoft's Azure simply call theirs Droplets and Virtual Machines respectively.

Log into your AWS console as a root user. Navigate to the AWS services card and select EC2 (Elastic Compute Cloud) service.

You should be presented with this page. Click on Launch instances. You will be required to choose an Amazon Machine Image. A machine image represents the type of OS your virtual computer would run on, because, what's a computer without an OS?

I selected the Ubuntu Server 20.04 LTS (HVM), SSD Volume Type, you are free to choose a different image.

Next up, select an instance type needed to run your application. Instance types are more like CPU capacity and processor type for your machine.

Here, I picked the t2.micro instance type. It's on the free tier plan. You can choose a different instance type, depending on what your application demands.

Next up, we configure the details for our instance.

Here, we are going to edit two things. Our subnet information and user data. The idea behind user data is to preinstall softwares you will be needing in your virtual machine.

Select any subnet for your machine, after this is done, an IP address is assigned to your VM. IP addresses are ways to identify a computer, communicate and share resources with them.

There is an option to create your own subnet and if you decide to make your newly created subnet private, you cannot be able to access resources provided to public subnets in that region. Simply, AWS provides every instance internet to pull resources. If you make your subnet private, you will have to find a way to pull resources.

In the userdata, I specified that I want git preinstalled into my vm.

Next, set up storage for your vm. This is more like your SSD. Remember my machine image is of SSD volume type.

Next, tags. Leave your tags empty. Tags are more like labels you give to your AWS resources. It is presented as a key-value pair data structure.

Next, security groups. There is a default security group set for your instance. Security groups are more like firewalls.

Firewalls are protective walls for what type of requests come into our server. For example: you can block HTTP requests from accessing your web application

You can choose to use an existing security group or create a new one. I will be creating a new one.

Finally, review everything and launch.

After launch, you will be required to create a key pair either RSA or ED25519 format. This is required to securely log into your ec2 instance shell. Select a pair type and give it a name. Download the key pair. Once done, launch your instance.

After this, your instance should be up and running.

Step 3: Log into your virtual machine

Our remote machine is ready for deployment but we need to login and perform the deployment operation. The way you have a physical machine and log into with a username and password. We are dealing with a remote machine and so we need a way to connect to it, the key pair you created and downloaded is the way to connect.

Click on your instance ID and click connect. Copy the highlighted command (I highlightd it, not AWS) using the copy icon situated left of the command.

Open your terminal. If you are using a Windows machine, download git bash or WSL (Windows subsystem for Linux). If you are using a Linux machine, don't bother. Now, cd into the directory where you downloaded that ssh key pair, paste the command you copied and press enter to run it.

Follow the prompt. If you get the error in the image below, don't worry, simply run:

chmod 400 <name of RSA file>.pem

Once done, run the ssh command again and now you should be logged into your vm. Yippie! 😊

Also, git was successfully installed. Remember what we specified in our user data.

Step 4: Set up Nginx server

Before we set up the Nginx server, we have to install Nginx.

NGINX is an open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more - www.nginx.com

Generally in Linux, there are operations that require administrator rights so you would need the sudo command. We can choose to eliminate that and carry out those operations without admin rights by running the sudo su command.

Download the nginx signing key

wget http://nginx.org/keys/nginx_signing.key

Add the downloaded key

apt-key add nginx_signing.key

This should be the response.

cd into the /etc/apt directory and edit the sources.list file by running

nano sources.list

Once your nano editor is open, add this to the end of the file.

deb http://nginx.org/packages/ubuntu xenial nginx
deb-src http://nginx.org/packages/ubuntu xenial nginx

Return to home directory

cd /home/ubuntu

Run the apt-get update command to update the Nginx software.

Once the update is complete, install Nginx. Run this command:

apt-get install nginx

If you have issues installing nginx. If this error comes up, demanding you install libssl1.0.0 dependency.

Run this command sequentially.

echo "deb http://security.ubuntu.com/ubuntu bionic-security main" | sudo tee -a /etc/apt/sources.list.d/bionic.list

sudo apt update

apt-cache policy libssl1.0-dev

sudo apt-get install libssl1.0-dev

Then run again to install nginx,

apt-get install nginx

Start the nginx service. Run the command:

service nginx start

To ensure the nginx service is up and running. Run this command:

systemctl status nginx

Let's run our instance over the browser, if the default nginx page is served, then it works perfectly.

Right now, our web page will not be served, you will notice the browser loading without an information. We missed one vital step. The protocol for web browsers to fetch web pages is HTTP. When we set up our security groups, we had only one rule which is the SSH rule. We need to edit our security group to add in the HTTP rule.

Click on the security groups. Click on Edit inbound rules

Click on Add rule. Select HTTP. Set CIDR blocks to 0.0.0.0/0 and click Save rules

Restart the nginx server. Run this command:

service nginx restart

Run the instance over the browser again. Edit the protocol in the url from https to http.

This is what we should have now. Yippie!

Step 5: Deploying our web app

I will be deploying a react app.

First, we need to install nodejs. A react application cannot function without nodejs.

apt update
apt install nodejs

Confirm node and npm is intalled

node -v
npm -v

If node is installed but npm is not, simply run:

apt-get install npm

Next, clone your react project from github.

git clone <project repository on github>

Then, navigate into the project directory, install the dependencies and build the react project. Run these commands respectively.

npm install
npm run build

Next, copy the contents of your build to the html directory in nginx.

cp -r /home/ubuntu/<directory name>/build/. /usr/share/nginx/html

After this, restart your nginx service and run your instance over the browser.

Congratulations! You've successfully deployed a web app to AWS.

Conclusion

This article taught us how seamless it is to deploy a web application using AWS and Nginx. Head over to the AWS docs for more tutorials on using AWS services.

Understanding vue by building a country directory app part 3

Chiamaka Mbah — Fri, 17 Jul 2020 23:01:45 +0000

Hello everyone, we'll be continuing on our article episode. I know I said I was going to post this yesterday but I couldn't because I was down with a cold, I apologize and I feel a lot better now. I'm sitting at my desk right now and excited to churn this out 🙂

Objective
By the end of this post, you should:

Have a good understanding of props and how the parent component communicates with the child component and vice-versa.
Add dark mode theme to our app

Let's establish a foundation before we gradually build up. The feature we are about to add is made possible with props, so let me introduce it briefly.

What is props?
Props simply means properties. It is data that is been passed from the parent or root component to the child. Props can be a string, function, array, boolean or object; it's basically primitive data type. It cannot be changed in a child component only where it was first declared which is the parent component. Vue refers to this act as prop mutation when you try to set it to a new value in a child component.

Let's move on.

Remember I said props are data passed from parent to child component. First, our data has to be declared in a parent component. Now, we'll head over to our App.vue file and declare our data and we do that in reserved Vue property known as the data property, the name even tells what it does. In the parent component, it is data but in a child component, it is props. Hope that made sense?

Root component (App.vue)
In the data property, we are going to set three data states:

modeTheme
modeIcon
modeText

The modeTheme would affect the color state of our app, at first we will be setting it to 'light' which is the default color state.

The modeIcon and modeText would only affect the Toggle component. At first the modeIcon will be set to 'fa fa-moon-o' and the modeText set to 'dark'. Both are default states as seen in our app. Armed with some JavaScript logic, we will change these states.

This is what we should have now:

export default {
  name: "App",
  data(){
    return{
      modeTheme: 'light',
      modeIcon: 'fa fa-moon-o',
      modeText: 'dark'
    }
  },
  components: {
    Header,
    Content
  }
};

Let's begin building our app Vue Style. Next thing is we are going to bind our data to the child components. In binding data as props to a child, the prop should of course have a name and the data it is pointing to.

Header and Toggle component
First, we will take out 'dark mode' and 'fa fa-moon-o' we hard coded in the Toggle component. The prop names iconMode and textMode bind to the modeIcon and modeText data respectively. We add them into our header component tag using either v-bind attribute or its shortcut :

<Header 
  :iconMode="modeIcon"
  :textMode="modeText"
/>

I know you're thinking, how does this even relate? If you go back to part 1 we imported the Toggle component into the Header, this made Toggle a child to Header. Toggle has an indirect access to the data in root component (App.vue) through it's own parent (Header.vue) and this is made possible through props.

We will quickly add in our props into the header vue instance and there is a reserved property name for it known as props.

export default{
    import Toggle from './Toggle'
    name: 'Header',
    props: ["iconMode", "textMode"],
    components:{
      Toggle
    }
}

Our initial data in App.vue is binded to these prop names so don't be confused if you see iconMode instead of modeIcon, you can use either one but I prefer to use this. Now, at this point, Toggle has access to the modeIcon and modeText data. What we'll do next is, bind these props data to the Toggle tag component and declare them in the Toggle.vue file in reserved props property as we did for the Header.

First, bind the props data to Toggle component:

<Toggle
   :toggleIcon="iconMode"
   :toggleTheme="textMode"
 />

Then, declare these prop names in the props property:

export default{
    name: 'Toggle',
    props: ["toggleIcon", 'toggleTheme']
}

Next up, use the prop names where needed. In this case we will be replacing:

<i class="fa fa-moon-o"></i>
<span>Dark Mode</span>

with this, making our application reactive. Reactive in the sense that, if the data in toggleIcon which points to modeIcon in our App.vue does change, it would change here too.

<i :class="toggleIcon"></i>
<span>{{toggleTheme}}</span>

Here, we just binded our prop data to our class attribute since the data should be a class name and replaced the hard coded text with the data toggleTheme using string interpolation.

For my class bind, this is an expanded version of what I did up there. Choose whatever you like but the former is shorter BTW.

<i v-bind:class="toggleIcon"></i>

I'm taking my time to explain it so I don't get to explain again and again. Hopefully all I've said so far made sense.

Moving on...

It's time to work on our color state. Back in our root component, the default color (here I mean both background and text color) state was set to 'light' but we want to be able to change the state from light to dark and vice-versa.

How will we make this happen?

We will add a click event to our Toggle component and assign a custom event through an $emit. The $emit is a way to pass data from child component to parent component through custom events.

Let's do that now:

In our Toggle component, add a click event handler together with an $emit which will point to a toggle string.

<template>
  <div class="Toggle" @click="$emit('toggle')">
    <button>
     <i :class="toggleIcon"></i>
     <span>{{toggleTheme}}</span>
    </button>
  </div>
</template>

Here, I'm signalling to the parent component (Header) that there is an incoming custom event 'toggle'.

In the Header component where the Toggle component tag is declared, I will bind the custom event 'toggle' to another custom event called 'toggler' using $emit, but we are not done yet, our root component isn't still aware of the click event happening in our Toggle. Remember, we pass data from child to parent through $emit. We successfully made that happen from Toggle to Header, now we need to do same from Header to App.

<template>
  <div class="Header">
    <h2>Where in the world?</h2>
    <Toggle
      :toggleIcon="iconMode"
      :toggleTheme="textMode"
      :toggle="$emit('toggler')"
    />
  </div>
</template>

Now 'toggler' would do the final work of signalling the root component of the existence of a click event. It will be the custom event the root component works with. It will be declared in the fashion of all event handlers, either like this v-on:toggler or @toggler. At this point, it represents the @click event handler, which I must say is a very interesting twist.

In the Header tag component, we will alert the root component that there is a custom event representing a click event and that it carries a function called toggleIt as seen in the code block.

<template>
  <div id="app">
    <Header 
      :iconMode="modeIcon"
      :textMode="modeText"
      @toggler="toggleIt"
    />
    <Content/>
  </div>
</template>

With our toggleIt function announced to the root component, we declare it inside our methods property, another reserved space for storing functions.

What should the toggleIt function do?
This is basically where we write our JavaScript logic to control color state. Let's do that now.

methods:{
    toggleIt(){
      if(this.modeTheme === 'light'){
        this.modeTheme = 'dark';
        this.modeIcon = 'fa fa-sun-o';
        this.modeText = 'light mode'
      }else{
        this.modeTheme = 'light';
        this.modeIcon = 'fa fa-moon-o';
        this.modeText = 'dark mode'
      }
    }
  }

I believe whoever is reading this post has a vanilla JS background and so no need to go over this. You shouldn't be getting into Vue without knowledge of Vanilla.

Now, one final thing to achieve our aim. We need to pass the data modeTheme from parent (App) to the children components by binding it through props. From our logic above, we are changing the state of modeTheme based on it's current state. So, if it's dark when I clicked, set it to light and vice-versa.

We need some way to show the state switching does work.

Header
Bind themeMode which is the name of the prop pointing to the initial data modeTheme in App to a class using the v-bind directive:

<template>
  <div class="Header" :class="themeMode">
    <h2>Where in the world?</h2>
    <Toggle
      :toggleIcon="iconMode"
      :toggleTheme="textMode"
      v-on:toggle="$emit('toggler')"
    />
  </div>
</template>

<script>
  import Toggle from './Toggle'
  export default{
    name: 'Header',
    props: ["iconMode", "textMode", "themeMode"],
    components:{
      Toggle
    }
  }
</script>

The final result for Header and so since the themeMode prop is being binded to a class, there should be an actual class name declared in our style, this is so when my state goes from 'light' to 'dark', my 'dark' state which is a css class should kick in. This is even cooler because, we get to pass this themeMode prop across different components and decide what type of color we want for our 'dark' state.

Guys, this has been a long one. I'm glad I finally came to the end of it. This is me documenting my learning process and frankly, before I started writing, I didn't understand the whole $emit thing but right now, I can boldly say, it all makes sense now.

If it made sense to you. Do comment below and suggestions are welcome. Thank you. Next up would be populating our app with country data, that won't be tomorrow but my next post.

Link to code: https://codesandbox.io/s/country-directory-app-4byey?file=/src/App.vue

Link to demo: https://4byey.codesandbox.io/

Stay safe and byee!

Understanding Vue by building a country directory app Part 2

Chiamaka Mbah — Wed, 15 Jul 2020 14:31:38 +0000

Hello everyone! I'm so excited on the next stage of our app, we're making progress already.

Objective

Add in our search, filter and countries components

Start by creating new components Search.vue, Filter.vue and Countries.vue

Search component
This component would have our search input where we look for different countries.

<template>
    <div class="Search">
        <input type="search" placeholder="Search for a country...">
    </div>
</template>

<script>
    export default{
        name: 'Search'
    }
</script>

<style>
    .Search input[type="search"]{
        width: 350px;
        height: 45px;
        background: #fff;
        padding: 2px 18px 0 0;
        border-radius: 4px;
        text-indent: 18px;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        font-weight: 600;
    }

    .Search input[type="search"]::placeholder{
        font-family: 'Nunito Sans';
        font-weight: 600;
        color: #192734;
    }

</style>

Filter component
This component has a select tag and would basically filter out countries based on regions.

<template>
    <div class="Filter cursor-point">
        <select id="Filter-Select">
            <option value="default">Filter by region</option>
        </select>
    </div>
</template>

<script>
    export default{
        name: 'Filtersearch'
    }
</script>

<style>
    .Filter #Filter-Select{
        width: 180px;
        height: 45px;
        background: #fff;
        border-radius: 4px;
        text-indent: 15px;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        font-weight: 600;
        color: #192734;
    }

    .dark #Filter-Select{
        background: hsl(209, 23%, 22%);
        color: #fff
    }
</style>

Now, after successfully creating our search and filtersearch components, we import them into the Content.vue component.

The next component we would be creating is the countries component. It would hold all our individual countries as seen in the design.

Countries component
This component is going to be a container for all our countries. Remember, the talk about components in part 1? Each country is represented with the Country component and will be reused in this particular component. I haven't set up the design for the Country component but will do that when we begin making HTTP requests to the API.

<template>
  <div class="Countries">

  </div>
</template>

<script>
 export default{
   name: 'Countries'
 }
</script>

<style>
  .Countries{
    background: dodgerblue;
    padding: 25px;
    margin-top: 25px;
  }
</style>

I'm using the nice blue color to let you know the component does exist.

What Content component should look like

<template>
  <div class="Content">
    <div class="Content-sf">
      <Search/>
      <Filtersearch/>
    </div>
    <Countries/>
  </div>
</template>

<script>
  import Search from './Search';
  import Filtersearch from './Filter';
  import Countries from './Countries';
  export default{
    name: 'Content',
    components:{
      Search,
      Filtersearch,
      Countries
    }
  }
</script>

<style>
  .Content{
    padding: 25px 30px;
    background: #f5f5f5;
    height: 88vh;
  }

  .Content-sf{
    display: flex;
    justify-content: space-between;
  }
</style>

That will be all for this section. I'm super excited about tomorrow's episode. We would be adding some pop to our app -- ta-da! DARK MODE THEME 😏😏

You can vue (pun intended, lol!) the app here: https://12oqz.csb.app/
See you later, byeee!!!🙂

If you missed part one, here it is: https://dev.to/saucekode/understanding-vue-by-building-a-country-directory-app-part-1-2n9

Understanding Vue by building a country directory app Part 1

Chiamaka Mbah — Tue, 14 Jul 2020 20:26:39 +0000

Hello everyone. This is my very first article on VueJs. I've been learning Vue for a while now and honestly it has been a bitter-sweet experience for me. I hear people say Vue is easy, yea, it is indeed easy because you feel at home, it's still HTML but with some nice perks and those perks was the bitter part but it's a process so I'm getting there. In this series, all I will be doing is just documenting my learning experience.

On today's episode I will building a full fledged application with a dark mode theme and this is to be sure I really did understand the tutorial I have been on. It's a challenge for me and I'm taking it. This particular article would be in parts because I don't want it so long. I'll just break them into small pieces.

What our final application should look like after we're done:

I am a big believer in writing the actual code than just binge-watching tutorials and not doing anything about them.

I will be building this on codesandbox, of course, you can do this in your IDE after creating a new project in Vue. This tutorial isn't really about how to get started with Vue so I won't be talking about that.

Quick Breakdown
Our app is going to be made up of basically six components which I'll talk about as I progress. They are:

Header
Toggle
Search
Filter
Countries
Country

Project Structure
The image below describes what my file structure looks like. Just create the different files. I'm currently building with Codesandbox, it gives the IDE experience but online. I took out the assets folder since we won't be needing it in this tutorial.

We'll be using the Nunito font, you can copy this link right here and paste in your index.html file, it's found in your public folder:

<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;600;800&display=swap" rel="stylesheet">

Let's begin building out our different components.

A quick one before I dive in. I'll just do a layman explanation of what a component is for my friends who hail from Vanilla JS.

A component is a small, reusable part of an application whether big or small.

Before the advent of frameworks like Vue and the rest, we wrote lots of beautiful HTML for large applications which I must confess can go from mildly confusing to seriously annoying. Why write 50,000 lines of code when you can break them into small pieces and bring them all together into one root element which now represents the whole app? Hopefully, that made sense.

So now, let's dive right in!

Header Component
This component represents our header. It will be holding one component which in this case is the Toggle component.

<template>
  <div class="Header">
    <h2>Where in the world?</h2>
  </div>
</template>

<script>
  export default{
    name: 'Header'
  }
</script>

<style>

  .Header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 25px;
    background: #ffffff;
    color: #192734;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
  }

</style>

After adding the styles, import the component into the root component which in this case is our App.vue file. Our app should come alive by now.

Content Component
This component would have three components (country, search and filtersearch) which will be referenced in our components property. Components property is a vue feature that allows a component keep track of all components imported into it.

<template>
  <div class="Content">
    <!-- Country component -->
    <!-- Search component -->
    <!-- Filtersearch component -->
  </div>
</template>

<script>
  export default{
    name: 'Content'
  }
</script>

<style>
  .Content{
    padding: 25px 30px;
    background: #f5f5f5;
    height: 88vh;
  }
</style>

Toggle Component
This component is responsible for the toggle action between dark and light theme when we implement our dark mode feature.

I will be using Font Awesome for my icons, use whatever font icon you love.

  <template>
  <div class="Toggle">
    <button>
     <i class="fa fa-moon-o"></i>
     <span>Dark Mode</span>
    </button>
  </div>
</template>

<script>
  export default{
    name: 'Toggle'
  }
</script>

<style>
  .Toggle{
    color: #197432;
  }

  button{
    background: none;
    outline: none;
    border: none;
  }

  button span{
    font-weight: 600;margin-left: 6px

  }

</style>

Then, import your Toggle component into your Header component and you'll be good.

Now, this is what our root component (App.vue) should look like after importing our Header and Content components. You don't see the Toggle component here because it is a small piece attached to the Header component, in this case, it is a child of the Header component.

<template>
  <div id="app">
    <Header/>
    <Content/>
  </div>
</template>

<script>
import Header from './components/Header';
import Content from './components/Content';

export default {
  name: "App",
  components: {
    Header,
    Content
  }
};
</script>

<style>
*, *::before, *::after{
  margin: 0;
  padding:0;
  outline: none;
  border: none
}

#app{
  font-family: 'Nunito Sans', sans-serif;
  min-height: 100vh;
}
</style>

I'll stop here, then tomorrow, we'll move on to creating the rest of the components. This is what our app looks like: https://12oqz.csb.app/

Be creative with yours, musn't look like mine. Till tomorrow. Byeee!

Learn React with me - Welcome to React

Chiamaka Mbah — Mon, 24 Feb 2020 14:05:16 +0000

I heard the best way to learn anything is to teach it and you get to master it. I just began learning React and I feel so late to the party. The only comfort I have is as I share my thoughts, others coming into the React world can navigate easily. Let's shoot!

What is React?

Simply put, React is a Javascript library that is used to create user interfaces.

At first, I didn't get the whole fuss about React because I could just do the exact same thing with HTML, CSS and Javascript. Yes, I could build with these three comfortably but then I didn't know React existed to make my developer life easy.

Why should you even learn React?

React is fast.

Like super fast. It gives users mobile app experience on the web. Click on a button that leads to another page, it just goes to said page in split seconds. It runs on the browser and has nothing to do with a server where you would need to wait for a response except in the cases of API calls.

React is component based.

Now picture this, you're building a food directory website with just HTML and you wrote about 50,000 lines of code for just this one website. You run the code on the browser and boom! You see something shifted. Remember this webpage is made up of 50,000 lines of code. Now, you have to locate that bug. React makes this super easy. It is all about creating custom HTML elements.

Look at it this way, every webpage is made up of components or parts. A simple webpage is made up of a header, sidebar and article sections. Since React is component based, you can easily create a header component that only contains header HTML. Sidebar component that contains only sidebar HTML and article component that contains article HTML.

Now, when all these web pages have been put into components, it becomes easy to locate that bug if it is in any of these components and not have to scroll to find it. We'll learn about custom HTML elements as we go.

React keeps your code maintainable

In normal HTML, it really is hard to write maintainable code, honestly. Do you know in React you actually write your Javascript inside your HTML? Normally, you would need to link a JS script to your HTML page and if it is a huge project, you would need to create multiple JS files for respective pages to avoid code conflicts. With React, you just write your JS inside your component and no need to link a script. So, it is easy to maintain the different parts of the page or files.

There is so much more React actually does. Take these for now and go do further research.

Why was React created?

Let me use this simple illustration. Imagine a painter who of course paints. He paints a beautiful sky on his canvas for a very annoying client who keeps coming back to add new colors to the sky and for each new change, the painting is stressed except he would have to start all over again! I can only imagine.

Let's bring it home, imagine a developer working for a client who comes back every two days to request an update on his webpage, if it's not color, it's the font or just simply add a new button to the sidebar. Now, just so you know, with each update you make to the DOM, the page load time gets slower. Not everyone has the patience for a slow website.

Now enter React, it was created for an issue such as this. React presents to us what we know as a SHADOW DOM or VIRTUAL DOM. With each update to the web page, the DOM gets re-rendered and this makes what it spits to the page you see come slow. React becomes the middleman here. What React does, when you make an update, it renders what you have done on the VIRTUAL DOM (this is React's DOM) and only spits out the change to the main DOM hereby saving the DOM from re-rendering and what you get back is a faster page load. Cool right?

I will leave this here for now for you to brood. Hope it inspires you to take a step to trying React out.

Next time. Ciao.

How reduce() function really works

Chiamaka Mbah — Sun, 11 Aug 2019 23:01:30 +0000

Unveiling the Magic of JavaScript's reduce() Function

Have you ever wondered how JavaScript's reduce() function works its magic? Today, we're going to pull back the curtain and explore the inner workings of this powerful tool. By the end of this article, you'll not only know how to use reduce(), but you'll also understand what's happening under the hood. Let's dive in!

What is reduce(), anyway?

First things first: reduce() is a higher-order function introduced in ES6 (ES2015). But what does that mean? Well, higher-order functions are like VIP functions – they get to hang out with other functions, taking them in as parameters or even returning them. Cool, right?

The Superpower of reduce()

So, what can reduce() do for you? Imagine you have a basket full of apples, and you want to know how many you have in total. reduce() is like your counting buddy, helping you turn that array of apples into a single number. It's not just for counting, though – reduce() can help you combine array elements in all sorts of creative ways!

How reduce() Works: A Visual Guide

Let's look at a simple example:

const numbers = [2, 3, 4, 5, 6];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 20

But what's really going on here? Let's break it down:

We start with an accumulator value of 0.
For each number in our array, we add it to the accumulator.
The accumulator keeps track of our running total.
After we've gone through all the numbers, the accumulator gives us our final sum.

Peeking Under the Hood

Now, let's see what reduce() might look like if we wrote it ourselves:

function myReduce(array, callback, initialValue) {
  let accumulator = initialValue !== undefined ? initialValue : array[0];
  const startIndex = initialValue !== undefined ? 0 : 1;

  for (let i = startIndex; i < array.length; i++) {
    accumulator = callback(accumulator, array[i], i, array);
  }

  return accumulator;
}

This function does the same job as the built-in reduce(). Let's break it down:

We set up our accumulator, either with the initial value or the first array element.
We loop through the array, starting from the appropriate index.
For each element, we call our callback function, updating the accumulator.
Finally, we return the accumulator with our result.

reduce() in Action: A Step-by-Step Breakdown

Let's walk through our earlier example, step by step:

Start: accumulator = 0
First round: 0 + 2 = 2 (accumulator is now 2)
Second round: 2 + 3 = 5 (accumulator is now 5)
Third round: 5 + 4 = 9 (accumulator is now 9)
Fourth round: 9 + 5 = 14 (accumulator is now 14)
Final round: 14 + 6 = 20 (accumulator is now 20)

And there you have it – 20 is our final result!

Wrapping Up

Now you know the secret behind reduce()'s power. It's not just about adding numbers – you can use this pattern to combine array elements in all sorts of creative ways. In our next post, we'll explore some real-world examples that go beyond simple arithmetic.

Remember, understanding how reduce() works under the hood isn't just about satisfying curiosity – it's about becoming a more informed and capable developer. So go forth and reduce with confidence!

Happy coding! ❤️🚀💻