Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 6)
Tags: javascript, react, express, node
Published: 2019-04-01 21:37:21

---
title: Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 6)
published: true
description: In this article I try to upload it on Github and heroku.
tags: #javaScript #react #express #nodejs
---
<h4>In this article I try to solve bugs of part 5, upload it on Github and show the project on heroku.com.</h4>
<p>Now we can style it and improve the project step by step by before all we try to deploy first version of project to the Github and Heroku.
First: Go to <a href="https://github.com/">Github.com</a> and make an account for your project 
<strong>Github</strong> is a web-based hosting service for version control using Git. It is mostly used for computer code. It offers all of the distributed version control and source code management (SCM) functionality of Git as well as adding its own features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project. 
Open client folder in terminal and with npm run build command make it ready to deploy:
<img src="https://thepracticaldev.s3.amazonaws.com/i/gs9nymedit5va785d1kc.png"/>
Open your GitHub account and go to repository tab and press new button to make a new repository for your project:</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/xh2mokk6hbikspgz52ef.png"/>
<p>Type your Repository name and add Initialize this repository with a README whith checklist, then pess .gitignore button to ignore node-module folder to deploy, So download and upload project will be faster but remember after download project with (npm install) command in VSCode terminal should add node-module folder with all requirements of project. Type Node on textBox and press Create Repository button: </p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/0zuwlpqz1phnjmuslmxu.png"/>
<p>Now open an account on heroku website (Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud: www.heroku.com)</p>
<p>Then on your dashboard push new button to and then create new app button for setting up heroku new app</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/rqjjgc85h6wcf5jck3gr.png"/>
In the next step:
<img src="https://thepracticaldev.s3.amazonaws.com/i/lu920q893t3lfuahdje3.png"/>
<p>Now in the Deploy tab click on github button and on search place try to find your github repository</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/2ryhttepvfwg1fzmoq82.png"/>
<img src="https://thepracticaldev.s3.amazonaws.com/i/nz43jecgbfwhclfp8oaa.png"/>
Then push connect button.
Now on the buttom of page click on (Enable automatic deploys) to automatcally deploys your app after change on github.
The next step is going to the resource tap and add mysql database on heroku app.
Remember to add jawsDB mysql free version:
<img src="https://thepracticaldev.s3.amazonaws.com/i/wgesfvnpygo91xwymp66.png"/>
Then with click on mysql go to another page to access heroku mysql username and password:
<img src="https://thepracticaldev.s3.amazonaws.com/i/l62qsq8jr4h4m7pzol69.png"/>
Now we have to copt the connection string and paste it inside of our project as a mySql database address, so below code on line 33-38 of app.js:

```
const connection = mysql.createConnection({
  host: 'localhost',
  user:'root',
  password:'myjs123',
  database:'simple-react-sql-db'
});

```
should change to host user password and database address of connection String.
Now test your application to make sure it is working.
we have to see this error because we have not user table on new database to map it now. So on your MySQL workbench go to home tab to add your heroku database on it and add your table on new database:
<img src="https://thepracticaldev.s3.amazonaws.com/i/ru1b3c299l91dw58u3g3.png"/>
Now in localhost database with copy table and paste table statement on heroku app database we can have that table on heroku:
<img src="https://thepracticaldev.s3.amazonaws.com/i/94btpr37ebwzztv2onib.png"/>
<img src="https://thepracticaldev.s3.amazonaws.com/i/x3w7i1e2o7zef8yngx28.png"/>
Now insert your data to database:
<img src="https://thepracticaldev.s3.amazonaws.com/i/l69ofu0f5f3yyrgg19ki.png"/>
The last change is on the backend routes folder in html-routes.js file. we have to change database name to heroku app database:
<img src="https://thepracticaldev.s3.amazonaws.com/i/3vyzr73tufpt8dmc0wic.png"/>
Test again your application, it is working without any error.
Now we have to build the project ...