ohduran / cookiecutter-react-django

From hello world to Heroku deployment, using separated Front and Back Ends

Cookiecutter React Django

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/

Features

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

Star History

Local setup

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!

Contributing

To learn more about contributing, please read our contributing docs.

Usage

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.

Deploy to Heroku

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.

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

2. Make sure you link the Heroku app with your repository by running heroku git:remote -a [app name].

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

4. Now run heroku stack:set container to tell our Heroku app to use Docker.

5. At this point, you're ready to deploy: run git push heroku master.

6. Checkout https://[app name].herokuapp.com. You should be able to see your web app ready!