Are there any examples of setting up the XDN router for create-react-app?
1 Like
Yes, see the Create React App Example.
Hey @mark.brocato
I tried the example and this is what I experienced.
- The website is not published at
/
route as it should but atindex.html
route. Maybe because of
.get('/:path*', ({ cache, serveStatic }) => {
cache(edgeOnly)
serveStatic('build/:path*')
})
- I think
appShell('public/index.html')
underfallback()
should beappShell('build/index.html')
since the website is generated underbuild
directory.
(I maybe completely wrong about this and there maybe a reason for usingpublic/index.html
, in which case I want to apologize for this suggestion.)
Thanks
I’ve tweaked the example a bit. This should be more correct:
// routes.js
const { Router } = require('@xdn/core/router')
const ONE_HOUR = 60 * 60
const ONE_DAY = 24 * ONE_HOUR
const ONE_YEAR = 365 * ONE_DAY
const edgeOnly = {
browser: false,
edge: { maxAgeSeconds: ONE_YEAR },
}
const edgeAndBrowser = {
browser: { maxAgeSeconds: ONE_YEAR },
edge: { maxAgeSeconds: ONE_YEAR },
}
module.exports = new Router()
.prerender([{ path: '/' }])
// js and css assets are hashed and can be far-future cached in the browser
.get('/static/:path*', ({ cache, serveStatic }) => {
cache(edgeAndBrowser)
serveStatic('build/static/:path*')
})
// all paths that do not have a "." as well as "/"" should serve the app shell (index.html)
.get('/:path*/:file([^\\.]+|)', ({ cache, appShell }) => {
cache(edgeOnly)
appShell('build/index.html')
})
// all other paths should be served from the build directory
.get('/:path*', ({ cache, serveStatic }) => {
cache(edgeOnly)
serveStatic('build/:path*')
})
1 Like
This works great.
Thanks @mark.brocato