DEV Community

Pacharapol Withayasakpunt
Pacharapol Withayasakpunt

Posted on

How do you deploy frontend and backend separately?

Initially, the idea comes from Now.sh, where frontend is static, backend is serverless. The website loads faster, but when we need an API, there will be a little warm-up time.

But what if I want a full-blown powerful backend? (I use Fastify, actually.)

I plan to put backend on Heroku, as I am not sure about the cost if I put on Google Cloud Run...

For frontend, I'll just put on Netlify. An issue with Now.sh is just it knows too much. It won't let you host a static site without building first, for instance.

My concern is security. OK, I can use a CORS header on Heroku side, but do I need some kind of API secret to protect the API? If so, how do I put API secret on Netlify?

Discussion (6)

Collapse
dtinth profile image
Thai Pangsakulyanont • Edited
  • Most things that runs on client-side can be tampered with, if they so choose to, they could inspect your page (or just look at the network requests) and extract out the API key.

  • If you try out Google APIs, they let you generate a key and restrict it by HTTP Referrer.

  • You can also use Netlify’s proxy to put both the front-end and back-end under the same domain, eliminating problems with CORS.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt Author

Thanks. If it's netlify.toml, it is easy to hide.

Collapse
chathula profile image
Chathula Sampath

Heroku is also bit slow for me.i would prefer gcp or aws(non serverless way as u say it is slow).

If you are looking for budget vms.digitalocean is the option.

Collapse
jsn1nj4 profile image
JSn1nj4‍‍👨‍💻

Heroku is slow on paid plans?

Collapse
chathula profile image
Chathula Sampath

I am not happy with the price to performance. Serverless is much better. Heroku also takes time to spin up

Collapse
bitdweller profile image
Pedro Pimenta

You can set environment variables on the Netlify dashboard just like Heroku: docs.netlify.com/configure-builds/...