Hey Everyone, I am pleased to announce that I and My friend(@thekrprince) has launched a new website called Task Tracker. (@thekrprince) developed the front-end and I developed the backend.
I deployed the Task Tracker at Heroku. In this blog I will share each steps what needs to be followed for deploying a full stack web application without any cost. Below are the steps to deploy Full stack web app using Heroku.
Front-End Setup
- Move your front-end folder at root directory. Follow the below structure.
├── node_module
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── requirements.txt
2.Install axios
which is simple promise based HTTP client for the browser & node.js.
npm install axios
3.Add proxy
at package.json
.
4.As we are going to deploy this app at Heroku, we have to add npm
& node
version inside engines
at package.json
.
5.Django protects the server from malicious websites. So protect it by adding built-in feature. Add below code at index.js
.
Backend Setup
1.Back-end folder at root directory of git. Don't add your code under sub folder. Because Heroku need to understand which languages you are using.Check the below structure for your project and app.
├── node_module
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── setupTests.js
├── ToDoProject
│ ├── __init__.py
│ ├── __pycache__
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── todoapp
│ ├── __init__.py
│ ├── __pycache__
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── serializers.py
│ ├── tests.py
│ ├── urls.py
│ |── utils.py
│ |── views.py
├── .gitignore
├── manage.py
├── package-lock.json
├── package.json
├── README.md
├── requirements.txt
2.Add application at INSTALLED_APPS
in Settings.py.
3.We need to install few dependencies. Add below dependencies in your requirements.txt
python-decouple: We can remove sensitive data like SEECERT_KEY, DB Password from
settings.py
and add it in.env
file.django-heroku: We have to Configure Django app for Heroku. This lib provides settings, logging and test runner configurations.
django: This will install the django.
djangorestframework: For creating the rest framework APIs we need to install it.
django-cors-headers: Django CORS(Cross Origin Resource Sharing) header allow resources to be accessed from other domains(i.e you can access your data from front-end domain).
gunicorn: Python WSGI HTTP Server.
whitenoise: This module helps to manage the static media for your application. This need to be added as a middleware in Django settings.py.
psycopg2: Psycopg is a PostgreSQL adapter for the Python programming language.
dj-database-url: This simple Django utility allows you to utilize the 12factor inspired DATABASE_URL environment variable to configure your Django application.
4.Add rest_framework
, corsheaders
and whitenoise.runserver_nostatic
in INSTALLED_APPS
in Settings.py.
5.Add corsheaders
and whitenoise
as a middleware in Middleware
section.
Add CORS_ORIGIN_ALLOW_ALL
as True
after Middleware
.
6.Import below requirements at Settings.py
.
7.Configure your .env
(This file is added at.gitignore
file) file like below then configure you Database
and add dj_database_url
after DATABASES
in Settings.py
.
.env
SECRET_KEY = xcr3tps4......
DEBUG = FALSE
DB_NAME = <DB_NAME>
USER_NAME = <USER_NAME>
PASSWORD = <PASSWORD>
HOST = localhost
8. We need to include react build
template at django templates in Settings.py
.
9.Add below configurations in Settings.py
. STATICFILES_DIRS
pointing tobuild/static
path as React contains the static file to this path.
10.Add index.html
or home.html
at urls.py
(inside ToDoProject).
Heroku Setup
1.Create an account at Heroku
2.Download Heroku CLI
3.Login to heroku account using heroku login
command.
4.Create an app either using CLI or Heroku Dashboard.
CLI
heroku create <APP_NAME>
5.Add Heroku remote.
heroku git:remote -a tasktrackerapps
6.Add this app name into the ALLOWED_HOSTS
section at Settings.py
.
ALLOWED_HOSTS = ['localhost','127.0.0.1','tasktrackerapps.herokuapp.com']
7.Heroku needs to understand what types of application you are going to deploy. So, Heroku introduced buid packs
. This is responsible to run dependencies of your application as well.
CLI
$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
8.We have .env
file configuration from backend(steps 7). We should make sure that Heroku get those value from .env
. But these values are not present at my github repo.
Let's add those values using below techniques.
heroku config:set DEBUG=FALSE
heroku config:set SECRET_KEY=<SECRET_KEY>
heroku config:set DB_NAME=<DB_NAME>
heroku config:set USER_NAME=<USER_NAME>
heroku config:set PASSWORD=<PASSWORD>
heroku config:set HOST=localhost
9.Make sure all the config variables are added successfully else you might encounter an error while deploying the app.
heroku config
10.Now come to Postgres configuration.
CLI
heroku addons:create heroku-postgresql:hobby-dev
- Confirm database is created
heroku config | grep DATABASE_URL
OR
heroku pg:info
Dashboard
- Install Heroku Postgres
Click on Create One under Heroku Postgres.
Click on Install Heroku Postgres.
- Choose
add-on
plan accordingly. I have chosenHobby dev-free
plan fortasktrackerapps
app. It provides 1GB available free Postgres database.
11.You can push your local database to Heroku Postgres.
PGUSER=<USER_NAME> PGPASSWORD=<PASSWORD> heroku pg:push postgres://<HOST>/<DB_NAME> <HERUKO_POSTGRES_DB_NAME>
Example:
PGUSER=postgres PGPASSWORD=postgres heroku pg:push postgres://localhost/taskapp postgresql-triangular-08058
12.Avoid staticfile related error at heroku by disablingcollectstatic
.
heroku config:set DISABLE_COLLECTSTATIC=1
13.Create a file and name it Procfile. Add below code on it.
web: gunicorn <Project_Name_Which_Contains_Settings.py>.wsgi --log-file -
14.You must add the python version that supported by Heroku runtime at runtime.txt.
python-3.9.9
- Check full folder structure
├── node_module
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── setupTests.js
├── ToDoProject
│ ├── __init__.py
│ ├── __pycache__
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── todoapp
│ ├── __init__.py
│ ├── __pycache__
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── serializers.py
│ ├── tests.py
│ ├── urls.py
│ |── utils.py
│ |── views.py
├── .gitignore
├── manage.py
├── package-lock.json
├── package.json
├── Procfile
├── README.md
├── requirements.txt
├── runtime.txt
15.I have chosen Github as a deployment method and connected with profile.
14.Enabled automatic deployment. Once you pushed the code, deploy the app on heroku.
Open app and check if it the app successfully deployed or not.For any application issue try with below command.
heroku logs --tail
As you see it's very simple to deploy your application at Heroku. If you face any issue feel free to comment your issue here. I would love to help you out.😄
Thank you so much for reading.✌🏻
Top comments (5)
Thanks for those instructions. I have a problem when trying to access django-admin page when DEBUG is False
Great blog. Finally I can also deploy.⚡
Thank you 😊
It was an worth scrolling, Amazing article!
Thank you 😊