How to create a static website generator in React

Question

Tech stack - Node.js, MongoDB for the database, Strapi CMS for editing and API, React - my application.

I have a database with a long list of entries and a ready-to-use application that allows users to read data from the database. I need to be able to generate a simple website with a single entity from my database as a source to fill the template.

Mockup

Here is a mock-up. Hopefully, it will make things a bit clearer.

Clarification

After a day of thinking about the task, I believe I need something like a simplest static website generator - an application that will allow me to select a single bit of data from the list and generate a small website filled with it. The end goal is to get a website in some subfolder of my application where I can get it and use it however I need.

A bit more about specifics:

• It will be used locally
• Security can be neglected
• Running always in development is not a problem (just in case, thinking about additional question #2)

Few additional questions:

1. Is it possible to run NPM scripts from the application (like npm build)
2. Is there any way to show one component in development mode, but replace it with another during building for production?

    App.js
    //...

    function App() {
    if() {
      return <AdminUI /> // This one is to be shown in development mode
    } else {
      return <Website /> // This one is to be used instead of AdminUI in the build
    }

UPDATE

Well, I'm digging a path to create a site generator and so far I come up with the following basic plan:

• Get my template ready

• Create a new directory for my website

• Copy a template to the new folder

• Get an HTML file, parse it to a string to modify

• Swap some bits with my data

• Save to a file from the modified string

• repeat if needed for other files.

If that works as expected, the whole process probably might be improved by moving from a fixed template to a component, that will be prepared with a JavaScript bundler and started with the help of something like node-cmd (to run shell commands from my application)...

Answer 1

What you want could be achievable, but if it's just a string and little else, I'd say it's much simpler to fetch the data at startup from a given file, and populate from there. You can put a JSON file under the public folder (together with other static data, like images) and have the file being your configuration.

In the App.js file, write an async componentDidMount() and you can do an await axios.get("") with your configuration.

So App.js would look like (code written on the fly, didn't check in an IDE):

  export class App extends React.App {
    constructor(props) {
      super(props);
      this.state = { loading: true, };
    }
    async componentDidMount() {
      const response = await axios.get("your/data.json");
      this.setState({ loading: false, ... whatever})
    }

    render = () => (
      <>
         (this.state.loading && <div>Still loading...</div>)
         (this.state.adminData && <AdminUI data={this.state.admingData} />)
         (this.state.devData && <Website data={this.state.devData} />)
      </>
    )
  }

If you don't care about security, wouldn't be much simpler like this? And if you use TypeScript you'll have a much much simpler life in handling the data too.

Maybe it's worth doing an AdminUI to generate the JSON, and the another UI which reads the JSON, so you end up doing two UIs. The template-generated UI could even ask for a JSON file to bootstrap directly to the user, if it simplifies... In general, an approach based on simple JSON sounds a lost simpler than going for a CI/CD pipeline.