A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones
Editar en 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)