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

In this article I try to solve bugs of project, upload it on Github.

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:

For Cors issue we have to add bellow code on the server (app.js) for backend before define connection code:

//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();
});

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

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;

Congratulation your first project deployed:

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:

With pushing clone or download button on the Repo and press copy button we can access link of address of repository:

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)

In this part copy all of your project and past them to the folder of repo:

At the end with below commands should upload codes to the Github.

At the end we have an issue on deploy client folder:

In next part we will try to solve client folder issue and deploy the project on Heroku website and develop more this project

resources:

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