I was looking for a React static HTML solution for my incoming marketing page project. Actually, I was not looking for a static website generator, more just need to generate a html file that contains react rendering result HTML, which is for SEO friendly purpose.
My goals are:
- can generate static html on production stage.
- can still follow normal react workflow
- can test react components easily
- potentially need to do customisation
So I spent half of the day experimenting Gatsby and at the end I managed to achieve most of the features, include:
- generate static html files, which is what Gatsby best at. (And it really does a good job. For multiple route page, it not only generates multiple route entry html file, but also you will be able to visit any entry and having the code splitting and front end route as well.)
- when developing, I was still using react’s way of writing code. (But follow Gatsby’s rules)
- I managed to modified Gatsby’s Webpack configuration, and enabled my own customised ESLint rules.
But at the last step, I failed to make the test work as what I desired. I am currently using GitHub – zinserjan/mocha-webpack: mocha test runner with integrated webpack precompiler, basically it will use the Webpack configuration to transform all code involved in the test case. Since Gatsby is a wrapper of Webpack, there’s no way or very hacky to get the configuration from Gatsby and send it to mocha-webpack to use.
And this Webpack wrapper strategy, from my perspective, will be the pain point in the long term for Gatsby. It limits the ability to do elegant customisation of Webpack configuration (though it provides a modifyWebpackConfig function). And currently Gatsby is using Webpack 1.x Lol
Overall, I think Gatsby is more suitable for simple static web site like blogs, but not for web applications that need more customisations.
I ended up just using React’s server rendering ReactDOMServer – React, renderToString(). Will write another post for it.