How do you create a 404 Page Not Found Error page in Astro?

404 Page not found pages show up when the user ends up on a route that does not exist. This might be because they included a typo as they manually entered the URL in their browser. It can also happen when they follow a broken link from your site or even an external one. Adding a custom 404 error page to your Astro project is quite straightforward, though. First create a `src/pages/404.astro` file in your project. You can edit this and include layouts, just like you would any other Astro page. You might consider capturing the URL entered, as this can also help you in updating broken links. Anyway, Astro will build this page to /404.html. Importantly, most static site hosts will look there for an error page to render whenever needed.

How can you access a page pathname in Astro?

Pathname is a part of the URL. It comes just after the domain name but excludes any query strings or hashes. For many Astro pages, you will know the pathname from the actual path of the `.astro` file in your project. However, for dynamic routes and 404 pages, this is not obvious. There is another way though! You can get to the pathname in the JavaScript code in your `.astro` files in two steps. First, use the Astro.request API. From `Astro.request`, you will want to destructure `url`. This is a string containing the full URL. To get the pathname, use the JavaScript `URL` API, calling `new URL(url)`. Here, `url` is the URL as a string, which we got in the previous step. From the new URL object, destructure `pathname` and Bob is your uncle!

What JavaScript API is there for manipulating URLs?

The URL API is just fantastic for manipulating URLs. You create a new URL object by calling `new URL(urlString)`. You can you it to parse query strings as well as hashtags. On top, you can easily get the protocol (http or https). It usually makes more sense to you this API than knock up your own RegExp tests. As well as all that, you can try creating a URL object if you are not sure if the input will be a pathname or a full URL. It will only work successfully on the complete URL, so another time saving trick.

Astro JS 404 Page: Create Not Found Error Pages # Astro JS 404 Page: Create Not Found Error Pages #

Astro JS 404 Page: Create Not Found Error Pages #

Published: 3 years ago

4 minute read

Gunning Fog Index: 5.2

Content by Rodney

😕 Astro JS 404 Page #

In this video, we see setting up an Astro JS 404 page is a fairly quick task. We are talking about the page site visitors will see if they try to access a route which does not exist. Typically, a static hosting provider will show their default 404 page if you do not set this up. This might be confusing for visitors, though. We see how we can add replace the default as well as add a link to help the visitor get back home!

Anyway, you came here to see the short video, so hit play below! You can drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.

📹 Video #

Please enable JavaScript to watch the video 📼

Astro JS 404 Page

🗳 Poll #

Do you use an error handling service like LogRocket or Sentry on projects?

🖥 Astro JS 404 Page: Code #

src/pages/404.astro

astro

    1 ---
2 ---
3 
4 <html lang="en-GB">
5 	<head>
6 		<meta charset="utf-8" />
7 		<link rel="icon" href="/icon.svg" type="image/svg+xml" />
8 		<meta name="viewport" content="width=device-width" />
9 		<title>Astro JS 404 Page</title>
10 	</head>
11 
12 	<body>
13 		<main class="container">
14 			<section class="content">
15 				<h1>Page not found!</h1>
16 				<p>
17 					Path not recognised&hellip; <a
18 						aria-label="Return to home page"
19 						href="/"
20 						>Go&nbsp;home?
21 					</a>
22 				</p>
23 			</section>
24 		</main>
25 	</body>
26 </html>

🔗 Links #

🏁 Astro JS 404 Page: Summary #

How do you create a 404 Page Not Found Error page in Astro? #: 404 Page not found pages show up when the user ends up on a route that does not exist. This might be because they included a typo as they manually entered the URL in their browser. It can also happen when they follow a broken link from your site or even an external one. Adding a custom 404 error page to your Astro project is quite straightforward, though. First create a `src/pages/404.astro` file in your project. You can edit this and include layouts, just like you would any other Astro page. You might consider capturing the URL entered, as this can also help you in updating broken links. Anyway, Astro will build this page to /404.html. Importantly, most static site hosts will look there for an error page to render whenever needed.
How can you access a page pathname in Astro? #: Pathname is a part of the URL. It comes just after the domain name but excludes any query strings or hashes. For many Astro pages, you will know the pathname from the actual path of the `.astro` file in your project. However, for dynamic routes and 404 pages, this is not obvious. There is another way though! You can get to the pathname in the JavaScript code in your `.astro` files in two steps. First, use the Astro.request API. From `Astro.request`, you will want to destructure `url`. This is a string containing the full URL. To get the pathname, use the JavaScript `URL` API, calling `new URL(url)`. Here, `url` is the URL as a string, which we got in the previous step. From the new URL object, destructure `pathname` and Bob is your uncle!
What JavaScript API is there for manipulating URLs? #: The URL API is just fantastic for manipulating URLs. You create a new URL object by calling `new URL(urlString)`. You can you it to parse query strings as well as hashtags. On top, you can easily get the protocol (http or https). It usually makes more sense to you this API than knock up your own RegExp tests. As well as all that, you can try creating a URL object if you are not sure if the input will be a pathname or a full URL. It will only work successfully on the complete URL, so another time saving trick.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Just dropped a short video on setting up a custom 404 page in 🚀 Astro JS.

Hope you find it useful!

#learnastro #JAMStack #askRodney https://t.co/a7AwJH0v86
— Rodney (@askRodney) August 15, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.