Router for create-react-app

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 at index.html route. Maybe because of
.get('/:path*', ({ cache, serveStatic }) => {
    cache(edgeOnly)
    serveStatic('build/:path*')
  })
  • I think appShell('public/index.html') under fallback() should be appShell('build/index.html') since the website is generated under build directory.
    (I maybe completely wrong about this and there maybe a reason for using public/index.html, in which case I want to apologize for this suggestion.)

Thanks :slight_smile:

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