index.js not found in React application using Express (Node.js)

Question

I am trying to use my own express server for the production of a React app, but I am getting a 404 status of not found for my index.js which have the React js script.

The folder structure that I am using is the following

server.js
+public
| index.html
|
__+ src
   |
   __ index.js

(index.html is in the public folder, index.js is in the src folder)

So In my server.js I have :

// Built-in Node.js modules
let fs = require('fs');
let path = require('path');

// Third-party Node.js modules
let express = require('express');


// Express App
let public_dir = path.join(__dirname, 'public');

// let port = 80; // production port
let port = 8000; // test/debug port

let app = express();
app.use(express.static(public_dir));

app.listen(port, () => {
    console.log("Now listening on port " + port);
});

and in my index.html I am calling in my head tag:

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="./src/index.js"></script>

At the end, when I run the server.js I am getting the following error:

Failed to load resource: the server responded with a status of 404 (Not Found)

In case you might need this is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>

    <App />

  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

Thank you!

Ilijanovic · Accepted Answer · 2020-05-29 06:23:16Z

0

An node.js server isnt like an apache server where you upload an index file and it automatically renders it , you need to tell node.js what to do at route /

// Built-in Node.js modules
let fs = require('fs');
let path = require('path');

// Third-party Node.js modules
let express = require('express');

// Express App
let public_dir = path.join(__dirname, 'public');

// let port = 80; // production port
let port = 8000; // test/debug port

let app = express();
app.use(express.static(public_dir));

//response with index file

app.get('/', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})
app.listen(port, () => {
    console.log("Now listening on port " + port);
});

answered May 29, 2020 at 6:23

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

index.js not found in React application using Express (Node.js)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related