Hemant Vishwakarma: Express Static files on server not loading correctly but React Front end is loading correctly?

Monday, 17 December 2018

Express Static files on server not loading correctly but React Front end is loading correctly?

I have a ReactJS project with Node/Express serving my server. On my front end (React) is serving port 3312 and on my server it's serving port (5000). When I load my front end through port 3312, everything looks great and my react router routes works fine. (My api's work everything is great). However, when I try and serve static files and see if I get the same result through my server (port 5000) I only see the styles on my page. (I have a background color) I don't see any of the html whatsoever that the static files should be serving?

I get no errors in the console when I look at localhost:5000. However, my css styles are displaying on the page correctly (cause I have a background color set on my body). However, I cannot see any of my front end React displaying html code. I went inside my index.html file and put a simple test in the root div and it's displaying but I don't understand why my React code isn't displaying on my server.

I most likely think the problem is with the express static files not serving my images or React Router code. I should also note that I'm not using create-react-app I'm using webpack dev server react no cli.

Also, I'm not using create-react-app I'm using no cli for custom webpack.

Here is my code:

(Node Server)

const express = require("express");
const path = require("path");
const router = express.Router();

const app = express();
const port = 5000;

// Serve static files on server
app.use("/public", express.static(__dirname + "/../public"));

app.get("*", function(request, response) {
  response.sendFile(path.join(__dirname + "/../public/index.html"));
});

if (app.get("env") === "development") {
  app.listen(port, () => {
    console.log(`Server started on port ${port}`);
  });
} else {
  app.listen(port, "171.33.4.126", () => {
    console.log(`Server started on port ${port}`);
  });
}

routes.js

import React from "react";

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import HomePage from "./components/homepage";
import AboutPage from "./components/aboutpage";
import Contactpage from "./components/contactpage";

export default (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={Landingpage} />
        <Route exact path="/about" component={AboutPage} />
        <Route exact path="/contact" component={Contactpage} />
      </Switch>
    </div>
  </Router>
);

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Routes from "./routes";

ReactDOM.render(<div>{Routes}</div>, document.getElementById("root"));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link
      href="/public/assets/css/styles.css"
      rel="stylesheet"
      type="text/css"
    />
    <title>Site</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

Here is a screenshot of my folder structure: