Flask API Boilerplate - Simple Starter in Action
Tags: webdev, react, flask, opensource
Published: 2021-11-18 21:04:24

---
title: Flask API Boilerplate - Simple Starter in Action
published: true
description: Open-Source Flask API Boilerplate that might help developers to bootstrap fast a full-stack project - with samples.
tags: webdev, react, flask, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgmv4n3aql18p3ly9qbz.png
canonical_url: https://www.admin-dashboards.com/flask-api-boilerplate-with-samples/
---
Hello coders!

This article presents an open-source [Flask API Boilerplate](https://appseed.us/boilerplate-code/flask-api-boilerplate) that any developer with basic programming knowledge might use to bootstrap fast a full-stack project with React, Vue, or any other Frontend Framework. The product implements a `simple API interface` that covers **login**, **logout** and **register** actions using `JSON Web Tokens`. For newcomers, **Flask** is a leading web framework written in Python used to code from a simple website, APIs, or complex eCommerce solutions.

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

--- 

- ✨ [Flask API Boilerplate](https://appseed.us/boilerplate-code/flask-api-boilerplate) - product page hosted by AppSeed
- ✨ [Flask API Boilerplate](https://github.com/app-generator/api-server-flask) - source code (MIT License)

---

## Codebase Features

Simple API Starter enhanced with JWT authentication, SqlAlchemy, SQLite persistence, and deployment scripts via Docker.  It has all the ready-to-use bare minimum essentials. Features:

- `Up-to-date dependencies`: **Flask 2.0.2**
- [API Definition](https://docs.appseed.us/boilerplate-code/api-unified-definition) - the unified API structure implemented by this server
- Simple, intuitive codebase - can be extended with ease.
- `Flask-RestX`, `Flask-jwt_extended`
- `Docker`, Unitary tests

The Interface provides a simple, intuitive authentication interface that manages the registration and authentication using JWT tokens.

Probably the most easier way to start and use the product locally is via Docker, a popular virtualization software.

> **Step #1** - Clone Sources from GH

```bash
$ git clone https://github.com/app-generator/api-server-flask.git
$ cd api-server-flask 
```

> **Step #2** - Start the API in Docker

```bash
$ docker-compose pull  # download dependencies 
$ docker-compose build # local set up
$ docker-compose up    # start the API 
```

---

Once all the above commands are executed, the API should be accessible in the browser at `http://localhost:5000` (the default address). To test and interact with the interface we have multiple choices: `POSTMAN`, `curl` or the embedded `Swagger Dashboard` exposed natively by Flask-RestX.

---

![Flask Boilerplate API - Swagger Dashboard.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3g7d20ys6nvor90deu86.png)

---

From this point, we can code our own frontend to interact and use this minimal authentication API or use other projects already compatible to communicate with this interface:

- 👉 [React Soft Dashboard](https://github.com/app-generator/react-soft-ui-dashboard) - source code
- 👉 [React Berry Dashboard](https://github.com/app-generator/react-berry-dashboard) - source code
- 👉 [React Datta Able](https://github.com/app-generator/react-datta-able) - source code
- 👉 [React Purity Dashboard](https://github.com/app-generator/react-purity-dashboard) - source code

---

We can choose any product from the above list to compile and start in the local environment manually or via Docker. Let's pick [React Soft Dashboard](https://appseed.us/product/flask-react-soft-dashboard), a really nice Material-UI design crafted by `Creative-Tim`.

---

> **Step #1** - Clone Sources (Github)

```bash
$ git clone https://github.com/app-generator/react-soft-ui-dashboard.git
$ cd react-soft-ui-dashboard 
```

---

> **Step #2** - Start the React UI in Docker

```bash
$ docker-compose pull  # download dependencies 
$ docker-compose build # local set up
$ docker-compose up    # start the React App 
```

The React UI by default, redirects the guest users to authenticate and we should see in the browser the login page.

---

![Flask React Soft Dashboard - Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aaulyn57ud61ssxrv3d2.png)
 
---

> Flask React Soft Dashboard - Widgets Page

![Flask React Soft Dashboard - Widgets Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wti4r0aotivnk1c3a69l.png)

---

In a similar way, we can compile and start the rest of the samples using Docker or a classic manual build by typing `yarn` and `yarn start` in the root of each product.

---

## [Flask React Berry](https://appseed.us/product/flask-react-berry-dashboard)

Berry is a creative-free React Admin Dashboard build using the Material-UI by CodedThemes. It is meant to provide a nice User Experience with highly customizable feature-riched pages now available in a full-stack product.

- 👉 [Flask React Berry](https://appseed.us/product/flask-react-berry-dashboard) - product page
- 👉 [Flask React Berry](https://flask-react-berry-dashboard.appseed-srv1.com/) - LIVE Demo

Berry Dashboard is a complete game-changer React Dashboard Template with an easy and intuitive responsive design as on retina screens or laptops.

---

![Flask Dashboard Berry - Charts Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atyk9xvotn0whwapcmqe.png)

---
 
## [Flask React Datta Able](https://appseed.us/product/flask-react-datta-able)

Datta Able is a colorful free React Admin Dashboard crafted by CodedThemes. It comes with high feature-rich pages and components with fully developer-centric code.

- 👉 [Flask React Datta Able](https://appseed.us/product/flask-react-datta-able) - product page
- 👉 [Flask React Datta Able](https://flask-react-datta-able.appseed-srv1.com/) - LIVE Demo

Datta Able React comes with error/bug-free, well structured, well-commented code and regularly with all latest updated code.

---

![Flask React Berry - Charts Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrouproavoq16moogqn9.png)

---

> **Thanks for reading!** For more resources, feel free to access:

- AppSeed for [support](https://appseed.us/support) via email and [Discord](https://discord.gg/fZC6hup)
- More [React Apps](https://appseed.us/apps/react) crafted with `Django`, `Flask` and `Node JS` APIs.