Git Product home page Git Product logo

leslie-alldridge / docker-django-auth-react-redux-webpack-boilerplate-heroku Goto Github PK

View Code? Open in Web Editor NEW
3.0 2.0 2.0 392 KB

A boilerplate inspired by Traversy Media, made with my personal flavour :bulb:. Django + Auth :heavy_check_mark:, SQLite, React, Redux, Webpack app within a Docker container :whale: and ready for deployment to Heroku. :six_pointed_star:

Home Page: https://boilerplate-dj-react.herokuapp.com/#/login

Dockerfile 0.72% Python 33.94% JavaScript 61.96% HTML 3.26% Procfile 0.12%
react redux webpack heroku docker container deploy django python sqlite3

docker-django-auth-react-redux-webpack-boilerplate-heroku's Introduction

This app is ready for deployment to Heroku (last deployed 03/02/2019)

Link (allow 20 seconds for it to load if server has idled) https://boilerplate-dj-react.herokuapp.com/#/login

Technology

  • Docker
  • Django
  • React
  • Redux
  • Webpack
  • SQLite3 / Postgres
  • Knox (auth)
  • Axios (api calls)

Breakdown of files

  • /frontend <- contains all of the React frontend code
  • /app <- main python application
  • /accounts <- code related to users/auth
  • All of the other files should be self explanatory - reach out if you get stuck though

Run locally and Deploy to Heroku using Heroku CLI

Note: The code will change between local/deployed version in the following files:

Dockerfile

heroku is:   CMD python3 manage.py runserver 0.0.0.0:$PORT
local is:    CMD python3 manage.py runserver

docker-compose.yaml

heroku is:   command: python manage.py runserver 0.0.0.0:$PORT --noreload
local is:    command: python manage.py runserver

  1. Follow the steps here to spin up a local docker container running Django https://docs.docker.com/compose/django/
  2. Replace the contents of your project folder with the contents of this repository
  3. Because your code has changed, run
docker-compose build
docker-compose up
  1. The latest build is ready and should be running locally on localhost:8000
  2. Run the following commands to deploy to Heroku

(you will need Heroku CLI installed https://devcenter.heroku.com/articles/heroku-cli#download-and-install)

heroku container:login
heroku create your-app-name-goes-here
heroku container:push web -a your-app-name-goes-here
heroku container:release web -a your-app-name-goes-here
  1. The app will push to Heroku and deploy successfully but it won't work. The reason for this is we need to provision Postgres as an addon
  2. Install Postgres from your Apps Heroku page > Resources > Search for add ons > Heroku Postgres
  3. Once provisioned, the app still doesn't work as we will need to run migrations
  4. Jump into the console More > Run Console and type python manage.py migrate
  5. Once the migrations have completed, the app is ready to go!

I've changed my react code but my page hasn't updated?

You will need to run webpack locally before pushing to Heroku as the main.js file will contain code relating to your app when webpack was last run.

npm run dev

Pip won't install my dependencies / the right dependencies

Check the requirements.txt file and ensure the Docker file has

COPY requirements.txt /code/
RUN pip install -r requirements.txt

I had to change my Docker set up / other deployment related files

Ensure you push and release the latest container to Heroku so your changes are live.

Can I use this in Production?

No. Heroku documentation doesn't recommend running a Django web server in Production - you should use something such as NGINX. You'll also need to set the SECRET_KEY in Django to an environment variable.

Can I use your code?

Sure thing, Fork it over and deploy in <5 minutes ๐Ÿณ ๐Ÿฑ

docker-django-auth-react-redux-webpack-boilerplate-heroku's People

Contributors

dependabot[bot] avatar leslie-alldridge avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

docker-django-auth-react-redux-webpack-boilerplate-heroku's Issues

Social Auth

Can you add an example of authorization through social networks?
rest-auth
allauth

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.