Bdtjtk

I want to have a separate set of HTML pages from my react app.

I've created this vanilla HTML/ CSS/ JS landing page that looks great. I'm trying to figure out how to make this my index page without actually adding it to my React app.

This is because of the various plugins I'm using that doesn't translate to React, and unique CSS code that I'd rather not have global.

Imagine loading to the home page, which is vanilla HTML. Then when the user hits the login button, it directs them to the React /login component. I have the routing set up so that referencing /login in an anchor will trigger React, I just need to get the HTML to be standalone.

Here's the way my app is currently set up.

reactapp

|

------server.js

|

------package.json

|

------boilerplate etc

|

------client

      |

       -------public

                |

                 -----index.html

                |

                -------landingHomePage.html

      |

      --------src

               |

               -----index.js

               |

               -----page1.js, page2.js, page3.js etc

in reactapp/server.js

app.use(express.static(path.join(__dirname, "client/build")));



const port = process.env.PORT || 5000

console.log("PORT NUMBER IS " + port);



app.listen(port, () => console.log(`Server Running on port ${port}`));

in reactapp/package.json

{

  "name": "reactexpress",

  "version": "1.0.0",

  "description": "react-express boilerplate",

  "main": "server.js",

  "scripts": {

    "client-install": "npm install --prefix client",

    "start": "node server.js",

    "server": "nodemon server.js",

    "client": "npm start --prefix client",

    "dev": "concurrently "npm run server" "npm run client"",

    "test": "echo "Error: no test specified" && exit 1",

    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

  }, ...

in reactapp/client/src/index.js

ReactDOM.render(

<BrowserRouter>

    <Layout>

       <Switch>

         <Route exact strict path={"/page1"} component={page1} />

         <Route exact path={"/page2"} component={page2} />

         <Route exact path={"/page3"} component={page3} />

         <Route exact path={"/login"} component={Login}/>

       </Switch>

    </Layout>

    </BrowserRouter>

, document.getElementById('root'));

The CURRENT index.html is a standard HTML empty template with

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

If I rename the current html to something like react.html and rename landingHomePage.html to index.html, it gives errors.

Note: going to url/landingHomePage.html DOES direct me to the right page without any issues, but I want this to be index.html so it will go there by default.