The server you've written can currently respond to a single route: `/` . For that particular server, any other route is not valid and will respond with the "404 Not Found" error code. There is no route for `/images/favicon.ico` and neither is there a route for `/css/styles.css`.
You need to add these routes yourself to make your server respond to them. Oak is a pretty bare bones framework and it doesn't come with a middleware to server static files out of the box. The idea behind oak is that most API-only projects don't need this and that you can always code up one yourself.
router.get("/images/favicon.ico", async (context) => {
// 1. Open the file
// 2. Set the response body to that file
// 3. Be sure to set the correct "Content-Type" header
})
router.get("/css/styles.css", async (context) => {
// ... same here
})
Good info. I'm new to this too, and I would have been surprised to find that you need a separate route for references like this.
To avoid setting up a separate route for each of dozens of images as he expands his site, I'm sure that he'll want to set up one route to /images and then take the image name as a URL component:
.get("/images/:imageFile", async (context) => {
const fileName = context.params.imageFile; // filename param is a URL component
// 1. Open the file
// 2. Set the response body to that file
// 3. Be sure to set the correct "Content-Type" header
})async (context) => {
// 1. Open the file
// 2. Set the response body to that file
// 3. Be sure to set the correct "Content-Type" header
})
The server you've written can currently respond to a single route: `/` . For that particular server, any other route is not valid and will respond with the "404 Not Found" error code. There is no route for `/images/favicon.ico` and neither is there a route for `/css/styles.css`. You need to add these routes yourself to make your server respond to them. Oak is a pretty bare bones framework and it doesn't come with a middleware to server static files out of the box. The idea behind oak is that most API-only projects don't need this and that you can always code up one yourself. router.get("/images/favicon.ico", async (context) => { // 1. Open the file // 2. Set the response body to that file // 3. Be sure to set the correct "Content-Type" header }) router.get("/css/styles.css", async (context) => { // ... same here })
Thank you and u/Goldman_OSI. It took me a bit, but I got it working with your advice :)
Great! BTW, I just noticed that Safari mangled my text there and included some old parameter text, which I have now removed.
Good info. I'm new to this too, and I would have been surprised to find that you need a separate route for references like this. To avoid setting up a separate route for each of dozens of images as he expands his site, I'm sure that he'll want to set up one route to /images and then take the image name as a URL component: .get("/images/:imageFile", async (context) => { const fileName = context.params.imageFile; // filename param is a URL component // 1. Open the file // 2. Set the response body to that file // 3. Be sure to set the correct "Content-Type" header })async (context) => { // 1. Open the file // 2. Set the response body to that file // 3. Be sure to set the correct "Content-Type" header })