Maryam Keshavarz

Posted on Nov 25, 2018

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

#javascript #react #express #node

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

Top comments (21)

Xiaohan Du • Apr 6 '20

I think my problem is in here: 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., can you add some explanation of where to install for backend and where to install for frontend, and where to start the servers please?

alivadjid • Apr 7 '20 • Edited

Sorry. I had a problem in this lesson. After add CORS,and modified app.js.
For your problem.
"Then use npm install axios for backend"----- I wrote: npm install axios. At the terminal in vusual studio.
"and bower install axios for using axios to frontend commands in terminal to access axios and use it".------Wrote "bower install axios" at GitBash =) After this command must appeare "bower_components" folder in /express-react/backend/client/src
Try this

Xiaohan Du • Apr 7 '20

Appreciate that. I follow what you said: changed to app.get('/users', function(req, res), installed axios in /express-react/backend/client/src and saw bower_components in /express-react/backend/client/src, but still see the same error: TypeError: Cannot read property 'map' of undefined

alivadjid • Apr 8 '20

Ok. what do you see at localhost: 3001? are there information from your SQL?

Xiaohan Du • Apr 8 '20

At localhost: 3001 I see Express Welcome to Express, and at localhost: 3000 I see TypeError: Cannot read property 'map' of undefined, this happens at axios.get('/users') .then((data) => { console.log(data.data.users); this.setState({ users: data.data.users }); }) .catch(error => console.log(error));

alivadjid • Apr 9 '20

At localhost 3001 you must see data from your SQL database.
Something like this: "{"users":[{"id":1,"username":"Kris","surname": ..."
Can you send github repo for find issue?

Xiaohan Du • Apr 10 '20

Hi alivadjid,
Please see my repo https://github.com/thinkvantagedu/HW10.git
Thank you

Xiaohan Du • Apr 10 '20

If I run node server in directory simple-react-mysql, I can see the data from my SQL database in localhost:3000

alivadjid • Apr 10 '20 • Edited

well, you shoud to restart lesson 4. From position 2 and install all components from lesson.

Xiaohan Du • Mar 31 '20

Hi Maryam, thanks for the tutorial. What does it mean by bower install axios for using axios to frontend commands? I tried bower install axios and it said command not found. If I continue with npm start my React project, it gave the error Cannot read property 'map' of undefined, please help!

alivadjid • Apr 6 '20

Good day!
Try at html-routes.js file change line: app.get('/', function(req, res)
to
app.get('/users', function(req, res)
and then project must work.
I think that connected with express method app.get. Which mounted middleware function on the /users.
And than App.js on client folder refer to it.
If I'm wrong, please correct me =)