This is the first blog of a series that will make a project/bug tracker. This is a full stack project that uses the following technologies.
- MySQL Workbench Database
- ReactJS Frontend Client
- NodeJS/Express Server
- and more.
My goal of this project is to document my process for creating a scalable app that ultimately will be used to create more projects in the future. Creating useful projects is the best way to learn new technologies, challenge yourself to become a more ambitious coder, and problem solve your way to a fully functional application.
Every week a new part of this app will be developed and by the end you will have an app that you can use to make more apps in the future.
The first part of a project is to create a full stack login which will require all the technologies above, so if you’re unfamiliar with these on a basic level you could follow along, but it would be better to come back to this after you have some familiarity.
That being said, let’s begin…
ReactJS Client
The first thing you need to do is create a ReactJS client. I’m using create-react-app for the frontend so type …
npx create-react-app name-of-your-app-client
After this is created, cd into that directory and run either ‘npm start’ or ‘yarn start’. Just in case you’re wondering it doesn’t matter in the scope of this project which you use.
Now that you’re in the directory, I use VSCode to create my projects, but you can use any IDE that is familiar to you.
I like to start by cleaning up the starter code that comes with create-react-app, so here are some screen shots of what the cleaned up code will look like.
Setting up the form frontend
Now let’s create the form for the login…
Keep in mind that we will make this more complex in later blogs, but for now we are just going to functionality.
There are a lot of ways to do this, but a good way is to use Axios, which allows you to send data to your backend with React hooks.
So, in your terminal, (make sure you’re in the name of the app folder) type …
npm install axios
Then add the following line to the top of your App.js file…
import Axios from ‘axios’;
After this, create your table, the hooks for your set the username and password and then make the post route to the backend.
The hooks, Axios routes, and the table will be explained later in the article.
Here’s the code for those three things… Make sure you use identify each part with the notes I added. You can change the names of the variables to suit your app.
Now that you’ve updated the App.js file, when you run yarn start you’re frontend will look like this.
If you want you can add css to the App.css file make this ugly form into this …
NodeJS Server with Express
The second part of this app is the backend server that connects to a MySQL database. I’ll be using the MySQL Workbench and I highly recommend you use that too, so if you don’t have it you will need to download it if you wish to follow along.
The first thing you need to do to create a new directory and then type ‘npm init’ in your terminal to initialize a package.json file. From here you’ll need to add a few dependencies.
npm install express cors dotenv mysql2
If you copy and paste this into your terminal you should see in your package.json file looking like this …
I’m using express to simplify creating a server, connecting to the database, and the routes. Then cors to connect to the React frontend, which allows data to pass back and forth. Dotenv to hide my database password, and mysql2 for the database. I was getting an error when I mysql version 1, I switched it to mysql2, so by all means if mysql works and you don’t need mysql2, go for it.
After this, let’s make the server.
Create index.js file and add the following lines…
This will get your server running on port 3001, so in your terminal type node index.js and it should say running server.
Setting up the database with MySQL Workbench
After this, let’s set up a table …
Make sure you’re in the top level of the directory, then right click to get the menu to pop out and select ‘Create Schema.’
What is a schema? It’s a blueprint of the structure of the database. Within it you need to name it and then create a table.
I named mine ‘login’ and created a table called ‘users’. Then hit the apply button until it appears in the menu to the left.
Then open up the ‘users’ file and right click on tables and select create table. At the top of the gui you can see a place to name it …
name it whatever you want and then we will make the table…
This is the structure I did for this super simple login. Here would be where you could add more information, like firstname, lastname, age, address, etc.
For this article, I made an id, datatype INT, which stands for integer, then PK (primary key), NN (not null), which means that it cannot be empty when you create an entry, and the AI (which stands for Auto Increment), which is very important so that no two records can have the same id.
Username and password are simply 45 characters and Not Null (NN), however you could change amount of characters, but I think 45 is enough.
Look to the bottom right and click apply.
Now that the table is set up we need to test it out, by adding …
SELECT * FROM login.users;
to the number 1 line then hitting the lightning bolt icon to refresh the table. You shouldn’t have any data, but it should pop up a result grid.
Also, notice the action output at the bottom. As you might have guessed this, is where you will see if there are any successful actions or errors.
Now let’s connect the database to the server and start creating so entries…
Database connection and routes
Now that the table is setup and ready for us to add entries this is where you need to use Dotenv.
Notice the password line, and this is typically where many people have problems.
Your password could be either an empty string “”, “password”, or something that you created. In any effect, you should create a .env file and create a variable called …
DB_PASS=your_password
Just like that, do not put this in quotes.
If you’re using github and want to hide this information you can create .gitignore and then add .env in this file.
Back to index.js…
The above will only work if you have added
require(‘dotenv’).config()
to the top of your code, which we did already.
Then notice the password field is password: process.env.DB_PASS … this will allow you to pull from the .env file that is hidden from github.
Post Route
In order to insert any data from the frontend to the backend we need capture that data and use the database connection to store it.
We will use an HTTP method called post to do that.
Here’s another look at that code .
What this is doing is grabbing the data from the frontend when we hit the create account button and it sends that information through …
This is on the frontend that we made earlier.
Using Axios, Cors, and the built in HTTP methods we can send the input information to the database.
The button with the onClick method {register} takes the information collected with the onChange method (these are both part of the React library) and uses Hooks to set the username and password and then inserting that information into the object in the Axios.post() method.
Then through cors it is received on the backend and then inserted into the database using this method…
already shown above but just so you can see the flow, here it is again…
Notice the SQL query … “INSERT INTO users (username, password) VALUES (?,?)”
The two variables for username and password come from the req (request) body, which means the information contains in the Axios object.
If you did this right, you can enter some information into the create account inputs, hit create account and then hit the lightning button on the mysql workbench for this table and you should start to see information coming through.
Like this…
In the next article, we’ll go over how to sign in and we’ll set up some gated routes so that you can create custom information based on what user is signed in.
Thanks