This is a total experiment on my side; I'm pretty sure there's some better way to achieve this. I'm 100% open to suggestions, please open an issue to discuss or better, send a PR 😉
My problem is that I'd like to use some React components with some legacy HTML/CSS, I could use Gatsby or something like that, but porting the HTML/CSS is no way an option... sometimes time is a scarce resource.
I have Googled a lot about it, but no out of the box™ solution, so I started playing to see where I could arrive, the worst option would be no SSR, a lot of learning and fun.
After starting to look for some inspiration, I got into this issue that has the idea of some building blocks to achieve the SSR on Jekyll.
So I started trying to get things working together, my first working version was something fsckin' ugly, so after got it green, was time to refactor, and at this moment it's, at least, readable.
First you need some React components to use, so create your own on webpack/components
folder, there's a Counter
example (attention the name of the file, is the name to be used to mount the component).
Later, we need to render the component on a layout or page, as Jekyll uses liquid, I created the ReactTag, that is a Liquid::Tag
where everything happens, it's responsible for:
- Receive component name and props
- Read the
bundle.js
file so we can execute on the server side - Call the
ReactRailsUJS.serverRender
function usingexecjs
that returns the HTML for the rendered component. - Create the enclosing div (very important then the component can be mounted after loading the page) with component content
After that, when the page finished the loading process, there's a div with component content, and it's mounted by ReactRailsUJS
, check entry.js to check how it's configured.
So simple to use:
{% react Counter|{ name: "fernandes" } %}
where Counter
is the component name (the file name, not the export/class name), and after the |
(pipe), the props are in the Ruby Hash format.
Install dependencies your way, mine is:
- bundle install
- yarn (be sure you have node installed, duh 😜)
Run commands, run webpack to generate bundle.js before jekyll
- yarn run webpack -w
- jekyll server
Access your jekyll site
yarn run webpack.js # to generate your bundle.js file
jekyll build # generate `_site` folder
After that you just need to push _site
folder to gh-pages branch.
How to do this? I just create an orphaned branch with the folder content, commit and push, you can check the gh-pages branch
Wanna see it working? Check the demo
- I'm considering creating a plugin for Jekyll so anyone can use it easily (not sure about the webpack stuff)
- If someone already has a webpack working, how to specify the
bundle.js
path? Jekyll config? - Better error handling, at this moment I hope everything is going to work flawlessly
- Add support for hot reload on this boilerplate
Open an issue, send PR, give any idea, suggestion, you're welcome! 😄
- Robert Mosolgo for the reply on the issue
- react-rails developers, special thanks for lending the React::ServerRendering::ExecJSRenderer class and ReactRailsUJS 😊
- execjs developers, made my life easier doing SSR