React-Static a static site generator for progressive React Web apps

Does this do what I think it does… let you take a website in a CMS (WordPress is one mentioned) and generate a static HTML React based app? Or am I misunderstanding this?

https://medium.com/@tannerlinsley/️-introducing-react-static-a-progressive-static-site-framework-for-react-3470d2a51ebc

Intro to ReactJS

And this tweeted intro to ReactJS is very good if you don’t know React yet:

1 Like

The opposite actually – it lets you take an existing React app and it generates HTML + JS that can be served statically (i.e. without requiring a database or server state).

Here’s another similar tool with a better explanation: Features | Gatsby

4 Likes

Thanks. That part I understood (though I’m guessing as to what precisely is meant by React App), but it’s the significance of WordPress etc in their architecture that I’m curious about. It seems to suggest you can start with WordPress, and end up with a React App style static site. No?

React is a JavaScript framework, and any website written using React would be considered a React app. App; website; the terms are beginning to mean roughly the same thing.

To quote from the blog post what I assume you’re referring to:

It became very clear to us at this point that we need something that behaves more like a React app and less like a Wordpress templating system.

React-Static doesn’t use WordPress in their architecture, they’re just comparing their product to WordPress to explain it.

I’m not overly familiar with WordPress but it seems to integrate pretty tightly with the default WordPress database, so to access data in the WordPress database you need to use a custom templating language similar to HTML or PHP (I’m not sure, the details are unimportant). React-Static allows you to write more “conventional” JavaScript without dealing with the WordPress templating system.

React-Static seems to be touting itself as an alternative to using WordPress, rather than a companion.

Thanks. As I thought re app!

I’m maybe being mislead by their diagram - the way it is done looks like WordPress etc are being used as inputs, but maybe they are portraying R-S as an alternative as you suggest. This was the reason for my question in the OP - is not clear really what they mean by it.

Oh I see the diagram you’re referring to now. WordPress is shown as a possible data source, i.e. you can use your WordPress database with a React app (but this is not unique to React-Static, anyone can do this). You still have to write the whole React app from scratch, but you can, for example, save your Users database on WordPress to pull data from. Does that clarify it?

1 Like

Yes, sounds half there to me - as in if you have you have a plain (ie not React based) WordPress website, but would need to create a React App that can replace your WordPress theme, and then you could create a static version of this.

So this could be relatively easy, if there are existing React App WordPress templates, which seems quite likely.

Thanks. Sounds worth looking into as a route to get WordPress websites into SAFE. :slight_smile:

Now, to find the time!

@happybeing, something I worked on at my prev job: GitHub - sociomantic-tsunami/rockfish: NodeJS static file generation API for Wordpress

It’s a nodejs based static site generator for any wordpress theme.

I’ve been meaning to string this together with a wordpress/docker setup so we could have something easily downloadable for generating files for safe. And then it’s not a far cry to automate the PUT after that to the network. Just… time. Heh, never enough of it.

But take a look. It might help if you don’t specifically want to use react themes with your wordpress. Any Qs give me a ping!

4 Likes

This is very good: