Looking for help with your Netlify DEV Challenge Submission?
We're here to assist anyone who encounters issues or has questions about Netlify!
Feel free to post your questions or concerns in the comments below, and we'll do our best to provide timely and helpful responses.
Just hearing about this challenge? Read the announcement post here:
Top comments (46)
Have you added the relevant config for external URLs in your netlify.toml: docs.netlify.com/image-cdn/overvie...
The image loads fine: 6638dcc8412073dbc3b09234--benevole...
This is exactly what I told you in my first reply, you need the following in your netlify.toml
Please refer to the documentation.
No, but it would work as long as you request the source image from Unsplash: dev.to/alexanie_/how-to-link-unspl.... I can setup a reproduction for you to explore it, but that defeats the purpose of a challenge in my opinion.
The above one is not my concern I already have an idea about that.
My concern is having an issue with Unsplash or another image API I'm using to pass in netlify image cdn ./netlify/images/?url=unsplash_img_url getting 400 error! attached screenshot in first comment.
Does the URL you are trying to use return a valid image? Could you share the URL or the source image and the URL you're trying to use on Netlify Image CDN?
That URL seems to return a 200 and not a 400. The 200 is coming from the angular-ssr Edge Function. I'd recommend excluding the
/.netlify/images
path from the Edge Function so it goes to the Image CDN.I haven't used the edge function and false SSR in angular.json also still have the same issue
Sorry, this thread is getting really long and this doesn't seem to be a good place to continue a technical debugging session. Do you mind writing in to Netlify Support or creating a forums post?
As for the issue, I'd advise checking if Angular has still deployed any Edge Functions or Redirects that could be affecting this.
Sorry for that. Will post in forums and check the exact issue. Thank you so much for your support!
This is more of a technical question, lets say that we have this piece of code:
How one goes about getting the current siteID and token account? Is this needed to be manually set by the developer? Or can I get the account context to generate these at build time?
I honestly searched in, but this seems a little bit confusing on the foruns as well:
If you're using Netlify Functions v2 or Edge Functions, you don't need to pass the site ID and the token. It's only required if you are trying to use it in API mode: github.com/netlify/blobs?tab=readm...
In that case, you can get your Site ID from the site settings in the UI and the token is a Personal Access Token: docs.netlify.com/api/get-started/#...
Sorry for the follow up, but is this the case for a frameworks that use adapters like Sveltekit or Astro? I seem to have lot of trouble setting up without hard-coding these variables.
Astro (in the latest versions) uses Functions v2, so it should work using just
getStore('name')
in there. SvelteKit on the other hand still uses v1 and until they make some changes, you'd have to use the API access in there. Thread for context: answers.netlify.com/t/107200/16Thanks as lot for your help, I have been trying to make this work for a while now.
First, this does work on Astro using
netlify dev
, but on the moment that I need to build or deploy the application, it fails saying there is no "siteID" and "token", are these variables not available when using a static build? (prerender = true)Also do you have an example of an Astro site getting these variables?
getStore is supposed to be used in server-side code. So it would work in Functions and Edge Functions. During the site build you'd have to specify the site ID and personal access token.
Hello,
I deployed a next app with the v5 runtime, but I can't seem to figure out how to configure it to fetch the images from ".netlify/images?url=1.jpg" rather than the default "_next/image?=1.jpg"
even when running local dev with
netlify dev
I can't get it working.Is there some extra config I'm missing?
Running Next.js Runtime v5 will automatically fetch the images from Image CDN. You don't have to make any special configs for it.
Alright, but it seems to be lacking some of the transforms.
For example, the transforms; blurhash, width, and height in the WIP below only work properly when
edited
while thedefault
is finicky or doesn't work.Default: https://net-gala.netlify.app/_next/image?url=%2Fimages%2F1.jpg&w=384&q=75&fm=blurhash
Manual edit: https://net-gala.netlify.app/.netlify/images?url=%2Fimages%2F1.jpg&w=100&h=500&fm=blurhash
Yeah. Format is not passed on to the Image CDN by default. If you need to pass that, you can either:
next/image
and directly use the<img>
tag with URLs from Netlify Image CDN.next/image
, you can add the following redirect to yournetlify.toml
:Ooh ok, that should work, thanks 👍👍
How do you programmatically delete a blob? I've read the documentation, and the example for deletion is hard-coded.
Suppose my website takes user-submitted reviews. Letting users post their reviews to a Netlify function, then store those reviews as blobs is straightforward.
But what if site owners want to delete some reviews / blobs? It's not possible to delete a blob object from Netlify Blobs UI. It seems like the only way is to call another Netlify function and pass the review id that I want to delete?
As long as you have the key of your blob or some other logic you can use to find the correct blob to delete, this can be done programmatically.
Yeah, that is currently true.
Thanks for taking your time to help!
dev.to/suhainafathimam/netlify-dyn...
Hi,
Does netlify/blobs have a blobURL that can be accessed? Like vercel blob does?
I tried to store audio blob and having a hard time retrieving it on client with Next.js and inserting the blob to audio tag. Is there any approach you would recommend for storing and retrieving audio filea?
Any help would be appreciated!
I've solved this with Netlify functions (or Next.js routes). Add a route/function that reads and delivers the blob you stored.
Then you have extra flexibility here. You can add dynamic params as needed to identify the proper blob to deliver.
Here's an example I built for avatar images. This is code for Astro, but the idea is similar.
Wow! Thanks a lot for your answer. I tried it and it worked!
However, I got another problem when building with
'netlify build'
it keeps generating [MissingBlobEnviroment]. The weird thing is'netlify dev'
worked perfectly fine.I've also linked my site and still stumbled upon the same problem.
Any help would be appreciated!!
[EDIT]: Fixed!! For some unknown reason, fetching action that contains
@netlify/blobs
in a Next.js Server Component cause the issue. I fixed it by calling the action in client component with fetch inuseEffect
.Have you tried this in production yet? I've implemented something similar. I am able to get the image by calling the URL directly, but when I try to use the CDN to transform the image it doesn't work. Works fine locally though. For ref:
EDIT: worked it out. was accessing the query param inside of the try catch
Hey Team,
Is it possible to change my functions region to
syd-1
from the defaultUS East (Ohio) - us-east-2
? I'm in Australia and have my project RDS in Australia. It looks like changing the region is behind a paywall, but I'm only using Netlify for this project, and planetscale is no longer free. My submissions going to be pretty slow otherwise, making multiple round trips for some requests :/Please reach out to Support with your site name.
I’m curious why the prompts suggest using Blob Storage for a podcast-related site, when file size limits are 6/8MB for Functions, and it seems there’s no other way to get a file into Blob Storage when the app is running. Am I missing something?
You could use deploy-specific stores: docs.netlify.com/blobs/overview/#d..., which also support file-based uploads: docs.netlify.com/blobs/overview/#f...
Would that be possible for your application?
EDIT: Noticed that you mentioned when the app is running and you're right about it.
Yep, ok thanks. It’s hard to think of a podcasting application where you wouldn’t want the user to be able to upload an episode lol
Honestly, I just don't know what's happening. I created my first account with Netlify some months ago and I got suspended. I tried to go through the required identity verification process and, although I can't remember what exactly happened, I was unable to complete the process. Now, if I try to log in, I'm still suspended and I also can't do anything about it.
I decided to create another account, but I also got immediately suspended without even seeing the Netlify dashboard with the account.
Just now, I figured I couldn't access both of my previous accounts, and tried to create yet another one, and again, got suspended immediately. Netlify says I should get an email in my inbox on how to do the identity verification, but I got no message whatsoever.
I'm not sure what to do next...
Your best bet is to contact Support with the correct email address.
Hey, one of my submission seems blocked by the dev.to, can't find on the tag of #netlifychallenge, Pick Your Champion, will this affect my participation?