Starting a Software as a Service (SaaS) project can be daunting, especially with the initial setup of the infrastructure. Luckily, with the right boilerplate, much of the groundwork is laid out for you. This guide will walk you through setting up a SaaS application using a specific Django backend and React frontend code, including integrating Stripe for payments, Postmark for emails, user management and authentication, Cloudinary for media file uploads, dynamically rendered landing page, blog creation through Django Admin, Google Analytics, Material UI, setting up a PostgreSQL database, and deploying to Render.com. Let's dive in!
Backend Setup
Initial Setup
Create a Project Folder: Start by navigating to your Desktop or preferred directory in your terminal and create a folder named saas-boilerplate. Then, create a subdirectory named backend and navigate into it.
cd Desktop
mkdir saas-boilerplate
cd saas-boilerplate
mkdir backend
cd backend
Clone the Boilerplate Repository: Clone the backend boilerplate repository into your backend directory.
git clone https://github.com/rcmiskin10/dj_react_saas_backend_render_template.git .
Set Up a Virtual Environment: Use virtualenv to create an isolated Python environment. Activate it and install the project's dependencies.
pip install virtualenv
python3.8 -m venv env
source env/bin/activate
pip install -r requirements.txt
Environmental Variables: Create a .env
file in your backend directory. Populate it with the necessary environmental variables provided below:
STRIPE_API_TEST_PK=<STRIPE_API_TEST_PK>
STRIPE_API_TEST_SK=<STRIPE_API_TEST_SK>
STRIPE_LIVE_MODE=False
PROD_BACKEND_URL=<PROD_BACKEND_URL>
PROD_FRONTEND_URL=<PROD_FRONTEND_URL>
BACKEND_URL=http://127.0.0.1
FRONTEND_URL=http://localhost:3000
DEBUG=True
DEV_EMAIL_HOST_USER=<DEV_EMAIL_HOST_USER>
DEV_EMAIL_HOST_PASSWORD=<DEV_EMAIL_HOST_PASSWORD>
POSTMARK_SERVER_TOKEN=<POSTMARK_SERVER_TOKEN>
DEFAULT_FROM_EMAIL=<DEFAULT_FROM_EMAIL>
Now you need to set up Stripe.
If you do not have a stripe account register a free one here: dashboard.stripe.com/register. If you do have a stripe account login here: dashboard.stripe.com/login.
Once account is set up or you're logged in, turn on Test Mode
(Toggle button in top right corner of dashboard) it should bring you to: dashboard.stripe.com/test/payments
Go to dashboard.stripe.com/test/apikeys
Grab your Publishable key
token and set the environmental variable STRIPE_API_TEST_PK
in your .env
file created above.
Next grab your Secret key
token and set the environmental variable STRIPE_API_TEST_SK
in your .env
file created from above.
Next go to Stripe Products to add your products, i.e. subscription tiers
Add as many tiers as you want i.e.
Free w/ a description and price: $0
Pro w/ a description and price: say $10
Make sure both are Recurring and Monthly or however you would like to set up your subscriptions.
Postgres Database Setup: Download and install PostgreSQL. You can use this download link. Once installed, create a database named postgres and ensure your settings.py reflects the correct database settings. For example: default="postgresql://postgres:postgres@localhost/postgres"
, if your database name is postgres
.
Apply migrations and create a superuser for Django admin access.
python manage.py migrate
python manage.py createsuperuser
Running the Server: Start your Django server and log into the admin panel to verify that everything is set up correctly.
python manage.py runserver
Integrating Stripe Products and Prices, Email, and Landing Page data
Add Products and Prices: Navigate to the Django admin payments section to add Stripe products and their prices. Ensure each product in Django matches its counterpart in Stripe, including the recurring intervals and price IDs.
You can find Stripe Product Id in stripe products and click on product and in the URL you will see an ID with prefix
prod_xxxxxxxx
and letters and numbers as the unique id.Do the same for all products
Now go to Django Admin Product Price
Add the price for each product from Stripe here: Django Admin Add Product Link
Select
Product
that you added to Django Admin.Add the Price from what you entered on Stripe. Add the interval, i.e. Monthly
Add the stripe price id
Go to https://dashboard.stripe.com/test/products?active=true
Select the
Product
and scroll down toPricing
and look under API ID and copy id with prefix and numbers/letters likeprice_xxxxxxxxx
and paste into stripe price id on django admin.Do for all products
Now you can add descriptions of the tiers here: Django Admin Add Product Description Link
Add as many description list items for each product
Email Setup: Configure your development email settings by addingDEV_EMAIL_HOST_USER
andDEV_EMAIL_HOST_PASSWORD
to your.env
file, using an app password generated from your Gmail account.Set
DEV_EMAIL_HOST_USER
to your gmail for DEV testingSet your
DEV_EMAIL_HOST_PASSWORD
to the password set up in your gmail account from above. You need to create an App Password in: https://myaccount.google.com/securityMake sure 2-Step Authentication is enabled.
Then go to https://myaccount.google.com/apppasswords and create a new app and a new password will be created.
Now Emails will be sent through gmail smtp in DEV
Next up is setting up the landing page data.
Note here you can add whatever copy, images, icons, you would like through the Django admin
Go to http://127.0.0.1:8000/admin/landingpage/landingpage/add/
Add the hero section copy and image
Add the features of your SaaS
the
Feature mui icon name
: can be selected from https://mui.com/material-ui/material-icons/?query i.e. find Add and get the name of the icon from the end of the import in the modal importAddIcon
from '@mui/icons-material/Add'; i.e.Add
You can add as many features as you like and Order them however you like by applying 1,2,3... to each feature. i.e. 1 will be first in line.
Do the same for how it works, Secondary hero, and Social Media Links
We will set up prod environmental variables later.
Frontend Setup
Setting Up the Frontend: In a new terminal, navigate to your project root and set up the frontend directory by cloning the frontend boilerplate repository. Install dependencies with npm install.
mkdir frontend
cd frontend
git clone https://github.com/rcmiskin10/dj_react_saas_frontend_render_template.git .
npm install
Configure Environment Variables: Create a
.env
file in your frontend directory. Add your Stripe Publishable key and Google Analytics ID.Add the publishable key from Stripe to the environmental variable
REACT_APP_STRIPE_API_TEST_PK
with the value fromSTRIPE_API_TEST_PK
inbackend/.env
Now add an environmental variable REACT_APP_GA_ID for Google Analytics
Add an analytics account
Add an app
Go to top search bar and search for
MEASUREMENT ID
inData Streams
and copy the ID that has prefixG-XXXXXXXX
Past that
G-XXXXXXXX
as value for environmental variableREACT_APP_GA_ID
infrontend/.env
Start the Frontend Server: Run
npm start
to launch your React app. Your SaaS landing page should now be visible at http://localhost:3000/.
Deploying to Render.com
Prepare for Deployment: Ensure your
backend
andfrontend
folders are pushed to separate GitHub repositories.Deploying the Backend: Follow Render.com's documentation to deploy your Django app, adding the necessary environment variables for production, including Stripe keys, Cloudinary for media files, and email settings via Postmark.
Follow tutorial here: https://docs.render.com/deploy-django#use-renderyaml-for-deploys
The
backend/render.yaml
already exists in the saas boilerplate. You can change all the names to fit whatever you like, but our boilerplate named everythingbackend
In the Render Dashboard, go to the Blueprints page and click New Blueprint Instance.
Make sure to first create a repository to hold your
backend/
folder on github.Now you can select the repository that contains your blueprint and click Connect.
Give your blueprint project a name and click Apply.
Now add the Production Environmental Variables by clicking the backend app and going to Environment
Add you Stripe
STRIPE_API_TEST_PK
found in your local.env
file or if you are ready to use live Stripe data use the Production PK found in stripe dashboard.Same with the:
STRIPE_API_TEST_SK
STRIPE_LIVE_MODE=False
BACKEND_URL
will be the url that your backend render app is pointing to: something similar to thisbackend-xxxxonrender.com
For your media files first set up Cloudinary account by going to the cloudinary website and create a free cloudinary account. After your account has been created, go to the dashboard page and copy the
cloud name
,api key
andapi secret
.Add the cloud name to
CLOUDINARY_CLOUD_NAME
Add the api key to
CLOUDINARY_API_KEY
Add the api secret to
CLOUDINARY_API_SECRET
For your emails create a postmark account here https://postmarkapp.com/. Follow instructions here: https://postmarkapp.com/support/article/1008-what-are-the-account-and-server-api-tokens to find your Server API Token and set it to
POSTMARK_SERVER_TOKEN
Set
DEFAULT_FROM_EMAIL
to your email with postmark.
After you deploy the frontend app below, come back to settingFRONTEND_URL
Finally run
python manage.py createsuperuser
in the Render shell in the settings of the backend app so that you can create an admin account.To see your backend admin page, go to
<YOUR_APP_URL>/admin
to login.Deploying the Frontend: Deploy your React app on Render.com, setting environment variables for connecting to the backend API, Stripe, Cloudinary, and Google Analytics.
Connect your github account here: https://dashboard.render.com/select-repo?type=static
Follow the instructions to deploy
Once deployed go to settings for frontend app
In Redirect/Rewrite rules add:
/*
as Source
/index.html
as Destination
And `Rewrite as Action
- Now go to Environment and add:
REACT_APP_STRIPE_API_TEST_PK
to same Stripe API Key that you set in backend
Add
REACT_APP_BACKEND_API_URL
and use the backend url from above after backend was deployedAdd your
REACT_APP_MEDIA_URL
to the Cloudinary url. Something like this https://res.cloudinary.com/xxxxxxx/image/upload/v1/ The xxxxxxx should be found in your cloudinary dashboard that you used in backend set up.Now add REACT_APP_GA_ID from your .env REACT_APP_GA_ID in local file.
Finally take the Frontend url from the react frontend app and set it in the backend app on render.com's environmental variable FRONTEND_URL that you previously set up.
Final Adjustments: After deploying both frontend and backend, ensure all environment variables are correctly set and pointing to the right services. Test your live application to ensure everything works seamlessly.
Congratulations! You've successfully set up and deployed your SaaS boilerplate application. This setup provides a solid foundation for developing your SaaS product, with scalable options for payment processing, database management, and deployment strategies. Happy coding!
Coming soon!
Deploy to GCP Cloud Run w/ React inside Django's static files!
Automate all steps in this blog post, all at the click of button!
Tutorials on the code for both backend and frontend repos!
https://github.com/rcmiskin10/dj_react_saas_backend_render_template
https://github.com/rcmiskin10/dj_react_saas_frontend_render_template
P.S comment below on any issues!
Sign up for my newsletter to hear about my #buildinpublic journey! See original post here: https://rcmisk.com/how-to-set-up-a-django-and-react-saas-boilerplate-a-step-by-step-guide
Top comments (0)