I've never used Gatsby, and the webpack work I do is usually with vue.js, but if your webpack dev server is communicating with an API, yes.
I run similar containers (Django for back-end, vue.js for front-end) on my dev machine as in production.
The difference is I serve a built SPA from nginx in production, and run the nodejs server in dev - but then I still have an nginx container for routing.
I point my base URL to /api/ (or often to /graphql/), then it doesn't matter whether I access my dev site through localhost, or dev.example.com, or if I access staging.example.com, or just example.com in production... It Just Works™.
I guess the trick here is that both your backend and frontend are at the same origin because of docker, so you don't have the problem. But when you go into production, the landscape might be different, e.g. if the backend one day is run from a different remote host.
I generally run them on a single host, as I run smaller sites, but even if you run them on multiple hosts, as long you run nginx (or HAProxy, or something else - I only have experience with nginx), it doesn't really matter.
Of course, this is a simple example that might break TLS, if you're proxying requests over the internet, and you probably want to pass more options (e.g. forwarding the HOST header to django), and this may add some latency, so ideally you'd want all servers running in the same data center.
I'll see if I find the time to write a more detailed post about this one of these days.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
My strategy is this:
/api/to my back-end (Python container running Django, typically)Setting up docker may take a while the first time, but once you learn it, you never have to worry about CORS, Cookie origin, etc.
I don't really understand. Does this solve the problem with Webpack Dev Server or Gatsby?
I've never used Gatsby, and the webpack work I do is usually with vue.js, but if your webpack dev server is communicating with an API, yes.
I run similar containers (Django for back-end, vue.js for front-end) on my dev machine as in production.
The difference is I serve a built SPA from nginx in production, and run the nodejs server in dev - but then I still have an nginx container for routing.
I point my base URL to
/api/(or often to/graphql/), then it doesn't matter whether I access my dev site through localhost, or dev.example.com, or if I access staging.example.com, or just example.com in production... It Just Works™.I guess the trick here is that both your backend and frontend are at the same origin because of docker, so you don't have the problem. But when you go into production, the landscape might be different, e.g. if the backend one day is run from a different remote host.
Thanks for the insights :)
I generally run them on a single host, as I run smaller sites, but even if you run them on multiple hosts, as long you run nginx (or HAProxy, or something else - I only have experience with nginx), it doesn't really matter.
In your nginx config:
Of course, this is a simple example that might break TLS, if you're proxying requests over the internet, and you probably want to pass more options (e.g. forwarding the HOST header to django), and this may add some latency, so ideally you'd want all servers running in the same data center.
I'll see if I find the time to write a more detailed post about this one of these days.