Dockerized Django React Starter Kit - Django DRF Postgres Webpack SASS Dev and Deploy

Instead of spending ages making the perfect docker setup, more time getting the dev environment just right, figuring out how to hide frontend variables when deploying . . . because oh my goodness, why is deploying so hard, spend your time building features and functions and let this digital kit take care of the rest (no pun intended!)

The Dockerized Django React Digital Startup Kit is a product meant to save Django developers time so you can be more productive. It is dockerized and contains a separate Node JS app for hiding frontend variables. This Startup boilerplate contains Django, the Django Rest Framework (and some premade api’s), Postgres, React, Webpack (so the production build is small), SASS (so you can use mixins and sass variables) and all in Docker containers and all put together. It's easy to set up for development and it’s easy to deploy to Heroku. It contains instructions for all of that.

⚙️ ⚙️ BUILD YOUR DJANGO REACT APP FAST ⚙️ ⚙️

Save time putting your Django React App together fast using this Digital Django React Kit. This Digital Kit saves you time, lets you develop quickly, allows you to focus on building great features and functionality. Django is a great Python Framework for seeing your web app and website ideas turned into reality.

This kit is a boilerplate contains two apps. This purchase is for an instant download, there is no physical component.

You can see the results of what you receive at:

https://bytesizedshenanigans.app

⚙️ ⚙️ Q & A ⚙️ ⚙️

What is this?

This is a Django backed boilerplate that lets you get your project up and running fast. Django is a Python web framework.

How does this boilerplate get projects up and running fast?

It is contains what is necessary for a Django React app from start to deploy so you don't have to spend all your time figuring out setting up Docker, docker-compose, Postgres, the settings to put Django and React together, webpack settings, SASS setup and settings, and deploying to Heroku. All of that is taken care of allowing you to get it up and running fast so that you can add the features and functionalities you've been working on.

Who is this for?

This is for Django Developers who want to get their projects up and running fast. It is important that you have a little experience with Docker and Git.

Why do I need a bonus Node app?

With a Django React App where the React frontend is made with webpack and the whole frontend is served from the Django backend, the frontend variables are not able to be put in the Config variables in Settings in Heroku. The Django backend variables are the only variables that will be able to be put there and will be able to work there.

Why do I need to hide frontend variables in the first place?

In this boilerplate, to keep the APIs hidden from outsiders while readable by the frontend of your site or app, something like API Keys or a similar authentication system is necessary. This boilerplate uses API Keys.

How can this be used more than once?

While each purchase is for one person, that person can start multiple projects with the same setup.

Why Django?

Django is a Python Framework that contains everything needed to allow you to develop fast and to make a safe project.

Why React webpack?

There are multiple ways to set up a React project, but webpack makes for one of the smallest production builds which is why it is used here.

Why SASS (.scss files)?

There are multiple great ways to set up your projects CSS. I prefer to use SASS because it allows me to use mixins (@mixins) and variables ($variables) which you can see in the abstracts folder inside of the styles folder. Some of the styling is from React Bootstrap and some styling is inline with the object they are styling, but SASS takes care of quite a lot of the styling.

Why is this being sold through Etsy?

While software and boilerplates are not usually sold through a site like this, this on is because it makes getting this product to you simple since the structure for taking payments, keeping records, and managing messages is already here. I don't need to reinvent the wheel. You receive it immediately after payment and can set it up in minutes. You can start build fast and focus on functions and features instead of focusing on the perfect setup between Docker, Django, React, your APIs, etc. That means you also do not need to reinvent the wheel because you already have enough to do and you have ideas that need to be made into reality!

⚙️ ⚙️ THE FEATURES OF THIS PURCHASE ⚙️ ⚙️

🌿 Boilerplate Features 🌿
- Only takes minutes to startup for development
- Containerized via Docker and uses docker-compose commands
- Full Django Backend and React Frontend connected and served together from Django
- Instructions for setup, working in, and deployment
- Comprehensive development environment
- Deployable to Heroku - instructions included, contains heroku.yml file for this
- Necessary environment variables to start (you can replace them as well)
- Contains a Makefile for ease of use
- Second Node js site for hiding React Frontend Variables - this contains dev and deploy instructions for Heroku, it is not containerized
- Mediafiles setup to be easily integrated with an S3 bucket
- The static and staticfiles folders collect properly to run the app

🌿 Backend Features 🌿
- The settings.py file exchanged for a settings folder with 3 files, base.py, development.py, and production.py
- cors headers, csrf, and other important header related settings are set up for development and production
- Database is setup for Postgres
- Four models and one support model. (users, site contents, items which is akin to products, contacts, and a common model that is used by the others)
- Uses the Django Rest Framework
- 3 serialized API's with the models
- The API's connect with the frontend
- The API's are hidden from anyone not logged in
- The admin side of the backend is also set up for ease of use
- Local app for the frontend separate from the other added apps
- Staticfiles and templates completely configured to work with the frontend
- Example management command setup
- Email service settings included, comment them out if unneeded

🌿 Frontend Features 🌿
- React, SASS Styling, webpack all work together
- webpack folder contains 5 files, one common, one config, and then dev, stage, and prod
- package.json file has the corresponding commands for webpack
- Broken into src and public folders
- Fill in images and favicon for you to replace
- Information in the notes as to what shows up in dev, stage, and prod and why
- Day/Night React toggle paired with SASS @mixins and tags
- mixins (@mixins) and variables ($variables) in SASS files which make styling easier
- Can take backend model instance information for frontend styles
- createBrowserRouter setup and works, works with the backend
- useQuery hooks in use to expand off of, useQuery connects to the backend
- A small amount of Redux in use to work off of
- Form to take in anonymous feedback with useForm
- Another example form with useForm
- React Helmet is in use
- Text from the backend run through React Markdown on the frontend
- Footer, Spinner, Navigation (in Root.jsx), an error page, and error notes

There are more little features here and there as well. While there are likely a couple things that are not included that you would like, it still contains so much that you can build fast and save time.

⚙️ ⚙️ WHAT YOU RECEIVE ON PURCHASE ⚙️ ⚙

On payment, you receive the SaaS boilerplate in two zipfiles.

🌺 big_boilerplate.zip:
BigBoilerplate/DockerizedDjangoReactWebpackSASSBoilerplate.PDF
BigBoilerplate/big_boilerplate/<Workspace Code>

🌺 node_app.zip:
hidevars/HideVariablesInNode.PDF
hidevars/hidevars/<Code for hiding frontend variables>

Within 24 hours you can receive access to read-only private repositories with this, other functions, and future updates. There are no yearly fees or subscriptions.

🌺 A demo version of a site made with this all in one SaaS boilerplate and all of its included functions is available here:
https://bytesizedshenanigans.app

The demo shows the frontend functions you receive, there is more as well.

Here is a link to how it looks when the backend is being set up. It is a sped up youtube video. It took 4 minutes.
https://youtu.be/bBsV2_yD6qU️

⚙️ ⚙️ FILE STRUCTURE (SHORTENED) ⚙️ ⚙️

Below gives an idea of the structure of the project, though I added in explanations of what is in folders instead of every file name in each folder. The project tree is much larger when shown in full. The node js file only contains seven files.

big_boilerplate/
🌺 big_wf_project/ Contains Settings Broken into Development and Production, main urls.py file, and an S3 setup for production
🌺 core_apps/ Core apps contain models, views, urls, serializers, and more
🌿 articles/ App that is set up for articles or blog posts, runs the main text through markdown language via react markdown
🌿 common/ App that covers common model uses
🌿 contacts/ App that takes in anonymous contacts from the frontend, also contains an example of a management command
🌿 item_urls/ App that is like a product listing through the backend
🌿 site_contents/ App that allows user to add text on the backend to show up on the frontend
🌿 users/ Custom authorized user model setup
🌺 instructions/ Contains 4 instruction files and a project tree file
🌺 ui_frontend/ The React Frontend nested inside of a Django app - React, SASS Styling, and the built out frontend are all contained here. Django views and urls in use here as well.
🌺 webpack/ Contains 5 Files for different use cases
.babelrc
.gitignore
Dockerfile
Dockerfile.prod
docker-compose.production.yml
docker-compose.yml
entrypoint.sh
heroku.yml
Makefile
manage.py
package.json
Pipfile
READEME.md
requirements.txt
runtime.txt

⚙️ ⚙️ PREREQUISITES ⚙️ ⚙

Recommended experience: Django, the command line, Git commands and Github, and at least some basic experience with React, exposure to CSS styling.

Programs needed: A text editor, a program like Terminal or Powershell to run the command line and the libraries necessary to run the commands, Docker Desktop, a browser. Node will need to be installed for the second app for hiding React variables. Most of the other libraries and frameworks will be installed inside the Docker containers.


⚙️ ⚙️ UPDATES ⚙️ ⚙️

You also get read only access to private repositories which will have updates and already have extra content like adding an animated background, but it can take me up to 24 hours to add you.

Send your GitHub user email so I can add you the repositories. You also have the option to receive update emails. These emails are for sending notice of breaking changes and updates, they are not a newsletter or a sales letter.


⚙️ ⚙️ LICENSING ⚙️ ⚙️

🌺 This Django React App SaaS boilerplate for developers is licensed for one person per purchase, though said person can use it to make multiple projects which can be sold commercially with the exception of reselling it as a boilerplate.

You can:
🟢 Make apps and sites from this boilerplate, one copy per person, but it can be used more than once by said owner
🟢 Give it is a gift only to be used by the receiver of the gift

You can not:
❌ Resell it as a SaaS boilerplate on Etsy or any other site
❌ Share it with others or give away copies of this digital product
❌ Make a few changes and repackage and sell it as a boilerplate on Etsy or another sales site


🌺 🌺 Listing Image Credits 🌺 🌺
Icons:
Django Green Icon from: https://icons8.com/icon/qV-JzWYl9dzP/django
Postgres Icon from: https://icons8.com/icon/38561/postgresql
Webpack Icon from: https://icons8.com/icon/sOWbK4N3cxGh/webpack
Sass Icon from: https://icons8.com/icon/QBqFNfPPB2Kx/sass
Docker Icon from: https://icons8.com/icon/cdYUlRaag9G9/docker️