Destiner's notes

Using Astro Aliases

21 February 2022

Using aliases is a great way to make your import paths a bit more readable.

Start by initializing an Astro site:

bash
npm init astro -- --template blog-multiple-authors

Edit the tsconfig file to include the global path:

json
{
"compilerOptions": {
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}

Now you’re able to use import paths. For example, you can rewrite imports of the src/pages/index.astro file:

ts
import MainHead from '@/components/MainHead.astro';
import Nav from '@/components/Nav.astro';
import Pagination from '@/components/Pagination.astro';
import PostPreview from '@/components/PostPreview.astro';
import authorData from '@/data/authors.json';

You can learn more about aliases in the docs.