Easier way to reference assets

Glitch Feedback
1

Right now, assets must be referenced via their automatically generated CDN url, like: https://cdn.hyperdev.com/us-east-1%3A854d351f-84ed-4a7a-9fc9-bba1d0555cc6%2Fweathericons-regular-webfont.woff.

This makes it harder to use libraries like weathericons. The installation instructions assume the assets (fonts) can all be dumped in a directory relative to the CSS file.

The work-around is to manually edit the CSS file to refer to the CDN addresses. Thankfully weathericons only has 5 assets.

Is there any way to integrate the assets into the project folder hierarchy?

3 Likes
2

@etamponi put together an example project, assets.js, which allows you to use any path to serve your assets: https://hyperdev.com/#!/project/checker-spike

But we’ll also be looking into ways to make the assets more user-friendly.

3 Likes
3

Hi Gareth -
Your project URL 404s for me… has there been any update on this?

I’m considering using Glitch for a beginner front-end course this semester and it would be helpful to have a way to reference assets using relative paths to give students the opportunity to understand the difference between absolute and relative.

Thanks!

4

Yes, it’s at https://glitch.com/edit/#!/assets-lib

2 Likes
5

Thanks Gareth -
I’m wondering if there has been any progress on supporting this natively? Your project is definitely useful but I think it’s a bit too much overhead for beginner students (most have little to no experience with even HTML).

6

We now provide the ability to create a website, rather than an app, when creating a new project which is easier for inexperienced users to get started.

But specific to relative URLs, no, so if they’re essential to your course I suggest creating a template project which has assets-lib setup already that your students can remix from to get started. You can use .gitignore to hide those files from the file tree if you think they’ll be confusing.

7

Gotcha - wasn’t aware gitignore’d files were also invisible in the web interface. Very helpful, thanks!

2 Likes
8

What I usually do for my projects in Glitch is to expose the public folder as a static directory through my web server for small assets. Asset-lib also works if you don’t to run out of space.

1 Like
9

Am I right in thinking this works for Node apps only and not basic web pages?

1 Like