Serving create-react-blog in subdirectory - node.js

Question

I need to serve a blog created with create-react-blog in the /blog subdirectory on my main site. It is served alongside other separate projects created w/ create-react-app (the NodeJS code looks like this):
app.use("/blog", express.static(path.join(__dirname, "projects/blog")))
app.get("/blog", (req, res) => {
res.sendFile(path.join(__dirname, "projects/blog/index.html"));
});
app.get("/blog*", (req, res) => {
res.sendFile(path.join(__dirname, "projects/blog/index.html"));
});
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req,res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
Where the 'build' folder contains the react production build for the main site and 'projects/blog' contains the build files for the blog created with create-react-blog
Navigating to http://localhost:3001/blog with this system does indeed render the blog project, but presumably because Navi was built to used from the head directory the blog returns its 404 page. I can then only view the blog if I use the return link on the 404 page to navigate to http://localhost:3001/ (note: just navigating to http://localhost:3001/ without going through the blog page properly renders the other react project)
I've tried changing the homepage in the package.json of the blog to both /blog and ., changing the basename of the Router in the blog project's index.js to /blog, changing the PUBLIC_URL environment variable to blog and http://localhost:3000/blog, and changing the navi.config.js file to add /blog in front of each item in the getPagePathname function (from
import path from 'path'
export const renderPageToString = require.resolve('./src/renderPageToString')
/**
* Get the file to write each URL to during the build
*/
export function getPagePathname({ url }) {
if (url.pathname === '/rss') {
return 'rss.xml'
}
if (url.pathname === '/') {
return 'index.html'
}
return path.join(url.pathname.slice(1), 'index.html')
}
to
import path from 'path'
export const renderPageToString = require.resolve('./src/renderPageToString')
/**
* Get the file to write each URL to during the build
*/
export function getPagePathname({ url }) {
if (url.pathname === '/blog/rss') {
return 'rss.xml'
}
if (url.pathname === '/blog/') {
return 'index.html'
}
return path.join('/blog/', url.pathname.slice(1), 'index.html')
}
), none of which worked. I've also tried random combinations of the above approaches, which were also unsuccessful.
Please let me know how this would be accomplished. Thanks

Answer 1

After many hours, I was able to move the blog in a fairly roundabout way.
Starting from the template found in the main Github repo mentioned in the first paragraph of the question, I had to do the following combination of things:
Change all '/' routes in routes/index.js to /blog/<route> (i.e. / became /blog, /page became /blog/page etc.
Change the blogRoot in the withContext statement to just state /blog
Change isViewingIndex to req.path === '/blog' || /^\/page\/\d+$/.test(req.path)
In the crawlRoutes function in tags.js, add root='/' to the beginning of the function
Change navi.config.js to
import path from 'path'
export const renderPageToString = require.resolve('./src/renderPageToString')
/**
* Get the file to write each URL to during the build
*/
export function getPagePathname({ url }) {
if (url.pathname === '/blog/rss') {
return 'rss.xml'
}
if (url.pathname === '/blog') {
return 'index.html'
}
return path.join('/blog', url.pathname.slice(1), 'index.html')
}
Change renderPageToString.js to
import renderReactPageToString from 'react-navi/create-react-app'
import renderRSSFeedToString from './renderRSSFeedToString'
/**
* navi-scripts will call this function for each of your site's pages
* to produce its statically rendered HTML.
*/
async function renderPageToString(props) {
if (props.url.pathname === '/blog/rss') {
return await renderRSSFeedToString(props)
}
return renderReactPageToString(props)
}
export default renderPageToString
Of course, you can make this cleaner by changing /blog to be an environment variable (which I highly recommend).
If there is any better solution I am also open to it.