Full-Stack Authentication and Hosting (Nodejs, Reactjs, Heroku, Netlify)
Tags: react, node, javascript, tutorial
Published: 2021-03-22 09:36:36

# Introduction
This article is a compilation of a series of articles I have written on authentication in the past. As a full-stack engineer, I do my best to bridge the gap between front-end and back-end engineers by creating contents like these. This compilation was created with absolute beginners in mind. Feel free to jump from one section to the other.

## Jump To
* [Introduction to Nodejs](#1)
* [Building the Back-End with Nodejs](#2)
* [Introduction to React-Bootstrap](#3)
* [Building the Front-end with React](#4)
* [Hosting the App](#5)
* [Get all Resources and view preview](#6)
* [Conclusion](#7)

<a name="1"></a>
# Introduction to Nodejs
This is the part where I introduce you to Nodejs and show you how to create a server. It is entitled: **Setting Up a Simple, Secure and Robust Node JS Server**. [Read full articele](https://dev.to/ebereplenty/setting-up-a-simple-secure-and-robust-node-js-server-10n0)

<a name="2"></a>
# Building the Back-End with Nodejs
This part of the compilation covers how to build the authentication back-end using Nodejs

1. [Authentication with Nodejs and mongoDB - Part 1](https://dev.to/ebereplenty/authentication-with-nodejs-and-mongodb-part-1-10pn)

2. [Authentication with Nodejs and mongoDB - Part 2](https://dev.to/ebereplenty/authentication-with-nodejs-and-mongodb-part-2-1hg9)

3. [Authentication with Nodejs and mongoDB - Part 3](https://dev.to/ebereplenty/authentication-with-nodejs-and-mongodb-part-3-3mic)

4. [Authentication with Nodejs and mongoDB - Part 4](https://dev.to/ebereplenty/authentication-with-nodejs-and-mongodb-part-4-4p37)

5. [Hosting a Nodejs and MongoDB App on Heroku](https://dev.to/ebereplenty/hosting-a-nodejs-and-mongodb-app-on-heroku-38b8)

<a name="3"></a>
# Introduction to React-Bootstrap
I use this section to introduce the bootstrap of react to you just so you are not confused on the code that we will be writing next. React-Bootstrap helps us to build applications faster with lesser code. [Read full article here](https://dev.to/ebereplenty/introduction-to-react-bootstrap-20ik)

<a name="4"></a>
# Building the Front-end with React
Here, we consume the API endpoints we built from the back-end. We also protect routes that needs authentication. See the tutorials below:

1. [React Authentication - Register](https://dev.to/ebereplenty/react-authentication-part-1-39aj)

2. [React Authentication - LOGIN](https://dev.to/ebereplenty/react-authentication-login-h3i)

3. [React Authentication - Protecting and Accessing Routes/Endpoints](https://dev.to/ebereplenty/react-authentication-protecting-and-accessing-routes-endpoints-96h)

<a name="5"></a>
# Hosting the App
There was no tutorial dedicated for this part because I assumed there are so many tutorial out there already. I will add this as a bonus to this compilation. There are a lot of hosting sites that offer you free hosting like Vercel, Netlify and Heroku. I will be using Netlify for the purpose of this tutorial. It will take you a few steps. Just follow along

* Navigate to [https://app.netlify.com/signup](https://app.netlify.com/signup) and sign up

* Follow the process until you arrive at your dashboard

* Scroll down a bit and you will get to this screen

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xehd8jio7ht4lsjqvb7p.JPG)

* You can drag you project folder into the box and your hosting will be done or you can connect it to your git repo. *The advantage of connecting to git is for continuous deployment. You will not have to do these step again in case you have a reason to make changes to your app in the future*.

* So click on the button ``New Site from Git``

* Choose the git platform you want and grant authorization to sync it to your netlify app

* Choose the repo you want to sync

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rxhv6iy5z5qo3ywgix4.JPG)

* Click on the ``Deploy Site`` button in the page that you are redirected to

* Wait for your site to be published. That should take less than 2 minutes. *You can now click on the link you see to access your site*

**Notice the URL of your site at the top of the page. It is a random URL given to you by Netlify.**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doakehth09usrxg6vv2f.JPG)

* You can change it by clicking on the ``Site Settings`` button

* In the ``Site details`` section, click on the ``change site name`` button

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/449x0ag7kwwmzwpcisu3.JPG)

* Change the Name and Click ``Save``
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w4yaioa0wl9mw5hrei2.JPG)

*Notice that the site name has been change. See mine below:*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkojgyc0waxjn2ybq588.JPG)

> You are likely to face the issue of redirecting to another page after hosting. The error may look like the image below:
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12hi8shcwxyenvy1igar.JPG)

<a name="6"></a>
### Fixing the issue
* Go into the public folder of your react project

* Create a file and name it ``_redirects``

* Enter the following content

```

    /*  /index.html 200

```
* Save and push back to the git platform where your app is hosted

* Wait a while for you app to be automatically published and you should be all good

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuewuniqjhpa9u8mys3d.JPG)

*The error is gone*

Congratulations!!! You are now a full-stack engineer...

<a name="7"></a>
# Get all Resources and see preview
1. a. [Nodejs Code can be found here](https://github.com/EBEREGIT/auth-backend)
   b. [Backend is live here](https://nodejs-mongodb-auth-app.herokuapp.com/)

2. a. [Reactjs Code can be found here](https://github.com/EBEREGIT/react-auth)
   b. [Front-end is live here](https://react-auth-app.netlify.app/)

<a name="8"></a>
# Conclusion
This tutorial set out and was able to teach us how to build a full stack authentication system using JavaScript **(Nodejs for back-end and Reactjs for front-end)**. We also saw how to host our application on Netlify and fix redirect issue.

I will encourage you to start building applications that solve real world problems. If you have started already, then please don't stop. Nothing is stopping you now.