Functions problems

shadowgaming-backup · September 1, 2024, 9:16pm

I have a website currently on vercel and I want to move it to netlify, but the only problem is functions is not working, I have set a rewrite to functions and it does not work, the same settings is for vercel and if works perfect

Here is the repo:

Here is the website url
https://simple-icons.netlify.app/

shadowgaming-backup · September 1, 2024, 9:17pm

When you go https://simple-icons.netlify.app/github it should show a Github icon

Is vercel website

https://simple-icons-cdn-eight.vercel.app

GitHub icon

https://simple-icons-cdn-eight.vercel.app/github

Settings

nathanmartin · September 2, 2024, 1:37am

@shadowgaming-backup It may not be your issue as I’ve only taken a quick glance, but one thing I see is that you’re treating the configuration for Vercel and Netlify perhaps too similar.

Netlify Rule:

/:iconSlug/:color?/:darkModeColor?/ /api/index 200

Vercel Rule:

{
  "source": "/:iconSlug/:color?/:darkModeColor?",
  "destination": "/api"
}

I’m presuming the ? is Regex since Vercel’s rewrites support it.

Netlify’s rewrites do not.

shadowgaming-backup · September 2, 2024, 6:43am

Can you give ideas how should I do edge functions?

nathanmartin · September 2, 2024, 9:04am

@shadowgaming-backup It’s probably not necessary in your case.

What’s an example URL that should be rewritten?

Is there any reason you can’t just do:

/:iconSlug/:color/:darkModeColor/ /api/index 200

Then perform any additional processing on those placeholder values in the function that executes?

shadowgaming-backup · September 2, 2024, 1:35pm

no, is that that colour and dark mode are optional and at the ended of each url i will add ?viewbox=auto

shadowgaming-backup · September 2, 2024, 1:39pm

it does not work still

shadowgaming-backup · September 2, 2024, 1:40pm

all the files in source folder have function that will execute and the main file is app.js

nathanmartin · September 2, 2024, 10:47pm

@shadowgaming-backup You really should read the Netlify documentation, there isn’t feature parity between Netlify and Vercel’s rewrites/redirects, they’re very different.

As I understand it the Netlify rewrite would require all the values to match and trigger.
So if you wanted placeholders to be optional it would require specifying other rules like:

/:iconSlug/:color/:darkModeColor /api/index 200
/:iconSlug/:color /api/index 200
/:iconSlug /api/index 200

I believe by ?viewbox=auto, you mean that some requests will have it appended like /:iconSlug?viewbox=auto. Netlify’s system would automatically pass that through (as per the documentation here), and you’d only need to specify it if you were doing something specific.

I think one major difference is that Vercel’s system appears to automatically convert the :value items into query string parameters, which is not the case on Netlify.

Netlify

Since your code is attempting to pull the values from the query string parameters:

github.com

shadowgaming-backup/simple-icons-cdn/blob/main/source/app.js#L13


      
          const app = (request, response) => {
          	response.setHeader(
          		'Cache-Control',
          		'public, max-age=86400, s-maxage=31536000, stale-while-revalidate=604800',
          	);
          
          	if (request.method !== 'GET') {
          		return response.status(404).send({status: 404});
          	}
          
          	const {iconSlug, color, darkModeColor, viewbox} = request.query;
          	const icon = getSimpleIcon(iconSlug);
          
          	if (icon) {
          		const iconSvg = getIconSvg(icon, color, darkModeColor, viewbox);
          		response.setHeader('Content-Type', 'image/svg+xml');
          		return response.send(iconSvg);
          	}
          
          	return response.status(404).send({status: 404});
          };

I believe you may want something like:

/:iconSlug/:color/:darkModeColor /api/index?iconSlug=:iconSlug&color=:color&darkModeColor=:darkModeColor 200
/:iconSlug/:color /api/index?iconSlug=:iconSlug&color=:color 200
/:iconSlug /api/index?iconSlug=:iconSlug 200

Note that since it is Next.js it runs other middleware to provide various Next.js functionality.
This means that it isn’t really the standard Netlify experience, so if Next.js has logic sitting between the request and Netlify’s redirects/rewrites engine they may not occur at all.

I don’t see it listed as a limitation on this page:

But just something to be aware of.