Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 5)
Tags: javascript, react, express, node
Published: 2018-11-25 19:19:07

---
title: Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 5)
published: true
description: In this article I try to solve bugs of project, upload it on Github.
tags: #javaScript #react #express #nodejs
---
<h4>In this article I try to solve bugs of project, upload it on Github.</h4>
<p>probably after running the project you will see nothing on the browser and with right click on browser and opening inspect section you will see below error in the console tab:</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/tjg79dzm3i98aqt9203o.png"/>
<p>For Cors issue we have to add bellow code on the server (app.js) for backend before define connection code:</p>
```javascript.
//CORS
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
```
<p>Then use npm install axios for backend and bower install axios for using axios to frontend commands in terminal to access axios and use it.
Now open client folder and open app.js file again to change fetch code and use axios that will answer to our project</p>

```javascript
import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

class App extends Component {
  state = {
    users:[]
  }
  componentDidMount(){
    this.getUsers();
  }

  getUsers = _ => {
        axios.get('/users')
    .then((data) => {
      console.log(data.data.users);
      this.setState({users: data.data.users});
    })
    // .then(({response}) => this.setState({users: response.users}))
    .catch(error => console.log(error));
  }
  showUsers = user => <div key={user.id}>{user.username}</div>
  render() {//building react method that comes inse od react component
    const { users } = this.state;
    return (//jsx code and can return only a single parent tag
      <div className="App">
        {users.map(this.showUsers)}
      </div>
    );
  }
}

export default App;

```
<p>Congratulation your first project deployed:</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/909jkx98qhf33rw47cu0.png"/>
<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>With pushing clone or download button on the Repo and press copy button we can access link of address of repository:</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/kibchxpgrwtet8dby7yx.png"/>
<p>Open Git Bash go to specific address that you want to have copy of github repo. now command: git clone CTL+v(pasting address of Github repository)</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/gz6vbnuekqzxb4w2j9u8.png"/>
<p>In this part copy all of your project and past them to the folder of repo:</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/mso86c49f25t3z7u5tq8.png"/>
<p>At the end with below commands should upload codes to the Github.</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/ng8rq8x3592p5coqfaur.png"/>
<img src="https://thepracticaldev.s3.amazonaws.com/i/q5zazd3imlxvi6vydsbr.png"/>
<img src="https://thepracticaldev.s3.amazonaws.com/i/soa5ub62kt4st2z8i7tj.png"/>
<img src="https://thepracticaldev.s3.amazonaws.com/i/mkn9me1txbvv47ypzhyk.png"/>
At the end we have an issue on deploy client folder:
<img src="https://thepracticaldev.s3.amazonaws.com/i/47x0msk1e17lpzgsglxf.png"/>
<p>In next part we will try to solve client folder issue and deploy the project on Heroku website and develop more this project</p>


<p>resources:</p>
https://en.wikipedia.org/wiki/GitHub
https://www.youtube.com/watch?v=7yA7BGos2KQ
https://github.com/gitname/react-gh-pages