Search code examples
javascripthtmlreactjs

Is there a way to link non-react html files in a react app?


Let's say I have a react application hosted at example.com. Now, I already have a very simple html/js website that I want to display at example.com/example. I can easily do this if I rewrite the website in react, but I don't want to do that because the html/js website is so simple and it would be unnecessary to be written in react.

Is there any way I can directly put and link this html/js website with the rest of my project?


Solution

  • When you create React app with create-react-app you have the following filesystem structure:

    my-app/
     README.md
     node_modules/
     package.json
     public/
       index.html
       custom-page.html <-- Create custom page
       favicon.ico
     src/
       App.css
       App.js
       App.test.js
       index.css
       index.js
       logo.svg
    

    https://facebook.github.io/create-react-app/docs/folder-structure

    So, you can just create any static pages in /public directory and reference them. All the resources in /public directory will be available in the root of your website.

    For example, custom-page.html will be accessible by http://localhost:3000/custom-page.html.