How to Set Up a Django and React SaaS Boilerplate: A Step-by-Step Guide
Tags: django, react, stripe, jwt
Published: 2024-03-13 23:32:27


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](https://postgresapp.com/). 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](http://127.0.0.1:8000/admin/payments/product/) to add Stripe products and their prices. Ensure each product in Django matches its counterpart in Stripe, including the recurring intervals and price IDs.

1. You can find Stripe Product Id in [stripe products](https://dashboard.stripe.com/test/products?active=true) 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.

2. Do the same for all products

3. Now go to [Django Admin Product Price](http://127.0.0.1:8000/admin/payments/productprice/)

4. Add the price for each product from Stripe here: [Django Admin Add Product Link](http://127.0.0.1:8000/admin/payments/productprice/add/)

5. Select `Product` that you added to Django Admin.

6. Add the Price from what you entered on Stripe. Add the interval, i.e. Monthly

7. Add the stripe price id

8. Go to https://dashboard.stripe.com/test/products?active=true

9. 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. 
10. Do for all products
11. Now you can add descriptions of the tiers here: [Django Admin Add Product Description Link](http://127.0.0.1:8000/admin/payments/productdescriptionitem/add/)

12. 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.

13. Set `DEV_EMAIL_HOST_USER` to your gmail for DEV testing

14. 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

15. Make sure 2-Step Authentication is enabled.

16. Then go to https://myaccount.google.com/apppasswords and create a new app and a new password will be created.

17. Now Emails will be sent through gmail smtp in DEV

18. Next up is setting up the landing page data.

19. Note here you can add whatever copy, images, icons, you would like through the Django admin

20. Go to http://127.0.0.1:8000/admin/landingpage/landingpage/add/

21. Add the hero section copy and image

22. Add the features of your SaaS

23. 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`

24. 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.

25. Do the same for how it works, Secondary hero, and Social Media Links

26. 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
```
1. Configure Environment Variables: Create a `.env` file in your frontend directory. Add your Stripe Publishable key and Google Analytics ID.

2. 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`

3. Now add an environmental variable REACT_APP_GA_ID for Google Analytics

4. Go to https://analytics.google.com/

5. Add an analytics account

6. Add an app

7. Go to top search bar and search for `MEASUREMENT ID` in `Data Streams` and copy the ID that has prefix `G-XXXXXXXX`
8. Past that `G-XXXXXXXX` as value for environmental variable `REACT_APP_GA_ID` in `frontend/.env`

9. 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**
1. Prepare for Deployment: Ensure your `backend` and `frontend` folders are pushed to separate GitHub repositories.

2. **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.

3. Follow tutorial here: https://docs.render.com/deploy-django#use-renderyaml-for-deploys

4. 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`

5. In the Render Dashboard, go to the [Blueprints](https://dashboard.render.com/blueprints) page and click New Blueprint Instance.

6. Make sure to first create a repository to hold your `backend/` folder on github.

7. Now you can select the repository that contains your blueprint and click Connect.

8. Give your blueprint project a name and click Apply.

9. Now add the Production Environmental Variables by clicking the backend app and going to Environment

10. 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.

11. Same with the:
``` 
STRIPE_API_TEST_SK
STRIPE_LIVE_MODE=False
```
12. `BACKEND_URL` will be the url that your backend render app is pointing to: something similar to this `backend-xxxxonrender.com`

13. For your media files first set up Cloudinary account by going to the [cloudinary](https://cloudinary.com/) 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`.

13. Add the cloud name to `CLOUDINARY_CLOUD_NAME`

14. Add the api key to `CLOUDINARY_API_KEY`

15. Add the api secret to `CLOUDINARY_API_SECRET`

16. 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`

17. Set `DEFAULT_FROM_EMAIL` to your email with postmark.
After you deploy the frontend app below, come back to setting `FRONTEND_URL`

18. 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.

19. To see your backend admin page, go to `<YOUR_APP_URL>/admin` to login.
20. **Deploying the Frontend:** Deploy your React app on [Render.com](render.com), setting environment variables for connecting to the backend API, Stripe, Cloudinary, and Google Analytics.

21. Connect your github account here: https://dashboard.render.com/select-repo?type=static

22. Follow the instructions to deploy

23. Once deployed go to settings for frontend app

24. In Redirect/Rewrite rules add:

`/*` as Source

`/index.html` as Destination

And `Rewrite as Action

25. Now go to Environment and add:

`REACT_APP_STRIPE_API_TEST_PK` to same Stripe API Key that you set in backend

26. Add `REACT_APP_BACKEND_API_URL` and use the backend url from above after backend was deployed

27. 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.

28. Now add REACT_APP_GA_ID from your .env REACT_APP_GA_ID in local file.

29. 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.

30. 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](https://rcmisk.com/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