I am working on a react project, but my boss wants me to add a third-party index.html file to the project. The idea is to create a button that redirects to this other page. I created an endpoint in the server
app.get('/openscad', function(req, res) {
res.sendfile(path.join(__dirname, '/openscad/index.html'));
});
to return the index.html file everytime /openscad is requested. I started the server and react (on development)
npm start
node server.js
and I proxy requests from localhost:3000 to the server (localhost:5000). When I get request /openscad directly to localhost:5000 it renders my html, but when I request it to localhost:3000 it won't render. I just get a http status 200 OK, but no html is returned.
This is my react index file
import React, { Component } from "react";
import ReactDOM from 'react-dom';
import Viewer from './viewer';
import Login from './login';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import HomePage from "./homePage";
import ProfilePage from "./profilePage";
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path="/viewer">
<Viewer />
</Route>
<Route path="/access">
<Login />
</Route>
<Route path="/profile">
<ProfilePage />
</Route>
<Route path="/home">
<HomePage />
</Route>
</Switch>
</ Router>
)
}
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
I want it to render in development so I don't have to build my project every time I want to test this new feature. Is it possible do render my index.html when requesting it localhost:3000?
As far as I know create react app server just returns index.html for every request which isn't a static file. Try to place your third party html inside /public and then redirect to the full path (/public/other.html).
If that doesn't work, you'll have to either proxy or maybe eject in order to change the configs.