Powered by Cookiecutter, Cookiecutter React Django combines the capabilities of Django as a backend service with the flexibility and ease of use of React into the least opinionated framework possible that allows you to jumpstart a production-ready web application.
- Documentation: https://cookiecutter-react-django.readthedocs.io/en/latest/
-
Latest versions of Python, Django and React: With the latest security updates and the newest features available.
-
Docker: Your app becomes a lightweight, standalone, executable package of software.
-
WhiteNoise: Radically simplify static file serving for your web app.
-
Heroku ready: Create an app, set up the configuration and deploy.
Let's assume that you want to create a project called "hello_world", one that makes a separation between a React-based front end and a Django-based backend, all set up locally using Docker and production ready in Heroku.
Most tutorials will give you a partial solution, so the only way is painstakingly piecing it together from multiple guides/tutorials that did some aspect of what you want without covering the whole.
Side projects don't exactly require optimal productivity, but, unlike jobs, if they become a pain to work on, it's pretty easy to just quit.
Instead, we can do as follows. First, get Cookiecutter:
$ pip install "cookiecutter>=1.7.0"
Now run it against this repo:
$ cookiecutter https://github.com/ohduran/cookiecutter-react-django
You'll be prompted for some values. Provide them, then the project will be created for you.
Now, on your terminal, simply do docker-compose up --build
, and wait for the containers to build. Eventually, you'll be able to see the index page by going to http://127.0.0.1/
:
You will be able to see the following:
Write something on that box over there, it will get you the number of characters via your Django API!
To learn more about contributing, please read our contributing docs.
This project is based on a series of tutorials written by Craig Franklin called Creating an app with Docker Compose, Django, and Create React App.
If you're new to Heroku, their getting started guide will walk you through the basics of creating a generic, non-dockerized Python app. If you don’t have it yet, install the Heroku CLI.
-
We can create a Heroku app by running
heroku create
within our project. Once you've done it, Heroku will provide you with the following message:Creating app... done, ⬢ one-example-12345 https://one-example-12345.herokuapp.com/ | https://git.heroku.com/one-example-12345.git
In this case,
one-example-12345
is the name of the app; yours is likely to be different. -
Make sure you link the Heroku app with your repository by running
heroku git:remote -a [app name]
. -
For environment variables in production, you can set the config variables by running the following command:
heroku config:set PRODUCTION_HOST=[app name].herokuapp.com SECRET_KEY=[your secret key] DJANGO_SETTINGS_MODULE=backend.settings.production
You can generate a valid Django Secret Key via this link. REMEMBER to put the key between apostrophes ('), or you will likely get a
-bash: ****: event not found
-
Now run
heroku stack:set container
to tell our Heroku app to use Docker. -
At this point, you're ready to deploy: run
git push heroku master
. -
Checkout https://[app name].herokuapp.com. You should be able to see your web app ready!