Netlify noob here: does "netlify dev" replace "npm start" for my react project workflow?

[JasonLough]

Coming from a react / azure background, Im trying to figure out serverless functions. I think I mostly got it figured out, I just want to be sure Im not “baking anything stupid into my head”.

I have everything working… from localhost:8888 AND my actual site URL. BUT… when I do “npm start” and open localhost:3000 (without netlify dev going), the fetch(…) requests dont work the same.

Im assuming its CORS related, and as far as I can tell, this is whats going on:

netlify dev starts a local api server and exposing it locally, which localhost:8888 can reach.

The www.whatever.com version of the site (the live version) is aware of the functions such as www.whatever.com/functions/functionExample

The npm start version (localhost:3000) is NOT aware of the functions, and nothing is serving them anyway, and CORS is CORS blocking due to policy.

So, is my workflow netlify dev as a replacement to npm start from here on out? Did I miss anything?

Is it OK that my fetch uses relative URLs? fetch(/.netlify/functions/learning)

What if I need to ‘hide’ the endpoints from external access? Like, I only want my site to be able to hit the function endpoints?

Thank you,

-Jason

[jonsully]

Hey @JasonLough!

And welcome to The Community!

You may wan to give this a read-through: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md

You’ve mostly got it - use netlify dev instead of npm start and use localhost:8888 in your browser instead of :3000. Netlify Dev will automatically proxy requests to :3000 from :8888 if it deems it appropriate (e.g. if you’re not calling a function or hitting a _redirects redirect). Otherwise it will run the redirects, functions, etc. on the appropriate paths.

That is why using relative paths to get to your functions works so well across all tiers (local, test environments, and prod).

@JasonLough

What if I need to ‘hide’ the endpoints from external access? Like, I only want my site to be able to hit the function endpoints?

Without getting too deep into it, that’s not super feasible. Anybody can hit your functions if they know the name of them without being on your site (from CLI or otherwise). If you’re doing something sensitive with your functions you may want to add an auth layer to your site. That is totally feasible using Netlify Identity.

Hope that helps!

–
Jon