Description
When i am hoisting application in local , things are working fine , but when i try to host the same in production environment , nothing is getting loaded . It is coming to index.html , but the js and css are not getting loaded.
Production URL is -> https://stg.abc.com/tools/forecaster.
Local URL -> http://localhost:8081/tools/forecaster
routes.js
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import login from './components/login';
const myTool = () => (
<Router>
<div>
<Route exact path="/tools/forecaster" component={login}/>
<Route exact path="/tools/forecaster_hs" component={login}/>
</div>
</Router>
)
export default myTool
server.js
const express = require("express");
const app = express();
const path = require('path');
const port = process.env.PORT || 8081 ;
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.listen(port);
The request is coming till index.html , but the js and css is not getting loaded. The js and css file , both are again loading index.html file in the browser.
Generated index.html which is getting loaded is
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><title>Partner's Commission Tool</title><link href="/static/css/main.9e6bed86.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.24508a76.js"></script></body></html>