Support images & static assets

[wjhurley]

The app assumes that file.png is actually a .js file and tries to import file.png.js, which it cannot find. Create-react-app allows for importing files other than .css and .js, but StackBlitz does not.

[EricSimons]

@wjhurley we're working on adding support for static assets 🙌 should ship later this month/early next! Till then I'd recommend using asset hosts like S3, etc (or sites like Imgur for images specifically)

[DenysVuika]

Hello guys, do you have any updates on the static resources and "assets"?

[Misiu]

Hi guys, any news?
I'm trying to move entirely to StackBlitz, but I can't because of missing static assets.
I need to create couple of vanilla js files and reference them in index.html, but currently I can't 😢

Please take a look at:
https://stackblitz.com/edit/microcharts?file=index.js
How can I reference microchart.js in index.html or index.js?

[EricSimons]

Hey all- really sorry about our delay on this, we've been completely slammed fixing/upgrading countless things. Static asset support has also proven to be a more difficult challenge than we originally anticipated, particularly because all of this would be happening inside your browser (the stackblitz dev server lives within your browser's service worker) and ensuring reliability/stability+ backwards compatibility for older browsers isn't particularly straightforward.

That said, the good news is that we've been slowly chipping away at this and have finally sorted the large technical challenges. Current ETA is 2-4 weeks, but we're also giving a talk at ng-conf at the end of April that might affect that window by a week or so.

As we make progress on this I'll circle back here and update y'all. Thanks for being so patient & awesome! 🍻

[urish]

@EricSimons any updates on this? anything I can do to help?

[andregomars]

please give updates

[jhildenbiddle]

Adding yet-another-voice to the static asset request.

I have a demo that I would like to make available on StackBlitz, and it requires one file to request another using XMLHttpRequest. I was unable to get this working, and this issue explains why.

Accessing the file via HTTP is related to #133. The fact that the demo is bread-and-butter HTML+CSS+JS means my particular issue is also related to #179 and #340.

Thanks, and keep up the great work!

[michahell]

If you only need several (small) images in your blitz, you can base64 them as a temporary workaround:
<img src={base64'ed blob} /> using, for example, https://www.base64-image.de/

[michahell]

@DenisVuyka no. It's a temporary workaround for if you have a bunch of (small) images you'd like to use, but I should have commented this in the related images only issue, I now see this was about assets in general. I've modified my comment accordingly

[seveves]

@DenisVuyka I'm pretty sure that @michahell 's intent was to help you and he wasn't kidding at all. At the moment there is no support for static assets (yet!). So please be patient or find a workaround (uploading static files to github, dropbox or whatever and link them from there). Shouldn't be a big deal for a capable developer.

[idevthings]

Any ETA? Last one was 12 weeks ago if I am not wrong.

I love stackblitz btw, great tool. Keep up the good work!

[SuganNaickerf]

Hi, Love StackBlitz. Any update on the static assets? Thanks.

[kumaresan-subramani]

Hi,
i am also facing sample issue. please inform me also when this issue get fixed.
angular/angular#27531

any workaround for this?

[EmilHelle]

Any idea when this feature can be expected?

[Insira]

any update on this feature?

[EricSimons]

@weilies this week has been a tough one on our end, I'm really sorry about my delay on responding to your email. I'm going to chunk some time out this weekend to investigate the issues you're running into.

Btw, later this year we're rolling out a huge upgrade to SB that makes it truly a desktop-class IDE, which will solve a lot of the issues described here/bring parity with your local envs. Would love to have you beta test that if interested!

[urish]

@EricSimons how do I join the beta?

[weilies]

count ME IN!!! @EricSimons LOVE U!

[skamble89]

Any update on this??

[mart2k]

@weilies this week has been a tough one on our end, I'm really sorry about my delay on responding to your email. I'm going to chunk some time out this weekend to investigate the issues you're running into.

Btw, later this year we're rolling out a huge upgrade to SB that makes it truly a desktop-class IDE, which will solve a lot of the issues described here/bring parity with your local envs. Would love to have you beta test that if interested!

"later this year" ... aha ... year is almost over. Any updates on this?

[weilies]

i guess we should still treat StackBlitz for hobby project. I have a crucial project so i moved to other platform for serious development. @EricSimons sorry. I still love StackBlitz for the quick adoption. For demo or testing, i still use SB.
But i understand, making it a 100% reliable dev platform it does takes time~

[carlba]

Stackblits is perfect except this one problem. It already can host static files but it does not provide the correct mime type for them.

[haakon-io]

Sad face :(

[earshinov]

I've given up on StackBlitz and migrated to CodeSandbox, which I advise you to do as well.

[EricSimons]

Hey everyone- I apologize for the delay on the update here. We actually shipped static asset support in 2020, so you can drag & drop to upload images and other binary files and they should upload 100% correctly. If you're seeing functionality otherwise please lmk.

Additionally, our v2 version is (finally) on production behind a feature flag- this is the thing I mentioned in an earlier post that brings desktop grade editing to StackBlitz. It solves the issues regarding linking to uploaded binary files because it's running the entire Angular CLI/create-react-app/etc CLIs themselves instead of our custom in-browser bundler. If you'd be interested in trying out the alpha please email me at eric@stackblitz.com and I'll get the feature flag added to your account, our team would love to hear your feedback. ETA for general availability of this is late April or May 2021 (i.e. 30-60 days from now).

@earshinov @haakon-io I'd love to understand what exact issues you ran into and if you'd be up for trying out v2 🤗

[EricSimons]

And actually, to shed some extra color on what the heck we've actually been up to and why it's taken so long for this to ship- you can take a look at the first public preview of our new v2 product on the AngularAir podcast from a few weeks back where I covered this in great detail.

[weilies]

hi Eric let me share bit from my personal exp after many months of using StackBlitz. It's cool, pick and run to test on certain package. But i also noticed one thing, when there are packages required some other depencies, sometime it failed me. It stuck at the 'compiling screen' and sorry i couldn't have a project upgrade. I basically scrap the project and move on to CodeSandBox, which is much more easy to get the installation up and running.

Some packages i experienced the compiling forever issue are like formio, primeNG, some calendar widget. i didn't capture every single failure of StackBlitz.
And in CodeSandbox, it's not perfect as well. Coz i noticed after it run for awhile, those package i mentioned above cause the editor freeze (for no reason)

My best development experience so far is via Google Cloud shell, but again it required you to arrange every folders, installation our own, lots of time we gotto read the compile/build errors. no choice.

My development workflow now,
Proof of concept - StackBlitz, then CodeSandbox
Production/Development - Google Cloud Shell.

[EricSimons]

@weilies thanks so much for posting this detailed writeup- this makes a ton of sense. I think the main reason you've run into issue with both StackBlitz and CodeSandbox is that both options currently 'emulate' the Angular CLI/create-react-app/etc instead of running the CLIs themselves. This leads to divergence in compatibility and unexpected issues (like this github issue, and many others on ours & Codesandbox's issue tracker).

Our v2 product solves this problem by running the CLIs themselves, similar to how Google Cloud shell works- except StackBlitz v2 executes these up to 5x faster (more info here). Would you be interested in trying out the alpha? If so, please shoot me an email and I'll get you hooked up- eric@stackblitz.com ❤️

[weilies]

My product is LIVE and the forge is already root in Google. I can't afford to uproot and migrate to StackBliz. At least for coming few years. But i do happy to test for you, as i POC package before bring them into my development workspace. Will email u now

[haakon-io]

@EricSimons - I was trying to use some HTML tags to test some things out, then I discovered that I can't use images in StackBlitz. That is why the sad face.

[arikanorh]

Is static js import supposed to work?
import Twitch from 'src/assets/scripts/twitch.js';

The script exists there but compiler gives error

Cannot find module 'src/assets/scripts/twitch.js' or its corresponding type declarations.

Note:This is working perfect locally

[ralflukner]

It's sad that static images are not supported.

[timshaw9791]

@EricSimons thanks for great StackBlitz
I'm a vite+vue3 developer, it looks like only the 3th method is supported until now? do I miss something?

[Slluxx]

i need exactly this too.
@timshaw9791 's case 1 should definitly work.

sad that this issue is open since 2017.

[BioPhoton]

Would be really cool to have this working. Any official plans on that?

[rba1aji]

@EricSimons thanks for great stackblitz. Still no update on static assets? what is an optimal alternative?

[pct-cclausen]

It somewhat surprises me that such a basic thing still does not seem to work?
This is a deal breaker to use stackblitz for anything serious I think.

Sad, stackblitz is a pretty cool idea :(

[karlji]

It's still not working. It's pretty sad because it is a deal breaker.

[frankstepanski]

So you still cannot reference images uploaded in a Raact app?

[cgatian]

No

[QuangDuke]

Hey, just wonder how's t going with the feature update? its 2024 now

[frankstepanski]

Same

[Jmadih]

7 years later... no assets support yet. No big deal, good luck guys!

I think the feature is available only for premium users : https://angular-ivy-phwyr1.stackblitz.io/

I've run the same app and i'm getting this url (****)-12d46890.local-credentialless.webcontainer.io/assets/data.json

(0;0) credentialless...