Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons


LoginGet Started
← Back to Lessons
Edit on Github

Start a React + Flask (Full-Stack) Project

Front end
Manual Installation (only if needed)

This template has backend files and front end files together, it's the perfect combination of the React Flux and the Flask API templates so that you can create a Full Stack application applying all the concepts used in the professional world.

Front end

You can find a thorough explanation on how to create new pages, components, adding styles and using the context, inside this previous documentation we created for the React Flux template. This is because the Full-Stack Template was created under the same structure and concepts as that one.

Backend

You can find a thorough explanation on creating your Flask API endpoints, creating new models, database migrations and using the flask admin in this documentation, this is because this template was created with the same structure and concepts as the Flask API Template.

Manual Installation (only if needed)

Back-End Manual Installation:

  1. Install the python packages: $ pipenv install
  2. Create a .env file based on the .env.example: $ cp .env.example .env
  3. Install your database engine and create your database, depending on your database you have to create a DATABASE_URL variable with one of the possible values, make sure you replace the values with your database information:
EngineDATABASE_URL
SQLitesqlite:////test.db
MySQLmysql://username:password@localhost:port/example
Postgrespostgres://username:password@localhost:5432/example
  1. Migrate the migrations: $ pipenv run migrate (skip if you have not made changes to the models on the ./src/api/models.py)
  2. Run the migrations: $ pipenv run upgrade
  3. Run the application: $ pipenv run start

Front-End Manual Installation:

  • Make sure you are using node version 14+ and that you have already successfully installed and run the backend.
  1. Install the packages: $ npm install
  2. Start coding! start the webpack dev server $ npm run start

Publish your website!

This template is 100% compatible with Heroku and Render.com, just make sure to read the quick deployment guides.

  1. How to deploy into Render.com (for free)
  2. How to deploy into Heroku.com (for $0.01 a month)