static HTML landing pages with Create React App

user_12477879 0
Viewed 4434

Hi I have a static html landing page which has its own css, static assets, and is linked to a couple other static pages. So the whole mini project has its own index.html, about-us.html, contact.html etc. In addition, I also have built a react app through CRA where I have this really cool dashboard, now I want to combine the two where the entry point to my website is the landing page and then when you go to the /dashboard path that is my react application How can I achieve this?

So the project structure for my static landing page project looks like so:

/homepage
--index.html
--contact.html
--about-us.html
--/static
----css files, imgs, ect

My React Project uses react router so I have a fully functioning React project at the path /dashboard

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import Login from "./components/Login/Login";
import Dashboard from "./components/Dashboard";
import SignupPage from "./components/Signup/SignupPage";

const App = (
  <Router>
    <Switch>
      <Route exact path="/login" component={Login} />
      <Route exact path="/signup" component={SignupPage} />
      <PrivateRoute exact path="/dashboard" component={Dashboard} />
    </Switch>
  </Router>
);

ReactDOM.render(App, document.getElementById("root"));

serviceWorker.unregister();
create-react-app reactjs frontend html javascript
2 Answers

After you run yarn build your create react app will have a folder called build with several files in it. The files that interest you will be index.html and everything under the static folder.

The index.html file can be copied to anywhere in your web server. It can be renamed without an issue. The static folder needs to be at the root directory for your webpage - index.html references all the files as being in /static.

The names and file structure can be changed, but you would have to eject your CRA project and edit the scripts yourself.

Dan_Monego_327710

Simply try adding settings on your server so that the /dashboard route points to your react app. Example in NGINX you can add configuration

location ^~ /dashboard {
alias <yourprojectfolder>/build;
try_files $uri $uri/ /dashboard /index.html;
}

You will probably need to add the "basename" attribute to the route settings of your react application:

<Router basename="/dashboard ">

If that doesn't work, rewrite each of your html pages as a view in React. I understand that you don't have a lot of javascript and you won't have too many problems.

Additionally

you can use the "styled-component" module to wrap your views in case your page is visually defaced by leaking css to other components.

user_137364760
Related