I am trying to deploy a React app (create-react-app).
This is a simple app without any server or routes.
After successfully running the following commands. My site is deployed.
xdn init
xdn deploy
But the problem is the link that is given to me after deployment is taking me to Moovweb documentation page.
I think I am missing any step or something.
P.S. same is seen with xdn run command and Vue app created with vue create hello-world
Can you post the contents of routes.js?
const { Router } = require('@xdn/core/router')
// const ONE_HOUR = 60 * 60
// const ONE_DAY = 24 * ONE_HOUR
module.exports = new Router()
// Here is an example where we cache api/* at the edge but prevent caching in the browser
// .match('/api/:path*', ({ proxy, cache }) => {
// cache({
// edge: {
// maxAgeSeconds: ONE_DAY,
// staleWhilRevalidateSeconds: ONE_HOUR,
// },
// browser: {
// maxAgeSeconds: 0,
// serviceWorkerSeconds: ONE_DAY,
// },
// })
// proxy('origin')
// })
// send any unmatched request to origin
.fallback(({ proxy }) => proxy('origin'))
In this case you’re proxying all requests to the origin backend configured in xdn.config.js.
Instead, I think you want to use serveStatic to serve from the built version of your react app.
See https://developer.moovweb.com/guides/cookbook#section_serving_a_static_file, particularly the second example, which can likely be adapted to your purposes:
router.fallback(({ serveStatic, cache }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24, // cache at the edge for 24 hours
},
browser: {
maxAgeSeconds: 60 * 60 * 24, // cache for 24 hours
},
})
serveStatic('build/:path*')
})
I will try to implement it.
Thanks 
I changed my routes.js file to this
const { Router } = require("@xdn/core/router");
// const ONE_HOUR = 60 * 60
// const ONE_DAY = 24 * ONE_HOUR
module.exports = new Router().get("/build/:path*", ({ serveStatic, cache }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24, // cache at the edge for 24 hours
},
browser: {
maxAgeSeconds: 60 * 60 * 24, // cache for 24 hours
},
});
serveStatic("build/:path*");
});
Now I am seeing an XML document.
@mark.brocato
Fixed it
Thanks for all your help.
const { Router } = require("@xdn/core/router");
// const ONE_HOUR = 60 * 60
// const ONE_DAY = 24 * ONE_HOUR
module.exports = new Router().get("/:path*", ({ serveStatic, cache }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24, // cache at the edge for 24 hours
},
browser: {
maxAgeSeconds: 60 * 60 * 24, // cache for 24 hours
},
});
serveStatic("build/:path*");
});
https://ashutosh-kumar-singh-react-material-ui-example-default.moovweb-edge.io/
@mark.brocato
I tried to replicate the process but am facing the same issue of XML document.
routes.js
const { Router } = require("@xdn/core/router");
// const ONE_HOUR = 60 * 60
// const ONE_DAY = 24 * ONE_HOUR
module.exports = new Router()
.get("/", ({ serveStatic, cache }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24, // cache at the edge for 24 hours
},
browser: {
maxAgeSeconds: 60 * 60 * 24, // cache for 24 hours
},
});
serveStatic("build/:path*");
});
https://ashutosh-kumar-singh-react-example-deploy-default.moovweb-edge.io/
The previous React app got deployed successfully using the above routes.js but not this one. I am a little confuse at this point, please help.
P.S. I am writing a blog on this, so I want to make sure there are no issues and anyone following the steps is able to deploy a React app successfully.
@lelouchB the code above is referencing a param (i.e. :path* in the arguments to servestatic) that isn’t in the route specified by the first argument to .get
notice the https://developer.moovweb.com/guides/cookbook#section_serving_a_static_file has something like this (slight changed for illustration purposes):
router.get('/assets/:path*', ({ serveStatic, cache }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24, // cache at the edge for 24 hours
},
browser: {
maxAgeSeconds: 60 * 60 * 24, // cache for 24 hours
},
})
serveStatic('special/assets/:path*')
})
the above code is basically saying if a GET request comes in for /assets/foo/bar , then extract the foo/bar part into the :path* variable. Then later on the servestatic fetches the file at special/assets/:path*, which in this case becomes special/assets/foo/bar.
In your code serverstatic had a :path* variable but the parent route in the .get call did not.
you likely just want to change your .get call to match. something like:
.get("/:path*", ({ serveStatic, cache }) => {
@ianand
I updated the routes.js to the following and still facing the same issue.
const { Router } = require('@xdn/core/router')
// const ONE_HOUR = 60 * 60
// const ONE_DAY = 24 * ONE_HOUR
module.exports = new Router()
.get("/:path*", ({ serveStatic, cache }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24, // cache at the edge for 24 hours
},
browser: {
maxAgeSeconds: 60 * 60 * 24, // cache for 24 hours
},
});
serveStatic("build/:path*");
});
https://ashutosh-kumar-singh-react-photo-search-default.moovweb-edge.io
The site is available at https://ashutosh-kumar-singh-react-photo-search-default.moovweb-edge.io/index.html
This is working
Is this okay?
const { Router } = require("@xdn/core/router");
// const ONE_HOUR = 60 * 60
// const ONE_DAY = 24 * ONE_HOUR
module.exports = new Router().get("/", ({ serveStatic, cache }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24, // cache at the edge for 24 hours
},
browser: {
maxAgeSeconds: 60 * 60 * 24, // cache for 24 hours
},
});
serveStatic("build/index.html");
});
A better solution was posted here: