DEV Community

Amartya Gaur
Amartya Gaur

Posted on • Edited on

Flutter signup/login application with Django backend #2

Next steps

This post is in continuation of the other post that I wrote about the same topic. If you have not read that, please go ahead and give it a read so that you can follow along with this one. Flutter signup/login application with Django backend #1.
Coming to the point. I am kind of new to flutter and these are the posts I am writing as I am developing the application. I started by calling the freshly made APIs in the previous post with flutter. The problem is that even after defining port multiple times the application did not properly communicate with the localhost:8000. So, I decided to host this application and then call them.

Host your application

Since this series of posts will be a detailed step by step procedure that can be replicated to get the exact same application running, I thought it would be a good idea to include this step in the process.
When it comes to hosting Django application you have two options:

  1. Host it on a VPS (you need to configure gunicorn and Nginx for it refer: this tutorial).
  2. Host it on Heroku (or python anywhere etc. etc). Well, to be honest, the second method is relatively simple and we are going to do just that as our aim here is to just see how stuff works.

Hosting your application on Heroku

Changes required

Heroku provides a very easy method for hosting Django applications, the first step is to modify a few settings and add a few files in order to prepare our application for hosting.

We will be deploying using gunicorn so let us install that, run:

pip install gunicorn
Enter fullscreen mode Exit fullscreen mode

We will be using django-heroku package to configure our setting.py file automatically. Thus, install that too:

pip install django-heroku
Enter fullscreen mode Exit fullscreen mode

The first file we need to include is requirements.txt so that Heroku can recognize your application as a python application. Thus, activate your virtual environment and run:

pip freeze > requirements.txt
Enter fullscreen mode Exit fullscreen mode

from HOME/

Create a Procfile

nano Procfile
Enter fullscreen mode Exit fullscreen mode

and add :

web: gunicorn HOME.wsgi --log-file -
Enter fullscreen mode Exit fullscreen mode

For the admin portal to run properly, we need static files' support, for that, we need to configure STATIC_ROOT property in our settings.py file, we also need to include django-heroku settings in the file. Thus, modify your HOME/HOME/settings.py and add the following:

import django_heroku # add in the beginning

... # denotes rest of the code in between

# add these lines at end
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

django_heroku.settings(locals())
Enter fullscreen mode Exit fullscreen mode

Pushing our code to deploy it

We need to create an account on heroku and install heroku-cli. These instructions suffice for Ubuntu / Windows / Mac. I use Manjaro (yay as the installer) therefore just for reference, to can be installed by:

yay -S heroku-cli
Enter fullscreen mode Exit fullscreen mode

It is the perfect time to log in to your heroku cli, run

heroku login
Enter fullscreen mode Exit fullscreen mode

Next, we need to create an app, run

heroku create <app_name>
Enter fullscreen mode Exit fullscreen mode

Now copy all your files from the HOME/ directory to this app_name/ directory we created just now.

Now is the time to run these magic commands (we are deploying using git make sure git bash is installed refer: here)

git add .
git commit -m "deploying to heroku"
git push heroku master
Enter fullscreen mode Exit fullscreen mode

Now we need to migrate our changes on the heroku server as well. Thus run:

heroku run python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

Also, create a superuser with the same credentials as your local application (for consistency).

heroku run python manage.py createsuperuser
Enter fullscreen mode Exit fullscreen mode

You should now be able to call your APIs with the URL you got here. Verify the functionality using POSTMAN before proceeding. Also, refer to my previous post for details about the endpoints, etc.

I will be publishing the next post in the series on Monday (20/04/20). Stay tuned.

Next Post: Flutter signup/login application with Django backend #3

Previous Post:
Flutter signup/login application with Django backend #1

Top comments (11)

Collapse
 
rishi2309 profile image
Rishi2309

Hai @amartyadev I have some doubts on hosting app in heroku. I tried what you mentioned in this article but I got 503 internal server error and app crashed report. That is somthing mentioned like H10. Can you help me ?

Collapse
 
amartyadev profile image
Amartya Gaur

Sure, I would love to help, let us chat on hangouts, let me know your email

Collapse
 
rishi2309 profile image
Rishi2309
Collapse
 
rishi2309 profile image
Rishi2309

I sent connection request on linkedin kindly accept it

Collapse
 
surya7765 profile image
surya7765 • Edited

Hello @amartyadev Could you please share the final post link?

The above link is not opening

Collapse
 
amartyadev profile image
Amartya Gaur

Should be working now

Collapse
 
suhailvs profile image
suhail
Collapse
 
justshoveit profile image
Himadri

Hey @amartyadev I have the same error as Rishi, tried a lot to fix the error on my own. In a pinch here any help will be appreciated please, thank you

Collapse
 
amartyadev profile image
Amartya Gaur

Sure you can mail me for starters

Collapse
 
justshoveit profile image
Himadri

Your email please or mine is himadri.dares@gmail.com

Thread Thread
 
amartyadev profile image
Amartya Gaur