Home

About me

Services

Projects

Blog

Contact

thumbnail_FSJ logo.webp

FSJ logo.webp

## Introduction

NextJS is a JavaScript framework for building server-rendered React applications. It is built on top of React and helps developers build efficient, scalable, and easily maintainable applications.

---

NextJS allows developers to build server-rendered apps, which means that the server generates the HTML for a specific route and sends it to the client, rather than the client generating the HTML using JavaScript. This can improve performance and SEO, as the content is available to search engines as soon as the page is loaded.

---

NextJS also includes features such as automatic code splitting, which helps to improve the performance of large applications by only loading the code that is needed for a specific route, and support for serverless functions, which allows developers to run server-side logic on demand.

---

Overall, NextJS is a powerful tool for building high-quality React applications, and it is particularly well-suited for building server-rendered apps with improved performance and SEO.

---

## Client vs Server side rendering

In web development, client-side rendering and server-side rendering refer to the process of generating and displaying the HTML for a web page.

---

Client-side rendering (also known as "CSR") occurs when the browser retrieves the HTML for a page and then uses JavaScript to render the page on the client side (i.e., on the user's device). This means that the browser does most of the work to render the page, and the server only needs to send the initial HTML and any necessary assets (such as JavaScript and CSS files).

---

Server-side rendering (also known as "SSR") occurs when the server generates the HTML for a page and sends it to the client, fully rendered. This means that the browser does not need to execute any JavaScript to render the page, as all of the necessary HTML is already present.

There are a few key differences between client-side rendering and server-side rendering:

---

#### Performance

Server-side rendering can potentially be faster, as the browser does not need to execute any JavaScript to render the page. However, this can depend on the specific implementation and the complexity of the page.

---

#### SEO

Server-side rendering can be better for search engine optimization (SEO), as the content is available to search engines as soon as the page is loaded. With client-side rendering, the content may not be available to search engines until after the JavaScript has been executed.

---

#### Caching

Client-side rendering can be more cache-friendly, as the server does not need to generate the HTML for each request. However, this can depend on the specific implementation and the caching strategies that are in place.

Both client-side rendering and server-side rendering have their own pros and cons, and the best approach can depend on the specific requirements and needs of the application.

---

## Data fetching strategies

NextJS, provides several methods that can be used to fetch data and populate a page's props. These methods include:

---

#### getStaticProps

This is a function that can be used to fetch data at build time and pass the data to the page as props. It is called on the server when the page is built, and the data is generated as a JSON file that is associated with the page. This method is useful for cases where the data does not need to be dynamically generated on each request.

---

#### getServerSideProps

This is a function that can be used to fetch data on the server for each request. It is called on the server before the page is rendered, and the data is passed to the page as props. This method is useful for cases where the data needs to be dynamically generated on each request, such as when the data depends on the request parameters or when the data needs to be authenticated.

---

#### getStaticPaths

This is a function that is used in conjunction with getStaticProps to specify the dynamic routes that should be pre-rendered at build time. It is called on the server when the page is built, and it returns an array of objects that specify the paths and the corresponding data that should be pre-rendered for those paths.

---

#### getInitialProps

This is a legacy method that was used in earlier versions of NextJS to fetch data on the server. It has been replaced by getStaticProps and getServerSideProps, but it is still supported for backward compatibility.

---

Overall, these methods provide a range of options for fetching data in a NextJS application and populating the page's props. The best method to use will depend on the specific needs and requirements of the application.

---

## Routing and Navigation

---

#### Routing

In a NextJS application, routing refers to the process of mapping URLs to specific pages or components. NextJS provides a built-in router that allows you to define the routes for your application and specify the corresponding pages or components that should be rendered for those routes.

---

To define routes in NextJS, you can create a pages directory in your project and place your page components inside that directory. NextJS will automatically create a route for each page based on the file name. For example, if you have a pages/about.js file, NextJS will create a route at /about that will render the About component.

---

NextJS also supports dynamic routes, which are routes that include variables that can be used to specify dynamic content. To define a dynamic route, you can use brackets in the file name to specify the variable part of the route. For example, if you have a pages/[id].js file, NextJS will create a dynamic route at /:id that will render the page component with the corresponding id value.

---

NextJS also provides several methods and components for navigating between routes within an application, such as the Link component and the Router object. These can be used to trigger navigation to different routes programmatically or in response to user actions.

---

Overall, routing is an important aspect of a NextJS application, and it allows you to define the URLs and pages that make up your application and specify the behavior of the application when different routes are accessed

---

#### Navigation

In a NextJS application, navigation refers to the process of moving between different pages or routes. NextJS provides several methods and components for navigating between routes within an application.

---

One way to navigate between routes in NextJS is to use the Link component, which is provided by NextJS. The Link component is similar to the a element in HTML, but it uses the next/link import and it handles navigation in a way that is optimized for server-rendered applications. When a user clicks on a Link, NextJS will automatically prefetch the content for the target route in the background, which can improve the performance of the application.

---

Another way to navigate between routes in NextJS is to use the Router object, which is provided by NextJS. The Router object allows you to programmatically navigate between routes using JavaScript. For example, you can use the Router.push method to navigate to a different route, or you can use the Router.replace method to replace the current route with a new one.

---

NextJS also provides a withRouter higher-order component (HOC) that can be used to wrap a component and give it access to the Router object. This can be useful if you need to trigger a navigation from a component that is not directly rendered by the Router.

---

Overall, NextJS provides a range of options for navigating between routes within an application, and the best approach will depend on the specific needs and requirements of the application.

---

## Next Image

The next/image module is a component provided by NextJS that can be used to optimize the performance of images in a NextJS application. It works by automatically generating multiple versions of an image at different sizes and resolutions, and it serves the appropriate version based on the device and network conditions of the user.

---

To use next/image in a NextJS application, you can import the Image component from the next/image module and use it to render an image. For example:

---

```js
import Image from 'next/image'

function MyComponent() {
  return (
    <div>
      <Image src="/path/to/image.jpg" alt="My Image" width={400} height={300} />
    </div>
  )
}
```

---

The Image component accepts several props, including src, which specifies the path to the image file, alt, which specifies the alternate text for the image, and width and height, which specify the dimensions of the image.

---

To optimize the performance of the image, you can also specify the priority prop, which tells the browser to prioritize the loading of the image, and the loading prop, which specifies how the image should be displayed while it is loading.

---

Overall, next/image is a powerful tool for optimizing the performance of images in a NextJS application, and it can help to improve the user experience and the overall performance of the application.

---

## Conclusion

In this blog we walked through some of the most important topics in NextJS. Make sure to understand these concepts and how to use them in NextJS and you will truly see the power of this framework.

NextJS - Need to know concepts to get started

## Introduction
In an era marked by flexibility and digital connectivity, an increasing number of developers are venturing into the realm of freelancing. This shift from traditional employment to freelancing offers a myriad of opportunities for those in the tech industry. 

---

Let's explore the positive aspects that make freelancing an enticing avenue for developers seeking a dynamic and fulfilling career.

## Portfolio Building
Building a compelling portfolio is not just a luxury but a necessity for developers. Freelancing provides a unique avenue to craft a diverse portfolio that goes beyond the confines of a single job description. 

---

As a freelancer, you have the freedom to undertake projects spanning various industries and technologies. This diversity not only showcases your adaptability but also presents a rich tapestry of your skills, making you a sought-after professional in a competitive landscape.

## Direct Client Interaction
Unlike the traditional employment setup where communication often passes through layers of hierarchy, freelancers enjoy direct interactions with clients. This direct line of communication fosters a deeper understanding of client expectations and needs. 

---

By being actively involved in discussions and feedback loops, freelancers can tailor their work to precisely match the client's vision, resulting in more satisfying and collaborative relationships.

## Income Potential
One of the compelling advantages of freelancing is the potential for a higher income. Freelancers have the autonomy to set their rates based on their skills, experience, and the value they bring to the table. 

---

Additionally, the ability to take on multiple projects simultaneously allows freelancers to diversify their income streams. As expertise grows and a positive reputation is established, the earning potential of a freelancer can surpass that of a traditional employment arrangement.

## Skill Enhancement
Freelancing is a perpetual learning journey. The dynamic nature of taking on different projects challenges freelancers to stay on the cutting edge of industry trends. Whether it's mastering a new programming language or adapting to emerging technologies, the constant exposure to diverse projects provides an invaluable opportunity for skill enhancement. 

---

This continuous learning not only keeps developers relevant but also positions them as experts in their field.

## Entrepreneurial Opportunities
Beyond being a skilled developer, freelancing opens doors to entrepreneurial endeavors. The autonomy that freelancers enjoy allows them to shape their personal brand and explore entrepreneurial ventures. 

---

This could range from developing and launching products to scaling up and establishing a full-fledged development business. Freelancing, in essence, empowers developers to not only work on projects but to shape and drive their own professional narrative.

## Conclusion
In conclusion, freelancing for developers is not merely a deviation from traditional employment but an evolution towards a more dynamic and fulfilling career. The ability to build a versatile portfolio, engage in direct client interactions, unlock higher income potential, continually enhance skills, and explore entrepreneurial opportunities makes freelancing an avenue filled with promise. As the tech landscape continues to evolve, embracing the positive aspects of freelancing can pave the way for a resilient and rewarding professional journey.

Unlocking Opportunities: The Positive Side of Freelancing for Developers

## Introduction

2022 has challenged me in various ways and these challenges helped me to learn and use some very useful technologies here is a list of some of the most useful technologies I have used in 2022.

---

1. Strapi
2. Docker
3. NextJS
4. MUI
5. React Native
6. Dokku
7. GitHub Actions
8. ESLint & Prettier
9. Lighthouse

---

## Top technologies

---

#### Strapi

Strapi is an open-source headless CMS (Content Management System) that helps build backends for your websites or apps. Strapi provides you with a very easy way to build APIs around your data entities also known as "Content-Types". Strapi has many more amazing out-of-the-box functionalities like Authentication with multiple providers, image uploads, emailing, and much more. Strapi is very customizable and allows you to create your custom endpoints. Strapi also has great documentation and I would highly recommend going through it if you want to learn everything you need to know about Strapi.

---

#### Docker

This is one of the most amazing technologies I have learned and used in so many places this year from CI/CD pipelines to setting up development environments. Docker is a container software that helps with running software in isolation. Setting up a database has never been easier. Using docker in your project is almost a must and you won't regret spending the time to learn how to use docker. I was able to explore so many other amazing technologies just by having docker knowledge.

---

#### NextJS

One of if not the most popular frontend React frameworks for building frontend / full-stack apps. NextJS has many advantages like having multiple ways of fetching data for the client and rendering the client in multiple different ways. NextJS also delivers a great-performing website and has a great developer experience.

---

#### MUI

Material UI is a React UI library that has almost every component you will need for most apps. It is very easy to use and very customizable and has great documentation. MUI in combination with NextJS makes a great team for building stable and consistent frontends.

---

#### React Native

React Native is a framework used to build truly native android and iOS apps. Using React we can build native apps with only one codebase. React Native is easy to jump into if you are already familiar with React. 

---

#### Dokku

Dokku is an open-source PaaS (Platform as a Service). Once Heroku removed their free tier I needed to jump to learn how to deploy apps and set it up like Heroku and I found Dokku which is pretty much Heroku but free. Still, some setup is required but it is as easy as running a few commands and you have your own Heroku setup ready to go. Dokku uses Docker in the background so having Docker knowledge will be beneficial when learning Dokku. Dokku has a very consistent and easy-to-learn API that helps you set up servers for development or production in no time.

---

#### GitHub Actions

GitHub has its own CI/CD service that allows you to set up pipelines on your GitHub repositories. This is such a great service and makes getting started with automation pipelines so easy and it also has a generous free tier. GitHub actions use Docker in the background to run jobs. I would use GitHub actions in combination with Dokku to deploy my websites and APIs to staging and/or production servers. This combo basically gives you Heroku setup all for free.

---

#### ESLint & Prettier

ESLint is a linting checker tool for your codebase and will help enforce best practices. This is very useful when working as a team on a codebase. It will allow you to write consistent and clean code. Prettier is an automatic formatter that makes development easier as you only need to focus on the coding not the formatting and indentation of the codebase. The combination of ESLint and Prettier is amazing this will make your codebase so much more consistent professional and easy to maintain. 

---

#### Lighthouse

This is a free browser development tool that tests the performance of your website based on all the important measurements to show you where your website might have issues. This is not hard to use just good to know about as I would suggest always running your site through Lighthouse to check what can be improved to help you build the best-performing apps you can.

---

## Conclusion

I would highly suggest all the technologies covered in this blog. 2022 has taught me to use tools to work smarter not harder, doing things from scratch just takes too long, so why reinvent the wheel? Hope you have found this blog insightful

Top most useful technologies used in 2022

## Introduction

Hey what is up everyone and welcome to this blog post. Today we are going to learn Git, probably one of the most amazing tools you will ever learn as a developer and something I would recommend learning as soon as possible.

---

My advise for getting the most out of this blog post is to try these commands out as they are cover in you own little project. This will help solidify the commands and how they work much quicker. Now let's dive in!

---

**_NOTE THIS TUTORIAL EXPECT YOU HAVE GIT SETUP ALREADY_** if you don't checkout my blog post on setting up [Git and Github](https://www.thefullstackjunkie.com/blog/git-and-git-hub-setup).

---

## What is Git

Git is an open source version controlling software that allows users to track changes to files. It was created by the creator of the Linux kernel Linus Torvalds. It is the most used and popular version controlling software and it is essential for any developer to have and know how to use.

---

## List of all basics commands

- git init
- git status
- git add
- git commit
- git log

---

## Walkthrough of all basic commands

So to do this walkthrough I am going to ask you to start a basic little project on the side to just test out all of these commands as we do cover each one.

---

So open up you terminal and lets get started! First we need to create a project:

---

**_NOTE FOR THIS I WOULD SUGGEST USING GIT BASH OR ANY UNIX BASED TERMINAL_**

```bash
cd Desktop
mkdir git-basics
cd git-basics
```

Now we have a folder called git-basics and we can start working with the git commands.

---

So the first thing we always need to do when working with git is create something called a git repo (short for repository).

---

This is basically just us telling git to start tracking files and changes inside of a project folder structure. We can do this by using the first git command as follow.

---

### git init

```bash
git init

Initialized empty Git repository in C:/Users/User-Pc/Desktop/git-basics/.git/
```

This created a **_.git_** file which is a hidden file. But this is a very important file and basically tells git we have a git repo for this project.

---

Don't ever delete this file or you will lose the repo and all the versioning that happened inside of the project. This is why it is a hidden file to protect us from not deleting it.

---

So now that we have our git repo setup let's start by adding in 2 new files to our project.

```bash
touch index.html styles.css
```

This will create 2 new files **_index.html_** and **_styles.css_**. We will now work with these basic files throughout this blog.

---

Now let move to the next command. This command we will use to look at the status of our repo.

---

This will tell use a lot of things like what files have been changes/modified which files are new, which files have been removed etc. This is a very handy command and used almost always.

---

### git status

```bash
git status

On branch master

No commits yet

Untracked files:
(use "git add <file>..." to include in what will be committed)
index.html
styles.css

nothing added to commit but untracked files present (use "git add" to track)
```

From this output we can see that we are on some branch called master, we will get into the details of branches later.

---

We can also see that there are no commits yet we will take a look at what happens when we commit files in the next commands.

---

But the important part to note here is the untracked files this shows us the 2 files we just added to the git repo. So now we can see that git it telling us "hey i see new files do you want me to track these files?".

---

This bring us to our next very important command and that is telling git to track files that are untracked.

---

### git add

```bash
git add index.html styles.css
```

Let's run the status command again and see what happen

```bash
git status
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file:   index.html
new file:   styles.css
```

Now we see that git has marked these files as new files and they are now in the staging phase, which basically just means git is tracking them and any changes made to these files git will track.

---

If files are in the staging phase they are also able to be committed.

---

So this brings us to the next command and this allows us to commit files version to git. Basically telling git to track the current state of these files.

---

Currently we don't have anything inside of these files so let go and add some boilerplate in the index.html first before we commit these files.

---

Open the file in any text editor of your choice I will be using vscode to edit the contents of the files.

![Adding content in index.html](https://res.cloudinary.com/the-full-stack-junkie/image/upload/v1663434293/editing_index_html_commit1_c1657737e4.png?updated_at=2022-09-17T17:05:05.979Z)

So in the **_index.html_** file I have just added the basic html boilerplate, an h1 tag saying "This is from commit 1" and linked up the **_styles.css_** file into the index.html file.

---

Now let us run the status command again and see what git has to say about these changes.

```bash
git status

On branch master

No commits yet

Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file:   index.html
new file:   styles.css

Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified:   index.html
```

Now we see some familiar things again. But something new and that is changes not staged for commit. This basically is pointing out to us that index.html was modified and the changes to this file was detected but net staged.

---

So once again we can run the add command and then after that we can view the status again.

```bash
git add index.html
```

```bash
git status

On branch master

No commits yet

Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file:   index.html
new file:   styles.css
```

Now we are back to where we where with all files up to date in the staging area. Now let's commit this version of the files, by running the following command.

---

### git commit

```bash
git commit -m "this is the first commit"

[master (root-commit) 107eb62] this is the first commit
2 files changed, 13 insertions(+)
create mode 100644 index.html
create mode 100644 styles.css
```

With this command we must always provide the **-m** flag and then provide a commit message. In this case I made the commit message "this is the first commit".

---

Here we can see some output telling use a few things about the commit. This commit happened on the master branch it was the the first root commit and then it provided the unique commit hash _107eb62_, we have committed 2 files and across these 2 files 13 line insertions happened.

---

**Well done** you have just created your first commit. Let's take a look at the status of the repo again.

```bash
git status

On branch master
nothing to commit, working tree clean
```

We can see the working tree is clean. This means everything was committed and git doesn't see any new changes to the repo.

---

If we would like to view all of the commits made on a branch we can run the following command.

---

### git log

```bash
git log

commit 107eb620b2c26f187e0b8e03b479d17605c6d483 (HEAD -> master)
Author: Lloyd JvRensburg <thefullstackjunkie@gmail.com>
Date:   Sun Jan 30 08:20:06 2022 +0200

this is the first commit
```

Here we can see our first commit we made with some more information. We can see the full commit hash and that this commit happened on the master branch, we will look into the idea of branches later and come back to this (HEAD -> master) output.

---

We can also see the author of the commit. This is the information that was setup during the git setup process. And then we can se the commit timestamp and message.

---

So this workflow we went through was probably the most important workflow that you will use daily when working with git.

---

Let's run through it one more time this time adding some new content to both the index.html and styles.css files.

![editing index.html](https://res.cloudinary.com/the-full-stack-junkie/image/upload/v1663434294/editng_index_html_commit2_9dbafdea9e.png?updated_at=2022-09-17T17:05:06.796Z)

![editing styles.css](https://res.cloudinary.com/the-full-stack-junkie/image/upload/v1663434293/editing_styles_css_commit2_9ef6fe53a6.png?updated_at=2022-09-17T17:05:04.652Z)

We have added a class name to the h1 tag in the index.html and in the styles.css we gave the heading-1 styles some very basic properties.

---

Now let do that run down of the workflow again.

```bash
git status

On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified:   index.html
modified:   styles.css
no changes added to commit (use "git add" and/or "git commit -a")
```

We can see git is picking up these changes. Now let's add them to staging area.

```bash
git add .
```

Here you can see me using a "." instead of adding the files names. This is a shortcut to adding all of the files that are new or modified to the staging area.

---

Let's check the status again.

```bash
git status

On branch master
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified:   index.html
modified:   styles.css
```

All files are staged and ready to be committed. So let's go and commit them.

```bash
git commit -m "this is the second commit"

[master 060328d] this is the second commit
2 files changed, 5 insertions(+), 1 deletion(-)
```

Commit made now let look at the commit logs.

```bash
git log

commit 060328d41c8dcbdc7f331296be278c08ad1bae40 (HEAD -> master)
Author: Lloyd JvRensburg <thefullstackjunkie@gmail.com>
Date:   Sun Jan 30 08:51:08 2022 +0200

this is the second commit

commit 107eb620b2c26f187e0b8e03b479d17605c6d483
Author: Lloyd JvRensburg <thefullstackjunkie@gmail.com>
Date:   Sun Jan 30 08:20:06 2022 +0200

this is the first commit
```

And now we can see the first and the second commit log. To shorten the output of the logs we can add a flag to the log command as follow.

```bash
git log --oneline

060328d (HEAD -> master) this is the second commit
107eb62 this is the first commit
```

## Conclusion

Congratulations you have just learned the basics of using git and done the most important steps you will use in git.

---

In The next blog post we will continue on with git but in this post, we will be looking into the more advanced parts of git and that is time traveling back to previous commit versions, branching, and merging different branches.

Git Basics - Part 1

## Introduction

New to using Git and GitHub?? This is the place to start. 

---

We are going to get you up and running using these 2 amazing technologies in no time. By the end of this you should have a fully working Git and GitHub environment to start working with.

---

## What is Git

Git is an open source version controlling software that allows users to track changes to files. It was created by the creator of the Linux kernel Linus Torvalds. It is the most used and popular version controlling software and it is essential for any developer to have and know how to use.

---

## What is GitHub

GitHub is a cloud platform that allows users to store their git repositories, it also is used widely for collaboration between many users on one single code base. GitHub is owned and managed by Microsoft and works wonders with Git. After learning the basics of Git this is the first next step to learn how to use GitHub combined with Git to make magic happen.

---

## Git Setup

**First we download and install Git**.

---

[Install Git Here](https://git-scm.com/downloads). Choose your specific OS, and follow the installation wizard! If you are on windows machine I would recommend installing Git Bash along with Git.

---

Once Git is installed launch your terminal/cmd and run the following command.

```bash\ngit --version\n```

This will output the version of the git software you have just installed! If this however gives you and error you will need to add the directory where git was install onto your computer [environment variables](https://stackoverflow.com/questions/26620312/git-installing-git-in-path-with-github-client-for-windows).

---

**HOORAY GIT IS NOW INSTALLED!!**

**Now let configure 2 very important global variable in git**

---
So in-order to do this we need to open up our terminal and run the following 2 command

```bash
git config --global user.name  "<Your Git Username>"
git config --global user.email "<Your email you will use for github>"
```

The 2 variable will become important once we start using git and github together. Please make sure that the email address you enter will be the same one you will use to create your github account. These variables can be changed at any time using the same commands.

---

## GitHub Setup

So now we can go to [GitHub](https://github.com/), and create our GitHub account. Remember to use the email that we used during the Git setup. Once this is completed navigate around the tabs and windows on github to check everything out and see what you can find out. As a developer your ability to tinker and play around with things that are new will truly determine your growth speed.

---

Next we need to connect our local computer git software to our Github account to allow us to have easy access when sending and retrieving data

---

## SSH key Setup

So what is the SSH key thing that I am mentioning. Well this is something that is widely used in development and it consists of 2 keys, one being a private key and the other a public key. What these keys allow us to do it authenticate our local computer to some server without having to provide username and password. This is a very secure way of authentication so let's get this setup between our local machine and github.

---

Let's actually see if your local computer doesn't have and generated SSH key already. In the terminal type in the following command.

```bash
ls ~/.ssh
```

If you run this command and you see file with the name **_id_rsa_** and **_id_rsa.pub_** then you already have SSH key generate. You can skip the next step of generating SSH key then.

---

First we would need to actually generate these 2 keys I was talking about and the way we can do this is by opening up our terminal (use GitBash if you are on windows or use the new windows terminal powershell) and running the following command.

```bash
ssh-keygen -t rsa
```

This will prompt you with a few questions. Just press enter on all of these questions now need to enter any information.

---

Once this is complete you will now have generated 2 keys. We can check out these keys by runnig the following command.

```bash
# This will log out the public key
cat ~/.ssh/id_rsa.pub

# This will log out the private key
cat ~/.ssh/id_rsa
```

Now that we have these keys we can take the public key and copy it. Then we will add the public key in our GitHub account. Go to this [page in your GitHub account](https://github.com/settings/ssh/new).

---

Give the SSH key a name, for example my-windows-computer or anything you want and paste in the **_public key_**. And now say Add SSH key.\n\n![Add SSH Key To GitHub](https://res.cloudinary.com/the-full-stack-junkie/image/upload/v1663188741/ssh_key_github_setup_492574613c.png)

---

Ok so now that that is done we can go to our terminal and test our setup. By running the following command

```bash
# Attempt to ssh to GitHub
ssh -T git@github.com

# You will get this prompt just type -> yes
The authenticity of host github.com (IP ADDRESS) cant be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)?

# You should receive the following output telling you your setup was successfully
Hi username! You've successfully authenticated, but GitHub does not provide shell access.
```

## Conclusion

Checkout my Git Basics article where I teach you the basics you need to get going with Git.

---

**😎🙌 Congratulations your are now one setup closer to becoming a bad ass developer**


Git and GitHub Setup

## Introduction

In this article we will be using Docker to create a NodeJS utility container. So for this imagine you don't have NodeJS installed on your computer, but you want to use NodeJS for your next project well with NodeJS utility container you can work in NodeJS without having to install NodeJS on your host machine.

This seems very weird to you. Go and check out my YouTube video on this topic. So let's get started first let's look at a summary of Docker.

---

## Summary of Docker

Docker is a set of platform-as-a-service (P.A.A.S) products that use OS-level virtualization to deliver software in packages called containers. The software that hosts the containers is called Docker Engine.\n\nFor this tutorial I expect you to already have Docker engine installed and setup.

---

## What is a utility container

So in the context of Docker a utility container can be seen as a temporary environment that gets spined up - then a few commands get executed within this temporary environment and you can then bind the output of these commands to a folder directory on your host machine.

Let's us NodeJS as and example. If you don't have NodeJS installed on your host machine you won't be able to run or execute NodeJS programs or install any packages using NPM or Yarn.

But with the utility container we will be able to start a NodeJS project without having NodeJS installed on our host machine. And we will be able to use NPM or Yarn within this NodeJS utility container and bind the output of these package managers (usually node_modules folder or package.json) to our host machine directory where we are building our NodeJS project.

---

## Create a utility container

So now that we understand some of the background of Docker and what a utility container is let us try and build our own NodeJS utility container with just a few command and a Dockerfile.

```Dockerfile
FROM node:18-alpine

WORKDIR /app
```

With the Dockerfile setup we now need to build a Docker image from this Dockerfile by running the following command in the directory of the Dockerfile.

```bash
docker build -t node-util .
```

Once the build is complete we now have a new Docker image called node-util. Now we want to use this Docker image to spin up a container, run yarn init that will generates a package.json and see this package.json mapped to our current working directory

```bash
docker run
--rm \
-it \
-v $(pwd):/app \
node-util \
yarn init -y
```

So lets break down what this command does.

`docker run` -- this the leading command to run any docker container.

`--rm` -- This flag will ensure that the container gets completely removed once it is shutdown.

`-it` -- This flag also interactive mode when running container. This will allow you to interact with the container terminal.

`-v $(pwd):/app` -- This flag is creating a volume bind mount to the specified directory.

`node-util` -- This is the image name we want this container to be based on.

`yarn init -y` -- This is yarn command to create package.json for a new project.

---

## Conclusion

Now you know how to create a Docker utility container. This can be done for pretty much any other programming language or development run-time.

This technique of using utility containers are widely used in build step when doing CI/CD pipelines. We in a current step we would like to build the app and take the output files and send it of to some server to be downloaded. This can all be done with the help of Docker and utility containers.

Hope you found this article helpful if you want to learn more about Docker checkout my other articles on Docker.

Check out my blog