Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 6)

In this article I try to solve bugs of part 5, upload it on Github and show the project on heroku.com.

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 Github.com and make an account for your project Github 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: Open your GitHub account and go to repository tab and press new button to make a new repository for your project:

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:

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)

Then on your dashboard push new button to and then create new app button for setting up heroku new app

In the next step:

Now in the Deploy tab click on github button and on search place try to find your github repository

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:

Then with click on mysql go to another page to access heroku mysql username and password:

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:

Now in localhost database with copy table and paste table statement on heroku app database we can have that table on heroku:


Now insert your data to database:

The last change is on the backend routes folder in html-routes.js file. we have to change database name to heroku app database:

Test again your application, it is working without any error.
Now we have to build the project ...

Comments

[Gabriela Villa Angeles]

Hello, I followed your post step by step, to generate a small server, the problem is that when I stop making queries to the server after about 8 minutes, this sent me an error, which I leave then, you could help me because of this error.

[Maryam Keshavarz]

Hey Gabriela, Thanks for following, I have not that issue can you please send for me your Github repo's address?

[Gabriela Villa Angeles]

Hi..!!! Yes of course, is github.com/GabrielaVillaAngeles/Ba.....!
The error is:

Error: Connection lost: The server closed the connection.
at Protocol.end (/var/www/tescobedoBackEnd/node_modules/mysql/lib/protocol/Protocol.js:112:13)
at Socket. (/var/www/tescobedoBackEnd/node_modules/mysql/lib/Connection.js:97:28)
at Socket. (/var/www/tescobedoBackEnd/node_modules/mysql/lib/Connection.js:502:10)
at emitNone (events.js:111:20)
at Socket.emit (events.js:208:7)
at endReadableNT (_stream_readable.js:1064:12)
at args.(anonymous function) (/usr/lib/node_modules/pm2/node_modules/event-loop-inspector/index.js:138:29)
at _combinedTickCallback (internal/process/next_tick.js:139:11)
at process._tickCallback (internal/process/next_tick.js:181:9)
Error: Connection lost: The server closed the connection.
at Protocol.end (/var/www/tescobedoBackEnd/node_modules/mysql/lib/protocol/Protocol.js:112:13)
at Socket. (/var/www/tescobedoBackEnd/node_modules/mysql/lib/Connection.js:97:28)
at Socket. (/var/www/tescobedoBackEnd/node_modules/mysql/lib/Connection.js:502:10)
at emitNone (events.js:111:20)
at Socket.emit (events.js:208:7)
at endReadableNT (_stream_readable.js:1064:12)
at args.(anonymous function) (/usr/lib/node_modules/pm2/node_modules/event-loop-inspector/index.js:138:29)
at _combinedTickCallback (internal/process/next_tick.js:139:11)
at process._tickCallback (internal/process/next_tick.js:181:9)
Error: Connection lost: The server closed the connection.
at Protocol.end (/var/www/tescobedoBackEnd/node_modules/mysql/lib/protocol/Protocol.js:112:13)
at Socket. (/var/www/tescobedoBackEnd/node_modules/mysql/lib/Connection.js:97:28)
at Socket. (/var/www/tescobedoBackEnd/node_modules/mysql/lib/Connection.js:502:10)
at emitNone (events.js:111:20)
at Socket.emit (events.js:208:7)
at endReadableNT (_stream_readable.js:1064:12)
at args.(anonymous function) (/usr/lib/node_modules/pm2/node_modules/event-loop-inspector/index.js:138:29)
at _combinedTickCallback (internal/process/next_tick.js:139:11)
at process._tickCallback (internal/process/next_tick.js:181:9)

[Maryam Keshavarz]

does it happen on heroku or in your localhost? in localhost every thing works good.

[Gabriela Villa Angeles]

I have it on a linux server, but send me that error.