DEV Community

Netlify Dynamic Site Challenge - Help Thread!

Sean C Davis on May 02, 2024

Looking for help with your Netlify DEV Challenge Submission? We're here to assist anyone who encounters issues or has questions about Netlify! Fe...
Read full post
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
hrishikeshk profile image
Hrishikesh Kokate •

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

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
hrishikeshk profile image
Hrishikesh Kokate •

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/.*"
  ]
Enter fullscreen mode Exit fullscreen mode

Please refer to the documentation.

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
Sloan, the sloth mascot
Comment deleted
 
hrishikeshk profile image
Hrishikesh Kokate •

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.

Thread Thread
 
chintanonweb profile image
chintanonweb •

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.

Thread Thread
 
hrishikeshk profile image
Hrishikesh Kokate •

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?

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
hrishikeshk profile image
Hrishikesh Kokate •

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.

Thread Thread
 
chintanonweb profile image
chintanonweb •

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

Thread Thread
 
hrishikeshk profile image
Hrishikesh Kokate •

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.

Thread Thread
 
chintanonweb profile image
chintanonweb •

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

Collapse
 
katriel profile image
Katriel •

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**,
});
Enter fullscreen mode Exit fullscreen mode

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:

  1. github.com/netlify/blobs
  2. docs.netlify.com/blobs/overview/
Collapse
 
hrishikeshk profile image
Hrishikesh Kokate •

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

Collapse
 
katriel profile image
Katriel •

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.

Thread Thread
 
hrishikeshk profile image
Hrishikesh Kokate •

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

Thread Thread
 
katriel profile image
Katriel • • 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?

Thread Thread
 
hrishikeshk profile image
Hrishikesh Kokate •

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.

Collapse
 
arndom profile image
Nabil Alamin •

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?

Collapse
 
hrishikeshk profile image
Hrishikesh Kokate •

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

Collapse
 
arndom profile image
Nabil Alamin • • 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

Thread Thread
 
hrishikeshk profile image
Hrishikesh Kokate •

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"
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
arndom profile image
Nabil Alamin •

Ooh ok, that should work, thanks 👍👍

Collapse
 
bytrangle profile image
Trang Le •

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");
};
Enter fullscreen mode Exit fullscreen mode

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?

Collapse
 
hrishikeshk profile image
Hrishikesh Kokate •

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.

Collapse
 
bytrangle profile image
Trang Le •

Thanks for taking your time to help!

Collapse
 
suhainafathimam profile image
SuhainaFathimaM •

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

Collapse
 
fazzaamiarso profile image
Fazza Razaq Amiarso • • 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!

Collapse
 
seancdavis profile image
Sean C Davis •

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);
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
fazzaamiarso profile image
Fazza Razaq Amiarso • • 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.

Collapse
 
mattlewandowski93 profile image
Matt Lewandowski • • 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});
    }
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mattlewandowski93 profile image
Matt Lewandowski •

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

Collapse
 
hrishikeshk profile image
Hrishikesh Kokate •

Please reach out to Support with your site name.

Collapse
 
jaredcodes profile image
Jared Weiss •

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?

Collapse
 
hrishikeshk profile image
Hrishikesh Kokate • • 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.

Collapse
 
jaredcodes profile image
Jared Weiss •

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

Collapse
 
abdulramonjemil profile image
Abdulramon Jemil •

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.

Image description

I decided to create another account, but I also got immediately suspended without even seeing the Netlify dashboard with the account.

Image description

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

Collapse
 
hrishikeshk profile image
Hrishikesh Kokate •

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

Collapse
 
tangweikun profile image
Neo Tang •

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?

Collapse
 
kacemm profile image
kassem •

@seancdavis can i use netlify cdn to built another type of projects instead of image gallery ?

Collapse
 
seancdavis profile image
Sean C Davis •

It has to include an image gallery, but you can be creative with how that information is presented and experienced. Here are ideas for inspiration:

The DEV Team

Let’s Get Dynamic! Ideas for the Netlify Dynamic Site Challenge

dev.to staff for The DEV Team ・ May 7

#netlifychallenge #devchallenge #webdev #javascript
Collapse
 
bigwebdeveloper profile image
Azeez Ishola Oloto •

Hello, I'm a frontend developer proficient in ReactJS, HTML, CSS, and JavaScript. Could you provide a brief overview of this thread and its contents?

Collapse
 
nurasad profile image
Ainur Saduova •

I have a question about submission. After creating a post on Dev, can I still work on the project, or should the demo provided be the final submission?