Ask HN: How to develop React+Flask locally in a way that can easily be deployed?

9 points by RSchaeffer 4 years ago | 9 comments

I'm a newcomer to fullstack development with no experience in infra. I want to make a web app based on a React frontend and Flask backend (with a Postgres database). What are people's recommendations for developing locally, in a way that can be easily & immediately deployed?

A lot of the tutorials I can find either (a) don't mention deployment, or (b) treat it like a final step at the end, rather than something that needs to be done on a semi-frequent basis.

smt88 4 years ago |

Don't worry about your deployment being directly related to your dev environment. That's a good goal, but most people make do without it.

You can use Vagrant or Docker[1] locally and then deploy somewhere easy like Render.com[2][3].

Since you're new to fullstack, you may have an easier time with Next.js (definitely use the TypeScript option) because then you're only learning/using a single language in a single repository for both frontend and backend.

1. https://blog.miguelgrinberg.com/post/how-to-dockerize-a-reac...

2. https://render.com/docs/deploy-flask

3. https://render.com/docs/deploy-create-react-app

RSchaeffer 4 years ago | |

Thanks for the advice and links! Do you know of a Render tutorial that involves getting Flask and ReactJS services to communicate with one another? Your 2nd and 3rd links demonstrate each independently. I don't know whether the same challenge will pop up in NextJS

smt88 4 years ago | | |

With React by itself, you need to know the API's URL. You should read about environment variables and how React handles them.

You would have one environmental file for local development, and then in production, you'd use Render.com's environment variable settings.

One of these variables would be something like REACT_APP_API_BASE_URL (doesn't matter what you call it, as long as it begins with REACT_APP).

Then you prepend all of your API calls with that in your React code.

Next.js does not have this setup step because it serves your API and static site from the same s Node server by default, so all of your API URLs would just be /my-api-call (because the API and fronted would have the same hostname, whatever it is).

roflyear 4 years ago |

There is a good reason that tutorials treat it that way: it should be treated that way, IMO.

I don't agree that your dev environment should perfectly match whatever environment you're deploying to. It is good to do some things: same version of Python, same DB and same version, hopefully same OS, but that is rarely something you always have control over. You do, so sure, do the best you can here.

Rather, I would suggest you configure your development environment to best facilitate development, especially for learning. On some apps maybe you will need to have some kind of parity environment (mostly this is DB level stuff, then specific Python version, then OS version, in my experience problems rarely if ever come up that aren't in these categories) but it is rare, and you definitely do not need this for learning.

The easiest thing and best thing for learning may be to get a cheap VM and set up your own environment. If you do want to learn a tool like Docker, sure - but I don't suggest developing in Docker. It is more of a pain than it is worth.

JoeCortopassi 4 years ago |

It can be really simple on the cloud. Everything I'm describing might even fit on both platforms free tier

For Flask, follow this tutorial. It's the absolute simplest I've come across: https://cloud.google.com/run/docs/quickstarts/build-and-depl...

For React, follow this tutorial: https://docs.aws.amazon.com/AmazonS3/latest/userguide/Hostin...

But instead of the files it tells you to create, just use create-react-app, and run "npm run build". Then take the directory it creates (hint: it's named "build"), and drop all it's contents in your s3 bucket

FractalHQ 4 years ago |

If your goal is to stand up a hobby app asap as opposed to learn backend tech, you can have a serverless app hooked up to a Postgres DB in minutes all for free with Cloudflare Pages and Supabase. I’ve built many Sveltekit Apps this way in weekends.

GVRV 4 years ago |

If you're just starting out, and want to focus on the frameworks right now without worrying about infrastructure _but_ still want something to show someone, start with replit.com

aristofun 4 years ago |

Aim for docker -> docker compose -> docker swarm

The easiest path for tiny dev teams