DEV Community

Maryam Keshavarz
Maryam Keshavarz

Posted on

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

Top comments (21)

Collapse
 
xiaohan_du profile image
Xiaohan Du

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?

Collapse
 
alivadjid profile image
alivadjid • 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

Collapse
 
xiaohan_du profile image
Xiaohan Du

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

Thread Thread
 
alivadjid profile image
alivadjid

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

Thread Thread
 
xiaohan_du profile image
Xiaohan Du

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));

Thread Thread
 
alivadjid profile image
alivadjid

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?

Thread Thread
 
xiaohan_du profile image
Xiaohan Du

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

Thread Thread
 
xiaohan_du profile image
Xiaohan Du

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

Thread Thread
 
alivadjid profile image
alivadjid • Edited

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

Collapse
 
xiaohan_du profile image
Xiaohan Du

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!

Collapse
 
alivadjid profile image
alivadjid

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 =)

Collapse
 
xiaohan_du profile image
Xiaohan Du

Hi, thanks for the reply, changed to app.get('/users', function(req, res) but still no luck

Collapse
 
sacardo profile image
Saulo Cardoso

Hello Maryam.

Where are part 6 ?

Collapse
 
kmaryam27 profile image
Maryam Keshavarz

Hi, I'll write it as soon as possible sorry for delay. :)

Collapse
 
sacardo profile image
Saulo Cardoso

Olá Maryam.

Please!

I am using as base your tutorial, to develop an application, but I lack base for connecting with the FrontEnd.

For this I need part 6 of the tutorial

Thank you.

Very rewarding your work.

Collapse
 
ihoka profile image
Istvan Hoka

Where are parts 1-4?

Collapse
 
Collapse
 
dance2die profile image
Sung M. Kim

Thanks for the series, Maryam.

When you add the series meta tag, it will show the series on the top of the list.

As an example, check out this post.

You will see series bubble as shown below.

demo

Check out the Editor Guide for detail 🙂

Thread Thread
 
kmaryam27 profile image
Maryam Keshavarz

Thanks a lot I'll use it :)

Collapse
 
dionnelektra profile image
Dionnelektra

Hello,

I'd like to ask if you're gonna make a tutorial for the frontend with integration of frontend and backend?

Thank you :)

Collapse
 
kmaryam27 profile image
Maryam Keshavarz • Edited

Hi, yes I'm trying to do front-end app