Import Aliases in 4 minutes!

[@lukecartwright613]

Another super video!
You can also add to your Vs code settings these lines:
"typescript.updateImportsOnFileMove.enabled": "always"
To get vs code to automatically update the file path. (Obviously replacing with JavaScript if your project isn't using ts)

[@CodinginPublic]

Oh, cool! I know some of my extensions do that, but didn't know there was a VSCode setting. I'll add it! Thanks!

[@TheAlphaGames]

The best way to also explain it is that import aliases changes your RELATIVE import declarations to ABSOLUTE imports so that way its always starting from the same point, which is why it works!

[@sonny5497]

thanks this was exactly what i was looking for in astro as i was using path aliase in nextjs

[@CodinginPublic]

Aliases are the best!

[@CodinginPublic]

And thanks to Dante for calling out my error in my previous video 🤦‍♂! I literally have like 20 projects right now on my computer using js imports and just had a brain fart last night when recording quickly since I've been using it in TS.

[@zorua7017]

You might want to look into using barrel files, that would simplify your import statements.
Currently:
import Heading from "@ui/Heading.astro":
import Section from "@ui/Section.astro";
Using barrel files:
import { Heading, Section } from "@ui/index"

[@CodinginPublic]

Yes! Great addition!

[@pietro_dev_07]

you can put only:
import { Header, Section } from "@ui"
you can omit index!

[@chrishanthacosta4093]

Good work, I love your way of teaching!

[@CodinginPublic]

Glad to hear that!

[@bobdpa]

Thanks Chris!

[@CodinginPublic]

Glad you enjoyed it!

[@jjaimealeman]

ooo, you gotta add this to your new Astro course 💥 🚀 😎 👍

[@CodinginPublic]

Done ☺️

[@subhashgn1775]

I have tried, this doesnt work with create-react-app. The reason may typescript has removed this support.
Can you please confirm on this.

[@patrickdavidreiner]

Fantastic, thank you 🙏🏼

[@CodinginPublic]

Glad you enjoyed it!

[@leonardoroic8978]

Another useful video from Chris, no surprises here. :)

[@CodinginPublic]

Thanks, my friend 🙏

[@spacecoder0526]

Could you make astro tutorial about how to render multiple array images in mdx and astro file with react component like passing images array to the component to render or something?

[@aryomuhammad8254]

good one!

[@CodinginPublic]

Thank you! Cheers!

[@siya.abc123]

Thanks man

[@CodinginPublic]

You’re welcome!

[@szymon7932]

nice! What is the theme u are using?

[@CodinginPublic]

I think community material theme?

[@kelsey_roy]

What about unit tests?

[@CodinginPublic]

The aliases should still work? Are you having problems with them?

[@rakib_bhai74]

Not working in express app with js

[@CodinginPublic]

Hmm. What problems are you having?

[@aogunnaike]

Wow 😂 finally seeing your face for the first time this year 😂 you look beautiful 😍😅

[@CodinginPublic]

lol um thanks? 💁‍♂️ 💅

[@kushalmondal618]

Next js supports it out-of-box feature.....And Nust js don't need to import anything....how crazy is that🌰🌰🌰BTW your Vscode file icon themes seem cool in Astro Stack......🎉

[@CodinginPublic]

Yep, Next asks you if it can just set it up out of the box. I would love for the Astro CLI to do this personally (or enable it with a flag?)

[@mohamedyamani8502]

Aliases are cool, but they don't solve the issue you're talking about of moving a file, they're just another way to represent the same path, no?

[@CodinginPublic]

Because it’s always starting at the root path, it will be consistent. References to that file will need to be updated (which many IDEs will update automatically, but the big advantage is that when referencing other files, you don’t have to traverse and figure out what level everything us at. Components are always @components, for instance.