I have deployed Hugo blog & I have deployed react app. Both are working fine independently. I just want to deploy both on single domain. e.g. example.com (has both react + Hugo). I don’t want two different domains e.g. blog.example.com(Hugo) & example.com (react). How do I connect Hugo generated paths to React Router to give all of the paths? Can it be automated? I am also willing to connect them manually.
Hi!
It is possible to remove a landing/home page completely:
disableKinds:
- home
So just remove your _index.md from /content/ and leave your folder /content/blog/ folder.
Maybe its ok to (automatically) copy the contents of your public folder into your React project?! If you need to combine RSS files etc. it’s more complicated, I guess.
This is not a real ‘inner’ connection. But you can link to example.com/blog/ from your app.
I was looking for little easy solution.
https://sequiturs.com/blog/post/using-static-site-generator-for-single-page-application-blog/
They have done in almost 3 years ago & combined react + Hugo. Both Hugo and react have changed a lot in 3 years. Hoping for something production ready solution.
I don’t know what that means, but I bet someone in React forums would. Hugo just outputs text files, so I suggest trying in a React community. 
Although I would always suggest Hugo: Wouldn’t it be easier to use a static website generator build upon React in your case?
I am looking for someone who has tried to do this in their project otherwise I will use easier solution of deploy Hugo on subdomain & react on main domain.
Because you think you are helping with small little suggestions but it’s not enough to take it to finish line.
Hi! We built Electrade with Hugo and create-react-app, but conceptually they are side-by-side “Hugo blog next to larger React App”, not “Hugo blog inside larger React App”. As you can see, all the landing pages (https://www.electrade.app) and blog pages (/blog) are static, while the quote app generator is a dynamic react app at https://www.electrade.app/quote. To do this, we simply have a script that copies the hugo output and the create-react-app output to a folder (reactHugo) that’s then served from Github, Netlify (or in our case Node Express as there’s also some API stuff we needed). All the routing is done by the browser, or then by React under /quote. The script is as follows:
#!/bin/bash from main project folder
echo -e -e "Compiling Hugo pages into reactHugo folder"
cd hugo-static-pages-project
hugo --minify
mv build/ ../reactHugo
cd ..
echo -e -e "Compiling React app into reactHugo folder"
cd react-dynamic-app-project
npm run build
mv build/ ../reactHugo/quote
cd ..
Then serve the common reactHugo folder.
Hope this helps!
3 Likes
Hi Niko,
I like this build and move approach. I am using AWS Amplify for both Hugo and React app. It has
amplify publish
command for deploying website.
Do you know how can I use same approach for deploying at Amplify?
For Hugo I have git hook. So on each push to GitHub; amplify builds and deploys.
As I understand it, amplify publish builds it on their servers. In my above script the “hugo” command builds it on my local computer, and “npm run build” compiles the react app to browser-readable javascript. So once both projects are built into reactHugo you should be able to simply host that reactHugo folder as-is on a server – no more hooks or build steps required. That’s the approach I took. So I don’t know Amplify but to answer your question something like:
#!/bin/bash from main project folder
echo -e -e "Compiling Hugo pages into reactHugo folder"
cd hugo-static-pages-project
hugo --minify
mv build/ ../reactHugo
cd ..
echo -e -e "Compiling React app into reactHugo folder"
cd react-dynamic-app-project
npm run build
mv build/ ../reactHugo/quote
cd ..
# look up the exact command here but something like:
amplify push reactHugo
May work? But I think amplify may have more smarts than you need here (seems to be mainly for dynamic apps with a back-end) – you could literally host the static folder from a github pages here, or find out how to deploy static content – Amplify seems to have added that.
Thanks Niko for finding out about deploying static content. It looks very promising. The current Amplify Publish command does the same actually. It builds locally and deploys to cloud front.
This should work for 80% of the use cases. But in future I plan to add lambda functions to delete inactive users periodically. Also use lambda functions to send customised emails to each user via AWS SES. I want amplify to do the heavy lifting instead of manually setting everything up. But till I get there. I can use manual deploy of static content.
I never thought we can add react directly in Hugo or add static blog to react with NextJS but both are possible now.
I prefer using Hugo over NextJS. But I haven’t seen anyone create a blog post or tutorial on React with Hugo with either Babel or ESBuild.
I have always relied on Create React App to do the setup for me. I have gone through documentation but it assumes you know how to use Babel or ESBuild with react. And I don’t know that.
So any beginners tutorial on just hello world React with Hugo would be great.
1 Like
I am currently in the same boat. Trying to add React to Hugo but importing components does not work. Appreciate any HELP.