#Subpage Shows astro File Code When Running npm run dev

11 messages · Page 1 of 1 (latest)

delicate jetty
#

Hey guys, this is a bit of a weird issue that I don't know how to fix at the moment. I have multiple pages on my .astro site. Here is the structure inside my /src/pages directory:

index.astro
portfolio/
    portfolioPieceOne.astro
    portfolioPieceTwo.astro
    portfolioPieceThree.astro
    ...

My index.astro page is fine.
In my index.astro page, I am trying to use:

<a href="/src/pages/portfolio/portfolioPieceOne.astro">Stuff</a>

...in order to link to the portfolioPieceOne.astro subpage.

NOTE: The reason I'm using a relative filepath to the root of the project directory is because apparently, according to Astro's site, Astro does not support filepaths relative to the current file for <a> tags. Read more about that here: https://docs.astro.build/en/core-concepts/astro-pages/

Anyway. I put npm run dev in Visual Studio Code's command line in order to run the dev server and thus test the site.
When I load index.astro and click on the link to the portfolioPieceOne.astro, the site that loads displays the code pertaining to the portfolioPieceOne astro file, rather than the actual site. It starts with:

---
import Layout from "/src/layouts/Layout.astro";
import Cursor from "/src/layouts/components/cursor/cursor.astro";
---

<Layout title="Chronoblast - Alien Insect">

<Cursor />

</Layout>

This is the code in the portfolioPieceOne.astro file.
How do I fix this? How do I display the actual site?

Docs
Pages

An introduction to Astro pages

slender karma
#

I think just replacing the .astro in the end of your href with a slash and removing the /src/pages prefix should do it

#

The hrefs are meant for the browser, and the astro files get rendered to html files before they reach the browser, so you don‘t use this extension in links

#

Also, you will only be able to see the contents of the source .astro files while using the dev server. As the .astro files are not part of the build output, they will not be accessible when the site is built and hosted somewhere

#

So, the correct link would be:

<a href="/portfolio/portfolioPieceOne/">Stuff</a>
delicate jetty
#

Wait hang on, ahhhhh I found out why

#

I was trying to route the link starting in the root folder of the project. That's why

#

Just fixed it, ty!

slender karma
#

Glad you got it to work! Happy chronoblasting! 😄

delicate jetty