How to Set Up a Django and React SaaS Boilerplate: A Step-by-Step Guide

#django #react #stripe #jwt

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 to Pricing and look under API ID and copy id with prefix and numbers/letters like price_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 adding DEV_EMAIL_HOST_USER and DEV_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 testing
Set 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/security
Make 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 import AddIcon 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 from STRIPE_API_TEST_PK in backend/.env
Now add an environmental variable REACT_APP_GA_ID for Google Analytics
Go to https://analytics.google.com/
Add an analytics account
Add an app
Go to top search bar and search for MEASUREMENT ID in Data Streams and copy the ID that has prefix G-XXXXXXXX
Past that G-XXXXXXXX as value for environmental variable REACT_APP_GA_ID in frontend/.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 and frontend 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 everything backend
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 this backend-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 and api 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 setting FRONTEND_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 deployed
Add 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