Software-as-a-Service (SaaS) is a model of software delivery in which users pay a subscription to get access to centrally hosted software. Nowadays, you can easily build your own SaaS, but you need to have programming skills. There are a lot of open-source web frameworks that allow you to quickly create a web service. You can serve SaaS on rented hardware in the cloud. You can start your own SaaS at 10-50$ per month of total costs (but you need to have programming skills!).
The main costs:
- You will need to buy a domain for your website, which costs about 12$ per year.
- You will need to have a server machine. You can rent it from cloud providers with prices starting at 5$/month (sometimes even lower). Yes, you can run the whole app on a single machine.
There is even a community of people building online businesses, called Indie Hackers. You can get a lot of help from community. You can check there examples of SaaS applications that are self-funded: link to the list.
In this series of posts, I would like to show you how to start your SaaS with Django and React from scratch. By the end of the tutorial, you will have Django + React boilerplate (a template code that can be reused to create a new SaaS). This boilerplate will be much different from existing boilerplates:
- You will write it from scratch. You will be familiar with every part of the boilerplate code.
- It will have only parts that are needed for you. If you don’t need a feature you won’t implement it, simple.
- The boilerplate code will be open-source on the MIT license. You may reuse it as many times as you want for free.
- A complete guide on how to deploy the SaaS boilerplate to a single server machine (and how to update the code) will be available.
By the end of this post you shoud …
- You should prepare local development environment (install required libraries).
- You should setup the text editor or Integrated Development Environment.
- You should set a code repository for the project.
- You will initialize Django and React projects.
Start SaaS with Django and React
Prepare your development machine
You need to setup your machine (laptop or desktop) for development. You will need to have 3 things:
- Python available on your machine (needed for Django).
- Node.js needed for React.
- Git for code repository.
I’m using Ubuntu (16.04) for development. You can use any other operating system (Windows, MacOS). I would recommend Ubuntu 18.04 or Windows Subsystem for Linux on Windows OS.
I’m using Visual Code for text editing. It is free and open-source Integrated Development Environment (IDE). You can use other IDE/editors, for example PyCharm.
Initialize the code repository
Let’s go into https://github.com/new and start a new repository!
You can see that I’ve selected the
Public repository on the MIT license. The code I’m writing will be open to anyone on the internet. If you want to hide your code from others you should select
Private here and don’t select the license.
The next important thing is
.gitignore file. Notice that I’m adding
Python template. It is important to select it because it will prevent
git from tracking unimportant or unsafe files (like
.env files). What about the
.gitignore in the frontend code automatically generated when we start React application.
My repository is available at https://github.com/saasitive/django-react-boilerplate. When you go to the repository you should see repository like in the image below.
Create Django project
Before starting Django project let’s get the empty repository from the Github:
git clone https://github.com/saasitive/django-react-boilerplate.git
Now, please navigate to this directory and create
cd django-react-boilerplate mkdir backend
Your project directory should look like:
├── backend ├── LICENSE └── README.md
Let’s create virtual environment in the
cd backend virtualenv venv # activate virtual env source venv/bin/activate
We are using virtual environment to not mess with packages from other projects. Let’s check the python version:
python --version Python 3.6.11
We will install Django package:
pip install django
Please take a look at Django version. We will need it to save in
requirements.txt file. Please add
backend directory with your Django version. In my case it was:
# content of backend/requirements.txt django==3.1.2
We are now ready to initialize the Django project:
# run in backend dir django-admin startproject server
You can run initialized server with command:
# navigate to server dir cd server # run development server python manage.py runserver
Note: You can also run development server with
Please enter 127.0.0.1:8000 in your favourite browser and you should see a default Django welcome site.
Congratulations you have successfully initialized the backend! We are in the half-way of this post, let’s initialize the frontend project.
To stop the Django development server use keyboard:
Create React App
Please navigate to the project root directory (where the
backend directory is) and run commands:
npx create-react-app frontend cd frontend npm start
The above commands should initialize the React frontend code and run the development server at address: http://localhost:3000/. You should see in the browser a spinning atom:
Congratulations you have successfully initialized the frontend! :tada:
Please notice that default Django port for development is
8000 and for React application it is
Commit code to the repository
Your project structure should look like this:
. ├── backend │ ├── server │ └── venv ├── frontend │ ├── node_modules │ ├── package.json │ ├── public │ ├── README.md │ ├── src │ └── yarn.lock ├── LICENSE └── README.md
There are two directories:
backendfor storing the Django server code.
frontendfor React user interface code.
Let’s add them into
git add frontend git add backend
To see what files will be added run
> git status On branch main Your branch is up-to-date with 'origin/main'. Changes to be committed: (use "git reset HEAD <file>..." to unstage) new file: backend/server/manage.py new file: backend/server/server/__init__.py new file: backend/server/server/asgi.py new file: backend/server/server/settings.py new file: backend/server/server/urls.py new file: backend/server/server/wsgi.py new file: frontend/.gitignore new file: frontend/README.md new file: frontend/package.json new file: frontend/public/favicon.ico new file: frontend/public/index.html new file: frontend/public/logo192.png new file: frontend/public/logo512.png new file: frontend/public/manifest.json new file: frontend/public/robots.txt new file: frontend/src/App.css new file: frontend/src/App.js new file: frontend/src/App.test.js new file: frontend/src/index.css new file: frontend/src/index.js new file: frontend/src/logo.svg new file: frontend/src/reportWebVitals.js new file: frontend/src/setupTests.js new file: frontend/yarn.lock
We need to commit and push changes to the repository server:
git commit -am "initalize backend and frontend" git push
You can check the repository in the browser (in my case it will be https://github.com/saasitive/django-react-boilerplate), all changes should be there.
- The hardest part is to start and we already started!
- We have backend and frontend applications initialized. We are able to run development servers for both apps.
- The project’s code is managed in the code repository.
In the next post, we will write the user interface for authentication. It will be only view of UI without taking any actions (without connecting to the backend). We will prepare:
- create (signup) view for a new user,
- login view,
- show home and dashboard views.
Next article: React Routing and Components for Signup and Login
Let's stay in touch!
Would you like to be notified about new posts? Please fill this form.
Boilerplate Tutorial Articles:
1. Starting SaaS with Django and React (↩ you are here!)
2. React Routing and Components for Signup and Login
3. Token Based Authentication with Django Rest Framework and Djoser
4. React Token Based Authentication to Django REST API Backend
5. React Authenticated Component
6. CRUD in Django Rest Framework and React
7. Docker-Compose for Django and React with Nginx reverse-proxy and Let's encrypt certificate
8. Django Rest Framework Email Verification
9. Django Rest Framework Reset Password
More articles coming soon!
Link to the code repository: saasitive/django-react-boilerplate