For the past week, I've been working on resolving an issue. I started by creating a React Application using:
npm create react-app
After that, I attempted to build it with:
npm run build
Everything seemed to go smoothly. I generated a build folder from the Command Prompt and within it, I created my .htacess file with the following configuration:
.htacess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
I made some modifications to my package.json:
package.json
"homepage": "http://localhost/build-interface",
Lastly, I made some final adjustments in my index.html located inside the /build/index.html
index.html
<!doctype html>
<html lang="en">
... (trimmed for brevity) ...
</body>
</html>
I have repeated this process multiple times and tried various approaches, but the outcome remains unchanged. Even when I render a clean React App with no content, it fails to launch. The main issue seems to be that while I can see my script running on the network (APACHE localhost), it isn't displayed in the browser. I can also view my console.log output and the CSS (evident from the grey background), but beyond that, the page is empty. Any assistance in rectifying this problem would be greatly appreciated.
Here is the visual result:
https://i.sstatic.net/9gX4I.jpg
P.S.
I have two potential leads on where the issue might originate from:
- The Routing may be incorrect, causing the page to fail in locating the correct path for display.
- There could be an issue with
localhost, preventing the app from rendering on the Apache server.
UPDATE
As per @AKX's request, I am sharing my routing information:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'
import './styles/index.css';
import App from './components/App';
import Select from './pages/SelectionPage';
import Summary from './pages/SummaryPage';
import * as serviceWorker from './serviceWorker';
const Root = () => (
... (trimmed for brevity) ...
export default App;
Further details include:
App.js
... (more code snippets)HomePage.js
... (more code snippets)