Django + React Boilerplate for starting your SaaS application.

Last update: May 8, 2022

DIY Django and React Boilerplate for SaaS

It is do-it-yourself Django + React Boilerplate for starting your SaaS application. In existing boilerplates for Django+React (or just for Django) there are very often too many features provided (do you really need traefik for MVP?). So before starting, you need to remove a lot of functionality that you don't need or simply don't understand.

I decided to create a simple Django+React boilerplate with step-by-step instructions how to build it. During building you can decide what you need or not. And for sure you learn a lot about Django and React. I hope it will provide good and quick starting point for creating SaaS applications. I would like to create real SaaS applications based on this boilerplate with step-by-step tutorials how they were created. They will be available at SaaSitive website.

Features (already implemented or planned)

  • Backend with Django Rest Framework
  • Frontend with React
  • Bootstrap for styling
  • Deployment with docker-compose on single VPS
  • SSL certificate from Let's encrypt
  • PostgreSQL database (not yet configured)
  • Authentication with DRF authtoken and Djoser
  • AWS SES for Email sending (not yet implemented)
  • python-decuple for secrets
  • Payments with Stripe (not yet implemented)
  • Step-by-step instructions how to deploy and how to update application

Live Website

You can play with this bolierplate at: https://boilerplate.saasitive.com - deployed to t2.micro EC2 instance with docker-compose.

Step-by-step instructions:

  1. Starting SaaS with Django and React (tag v1)
  2. React Routing and Components for Signup and Login (tag v2)
  3. Token Based Authentication with Django Rest Framework and Djoser (tag v3)
  4. React Token Based Authentication to Django REST API Backend (tag v4)
  5. React Authenticated Component (tag v5)
  6. CRUD in Django Rest Framework and React (tag v6)
  7. Docker-Compose for Django and React with Nginx reverse-proxy and Let's encrypt certificate (tag v7)
  8. Django Rest Framework Email Verification (tag v8)
  9. Django Rest Framework Reset Password (tag v9)

More articles coming soon!

Screenshots

GitHub

https://github.com/saasitive/django-react-boilerplate
Comments
  • 1. Service 'nginx' failed to build : COPY failed: stat /var/lib/docker/tmp/docker-builder996262710/frontend/package.json: no such file or directory

    I am following the tutorial https://saasitive.com/tutorial/docker-compose-django-react-nginx-let-s-encrypt/ step by step but I get this error saying no file found but the file mentioned is correctly in place

    Reviewed by Avin-Techv at 2021-03-01 09:15
  • 2. typo error in tutorial

    Hey Team :) First thanks a lot for the tutorial, I am at 4th step and just wanted to tell yoiu that there is a typo error in the tuto https://saasitive.com/tutorial/react-token-based-authentication-django/ Capture in // frontend/src/components/SignupReducer.js there is subimted instead of submitted, i have no idea if this is important but that's it! Also I had to install history 4.10.1 instead of 5.0.0

    Reviewed by moreaupascal56 at 2021-02-09 20:11
  • 3. Nginx DockerFile update and course completion request

    Dear Piotr Płoński

    Thank you very much for your tutorials. Undoubtedly, using this structure can create valuable applications.

    After cloning the code and using the docker-compose -f docker-compose-dev.yml build command, I got an error ERROR [build 5/7] RUN npm ci --silent. The problem was solved by changing the code RUN npm ci --silent on line 9 of the Nginx DockeFile to RUN npm install.

    If possible, please complete this course and add the unfinished parts to the course, such as resetting the password in frontend and adding the subscription payment mechanism or production ready Email verification.

    Finally, I sincerely thank you for sharing your knowledge and helping to develop new software.

    Best regards Hamed Asgari

    Reviewed by hamedasgari20 at 2022-04-07 07:20
  • 4. Form field validation not working due to typo (400 Bad Request)

    In part 4 of the tutorial, the field validation doesn't fire up when we hit send with empty username and password fields.

    In the tutorial code, there is a typo in SignupActions.js on line 23. It says if (error.resposne) {

    instead of if (error.response) {

    Because of this CREATE_USER_ERROR is never set and later on in the tutorial, when connecting to the api, sending the form with empty fields results in a 400 Bad Request response.

    Reviewed by Dan1ell at 2021-08-07 15:58
  • 5. Not working with aws ec2 instance

    working with docker-compose-dev.yml but with another ec2 instance and docker-compose giving error

    Certbot failed to authenticate some domains (authenticator: webroot). The Certificate Authority reported these problems: Domain: mydomain.com Type: unauthorized Detail: Invalid response from http://mydomain.com/.well-known/acme-challenge/sklMcsF8-vKNJkzKqo95shFDXqdr7uiaOpWDiGspyrs [13.233.108.169]: "<html lang="en"><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="

    Domain: www.mydomain.com Type: unauthorized Detail: During secondary validation: Invalid response from http://www.mydomain.com/.well-known/acme-challenge/LH-LaBi42ZGOZAeTHycKAEKN670LF5m-ErwbXYzpeNs [13.233.108.169]: "<html lang="en"><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="

    Hint: The Certificate Authority failed to download the temporary challenge files created by Certbot. Ensure that the listed domains serve their content from the provided --webroot-path/-w and that files created there can be downloaded from the internet.

    Some challenges have failed. Ask for help or search for solutions at https://community.letsencrypt.org. See the logfile /var/log/letsencrypt/letsencrypt.log or re-run Certbot with -v for more details.

    Reloading nginx ...

    2021/08/04 06:39:21 [emerg] 31#31: cannot load certificate "/etc/letsencrypt/live/mydomain.com/fullchain.pem": BIO_new_file() failed (SSL: error:02001002:system library:fopen:No such file or directory:fopen('/etc/letsencrypt/live/mydomain.com/fullchain.pem','r') error:2006D080:BIO routines:BIO_new_file:no such file) nginx: [emerg] cannot load certificate "/etc/letsencrypt/live/mydomain.com/fullchain.pem": BIO_new_file() failed (SSL: error:02001002:system library:fopen:No such file or directory:fopen('/etc/letsencrypt/live/mydomain.com/fullchain.pem','r') error:2006D080:BIO routines:BIO_new_file:no such file)

    Reviewed by bonn2327 at 2021-08-04 07:04
  • 6. Make 'init-letsencrypt.sh' executable

    OMG! "I have deployed my first app into production." Brother, I would like to thank you for your kindness and brilliant fully comprehensive tutorials. I am sure that it helped many others like me.

    When I go back to the comment, the 'init-letsencrypt.sh' certification file should be executable before use. We can make it executable in linux using this command: "sudo chmod +x init-letsencrypt.sh"

    Thanks again!

    Reviewed by ztaye3 at 2021-07-03 12:48
  • 7. How to deploy Frontend and backend separately

    Hi, Just want to know about the deployment settings for the project and how we will deploy frontend and backend separately like both would be entirely independent of each other and we will be calling apis from frontend.

    Messed with this quite a time hence need some guidance.

    Reviewed by bharatpaliwal-169 at 2021-06-29 10:59
🌊 A template for building an SaaS/admin application using React + Material-UI.
🌊  A template for building an SaaS/admin application using React + Material-UI.

?? Remains of a SaaS business I once tried to build. Now transformed into a template for building an SaaS/admin application using React + Material-UI.

May 6, 2022
Starting project with react from scratch using webpack and babel
Starting project with react from scratch using webpack and babel

React Part 2 Meliuz Iniciando projeto com react do zero usando webpack e babel. O que é? (Onde vivem? O que comem?) webpack (com “w” minúsculo, respei

Oct 30, 2021
Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optized code.

Tombola Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optimized c

Dec 30, 2021
⚡ Free Next.js landing page template for SaaS products, online services and more.
⚡ Free Next.js landing page template for SaaS products, online services and more.

A free Next.js TypeScript landing page template for SaaS products, online services and more.

May 12, 2022
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.

Phoenix React applications boilerplate A simple boilerplate that helps you make your react application with Server Side Rendering support. Getting sta

Mar 4, 2022
Palo-mern-boilerplate - A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly.

palo MERN boilerplate A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly. Commands: npm install # install b

Apr 29, 2022
A simple Ethereum prediction market boilerplate build on top of Moralis Web3 SDK + Ethereum Boilerplate + Chainlink + OpenZeppelin. Happy BUIIDL!

ethereum-prediction-market-boilerplate This Project is a fork of Ethereum Boilerplate and demostrates how you can build your own Ethereum Prediction M

May 12, 2022
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

Apr 30, 2022
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites

Basic Next.js boilerplate ready to use in any type of websites. View demo » My L

May 10, 2022
Solana-boilerplate - Lightweight boilerplate for Solana dapps. Allows quick building and prototyping
Solana-boilerplate - Lightweight boilerplate for Solana dapps. Allows quick building and prototyping

Solana Boilerplate Lightweight boilerplate for Solana dapps. Allows quick buildi

Apr 14, 2022
hopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate

Shopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate, but moved it to Typescript, and more modularized, so you can use any frontend framework you want. I left it comes by default, with React.

Apr 25, 2022
Visualize your React components as you interact with your application.
Visualize your React components as you interact with your application.

Visualize your React components as you interact with your application. Setup Install React Scope from Chrome web store. (Important) Install React Deve

Apr 25, 2022
A boilerplate for a Redux-React 'Cordova' application because react native is too new to use in prod. It also has Babel, Webpack and Gulp

react-redux-cordova-boilerplate A boilerplate for a Redux-React Cordova application using Babel, Webpack and Gulp Development Run npm install Run npm

Oct 24, 2021
Electron-mirror - Electron application for Smart Mirror using React via the electron-react-boilerplate repository.

Electron-Mirror Electron application for Smart Mirror using React via the electron-react-boilerplate repository. Starting Development Start the app in

Feb 8, 2022
An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend.

An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend. All packages are structured as Yarn Workspaces and written in Typescript. In addition, the web application can be built as Docker image using a multi stage built supported Dockerfile.

May 11, 2022
A boilerplate for a Koa Redux React application with Webpack, Mocha and SASS

Boilerplate for a Koa Redux React app with Webpack, Mocha, SASS, Babel, ESLint... Docs Detailed blogpost on how was this boilerplate built Good to und

Nov 26, 2021
A boilerplate for a Redux-React application using LoopBack

loopback-redux-react-boilerplate A boilerplate for a Redux-React application using LoopBack Get Started Clone this repository or use npm $ git clone h

Jan 4, 2022
Boilerplate for react universal (isomorphic) application based on flux architecture (redux implementation)
Boilerplate for react universal (isomorphic) application based on flux architecture (redux implementation)

Redux universal boilerplate Boilerplate for react universal application building on flux architecture based on redux implementation. Boilerplate based

Mar 30, 2022
This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux.
This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux.

Isomorphic Redux App This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux. # Features

May 15, 2019