CODEWITHSUNDEEP
javascripthtmlnode.jsreactjsexpress
Axel JOLY
Axel JOLY

Reputation: 77

Node.JS, ExpressJS, React and HTML JSON rendering

I am a beginner in web dev and I am developping a web app using firstly Node.JS to scrape restaurants informations from two websites (Maitres Restaurateurs and Guide Michelin), then ExpressJS to begin the app. I use res.sendFile() function to display my HTML page then res.json() to send a JSON file in the HTML page.

First, here is my work dir (It's a mess):

src
├server.js
├index.html
├server-side
 ├bib.js
├jsx
 ├react.jsx

server.js code (where i get in the listFinal variable a JSON object with all my restaurants informations scraped with puppeteer on the two website. It was done thanks to bib.js):

const express = require('express');
const app = new express();
const bib = require('./server-side/bib');
var listFinal = bib.get();

app.get('/', function (req, res) {
  res.sendFile('./index.html', {root: __dirname});
  res.send(listFinal);
});
  
app.listen(8000, function () {
  console.log('Example app listening on port 8000!');
});

The server is working good. However none of my HTML or my React code is working (I'm completly new to React). The only thing displayed on my HTML is my huge JSON stored in the variable listFinal. The list has a length (or size) of 50 and here is its structure:

[{"name": "Saperlipopette ",
  "url": "www.saperlipopette1.fr",
  "address": "9 place du Théâtre, Puteaux, 92800, France",
  "price_style": "36 - 65 EUR • Cuisine moderne",
  "phone": "+33 1 41 37 00 00"},
  ...]

My index.html code:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Session 3 Work - Axel Joly</title>
  <meta name="description" content="Bib gourmand + Maitre restaurateur scrappeur">
  <meta name="author" content="Axel Joly">

  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <h1>Welcome to the Bib Gourmand and Maitre Restaurateur list (made by Axel Joly):</h1>
  <div id="root">

    <ul id="list-rest">

    </ul>
  </div>
  <script src="./jsx/react.jsx"></script>
</body>
</html>

And my react.jsx code:

var React = require('react');
var ReactDOM = require('react-dom');

export class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to React!!</h1>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

As explained before, none of them are displayed. When I run node server.js and go to localhost:8000/, I've got this:

JSON with ExpressJS

As you can see, there is no <h1> header rendered, both normally displayed with React and HTML. Also, I don't know how to "retrive" my variable listFinal in the HTML to render it as a li with <ul> and <li> tags.

Upvotes: 0

Views: 659

Answers (1)

Abdullah Abid
Abdullah Abid

Reputation: 1661

As mentioned in the above comment you are trying to run React via a single JSX file, what you want to do is to create a react app via npx create-react-app client which would send the request to your server-side code. So, i have modified your code and what i have done is used concurrenlty to run both the server-side and client-side at the same time, this is done by changing the package.json of the server-side.

"scripts": {
 "build": "next build",
 "start": "node index.js",
 "server": "node index.js",
 "client": "npm start --prefix client",
 "clientinstall": "npm install --prefix client",
 "dev": "concurrently \"npm run server\" \"npm run client\""
 }

The Next thing you want to do is send a request from your client side to your side,you can send do this by using axios 

    GetData = async () => {
    try {
      let response = await Axios.get(`http://localhost:8000/`, {
        crossdomain: true
      });
   console.log(response.data); // This would log the data received from your server
   //Res of Code

you can check the working example here (I tried using codesandbox but i was experiencing some issues there so i uploaded it on Github instead)

so to run the run the project you would open your terminal and run the following commands

git clone https://github.com/AbdullahAbid87/APIExample.git
cd APIExample 
npm i   
cd client  
npm i  
cd ..  
npm run dev

(Note: if the request to the server-side does not go through , then it is probably a CORS issue ,Although this might not be ideal but the simplest way to solve it would be to download a browser extension called CORS Everywhere that should solve it right away)

Hope this Helps

Upvotes: 1

Related Questions