Astro-dev-only-routes NPM

Table of contents

Why `astro-dev-only-routes`?

Astro is a great tool for building static websites. However, it doesn't have a way to make some routes only available in dev mode, which could be useful for testing purposes, dashboards, design systems, etc.

astro-dev-only-routes is an Astro integration that allows you to make some routes only available in dev mode.

Many Thanks to all the Stargazers

🚀 Demo

Try out the minimal demo.

💻 Quickstart

To get started, you can install astro-dev-only-routes with the astro add CLI tool

# Using NPM
npx astro add astro-dev-only-routes

# Using YARN
yarn astro add astro-dev-only-routes

# Using PNPM
pnpm astro add astro-dev-only-routes

Now that you have installed the integration, you can add dev-only routes by prefixing the route with double underscores (__).

Create a new file in the src/pages directory and name it __secret-panel.astro. This page will only be available in dev mode.

// src/pages/__secret-panel.astro
---
console.log('This page is only available in dev mode.')
---

<h1>Secret Page</h1>
<p> This page is only available in dev mode. </p>

That's it! Now you can run astro dev and navigate to http://localhost:3000/__secret-page to see the page. Try running astro build and you will see that the page is not included in the build.

🐛 Known Issues

index.astro routes need to be reference with the index part instead of just /. It's technically possible to fix that but there's a bug in Astro that maskes the fix cause those routes to collide with the root index.astro route, even though that's not the case. Gonna open an issue for that.