Sean C Davis for Netlify

Posted on May 2

Netlify Dynamic Site Challenge - Help Thread!

#netlifychallenge #netlify #webdev #javascript

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:

Join us for the Netlify Dynamic Site Challenge: $3,000 in Prizes!

dev.to staff for The DEV Team ・ May 1

#netlifychallenge #devchallenge #webdev #javascript

Top comments (46)

Comment deleted

Hrishikesh Kokate • May 3

Have you added the relevant config for external URLs in your netlify.toml: docs.netlify.com/image-cdn/overvie...

Comment deleted

Hrishikesh Kokate • May 6

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

[images]
  remote_images = [
    "https://images.unsplash.com/.*"
  ]

Please refer to the documentation.

Comment deleted

Hrishikesh Kokate • May 6

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.

chintanonweb • May 6

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.

Hrishikesh Kokate • May 6

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?

Comment deleted

Hrishikesh Kokate • May 6

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.

chintanonweb • May 7

I haven't used the edge function and false SSR in angular.json also still have the same issue

Hrishikesh Kokate • May 7

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.

chintanonweb • May 8

Sorry for that. Will post in forums and check the exact issue. Thank you so much for your support!

Katriel • May 4

This is more of a technical question, lets say that we have this piece of code:

const { getStore } = require("@netlify/blobs");

const store = getStore({
  name: "img-store",
  siteID: **getSiteIdFromContext**,
  token: **getTokenFromContext**,
});

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:

Hrishikesh Kokate • May 4

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/#...

Katriel • May 4

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.

Hrishikesh Kokate • May 4

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/16

Katriel • May 7 • Edited

Thanks 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?

Hrishikesh Kokate • May 8

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.

Nabil Alamin • May 9

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?

Hrishikesh Kokate • May 9

Running Next.js Runtime v5 will automatically fetch the images from Image CDN. You don't have to make any special configs for it.

Nabil Alamin • May 9 • Edited

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 the default 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

Hrishikesh Kokate • May 9

Yeah. Format is not passed on to the Image CDN by default. If you need to pass that, you can either:

Not use next/image and directly use the <img> tag with URLs from Netlify Image CDN.
OR if you want to use next/image, you can add the following redirect to your netlify.toml:

[[redirects]]
  from = "/_next/image"
  status = 200
  to = "/.netlify/images?fm=:format&q=:quality&url=:url&w=:width"
  [redirects.query]
    fm = ":format"
    q = ":quality"
    url = ":url"
    w = ":width"

Nabil Alamin • May 9

Ooh ok, that should work, thanks 👍👍

Trang Le • May 11

How do you programmatically delete a blob? I've read the documentation, and the example for deletion is hard-coded.

export default async (req: Request, context: Context) => {
  const construction = getStore("construction");
  await construction.delete("nails");

  const beauty = getStore("beauty");
  await beauty.delete("nails");

  return new Response("Nail blobs deleted from Construction and Beauty stores");
};

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?

Hrishikesh Kokate • May 11

How do you programmatically delete a blob?

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.

It seems like the only way is to call another Netlify function and pass the review id that I want to delete?

Yeah, that is currently true.

Trang Le • May 13

Thanks for taking your time to help!

SuhainaFathimaM • May 4

dev.to/suhainafathimam/netlify-dyn...

Fazza Razaq Amiarso • May 10 • Edited

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!

Sean C Davis • May 10

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.

import { getStore } from '@netlify/blobs';
import type { APIRoute } from 'astro';
import { User, db, eq } from 'astro:db';

export const GET: APIRoute = async ({ params }) => {
  const userId = parseInt(params.id as string);
  if (!userId || isNaN(userId)) {
    return new Response('Avatar not found', { status: 404 });
  }

  const users = await db.select().from(User).where(eq(User.id, userId));
  const user = users[0];

  if (!user) {
    return new Response('Avatar not found', { status: 404 });
  }

  const userAvatarStore = getStore({ name: 'UserAvatar', consistency: 'strong' });
  const userAvatarBlob = await userAvatarStore.get(user.id.toString(), { type: 'stream' });

  if (!userAvatarBlob) {
    return new Response('Avatar not found', { status: 404 });
  }

  return new Response(userAvatarBlob);
};

Fazza Razaq Amiarso • May 10 • Edited

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 in useEffect.

Matt Lewandowski • May 11 • Edited

You can add dynamic params as needed to identify the proper blob to deliver.

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

import {NextRequest, NextResponse} from "next/server";
import {getStore} from "@netlify/blobs";

const store = () => {
    return getStore({name: 'images', consistency: 'strong'});
}

export const GET = async (request: NextRequest) => {
    try {
        const params = request.nextUrl.searchParams;
        const imageId = params.get("imageId");

        if (!imageId) {
            return NextResponse.json({Message: "Image ID not found", status: 400});
        }

        const blobStore = store();
        const image = await blobStore.get(imageId, {consistency: "strong", type: "blob"});

        if (!image) {
            return NextResponse.json({Message: "Image not found", status: 404});
        }

        return new NextResponse(image, {
            status: 200,
            statusText: "OK",
            headers: {
                'Cache-Control': 'no-store, max-age=0',
                'Pragma': 'no-cache',
                'Expires': '0',
                'Content-Type': 'image/webp',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
                'Access-Control-Allow-Headers': 'Content-Type, Authorization',
            },
        });
    } catch (error) {
        return NextResponse.json({Message: "Failed", status: 500});
    }
};

Matt Lewandowski • May 10

Hey Team,

Is it possible to change my functions region to syd-1 from the default US 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 :/

Hrishikesh Kokate • May 11

Please reach out to Support with your site name.

Jared Weiss • May 12

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?

Hrishikesh Kokate • May 12 • Edited

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.

Jared Weiss • May 12

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

Abdulramon Jemil • May 11

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...

Hrishikesh Kokate • May 11

Your best bet is to contact Support with the correct email address.

Neo Tang • May 13

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?

View full discussion (46 comments)

DEV Community

Netlify Dynamic Site Challenge - Help Thread!

Join us for the Netlify Dynamic Site Challenge: $3,000 in Prizes!

dev.to staff for The DEV Team ・ May 1

Top comments (46)

Read next

React: LinkedIn Access Token in 10 Steps

Next.js Interview Mastery: Essential Questions 71-80 (Part 8)

The No-Fluff Guide to OpenGraph Images That Actually Work 🎯

How to Build a Advanced Portfolio with High-Level Features and Cutting-Edge Technologies for Web Developers and Designers 🚀🌟