DEV Community: Shakib Hossain

Deploy Your Django + React.js app to Heroku

Shakib Hossain — Fri, 26 Jul 2019 15:27:48 +0000

Nowadays, in most cases we see that there's a backend that provides an API and various front-end technologies like React, Vue, Mobile apps use this API endpoints to provide a user interface to the user. This method of development is becoming more and more popular with the rise in popularity of the great JavaScript frameworks like React, Vue, Angular etc.

There are mainly two ways you can deploy this kind of web apps:

Separating Backend and Frontend: In this method, you server your back-end and front-end apps separately and they connect to each other with their respective URIs. One major overead of this approach is you have to configure CORS yourself. If you don't know about CORS you can learn more here.
Serving from the same host: In this method you will be serving the app from the same URI so it removes the CORS overhead. Also, it makes it easier to maintain smaller-medium sized apps. You don't want to create two separate repositories for some simple sites like a blog, to-do etc.

Overview

I will show you how I integrated my Django app with my React.js front-end. We will follow the below steps:

Generate a React app with create-react-app
Create virtualenv and install necessary dependencies
Generate a django project inside our React app
Update both app settings
Deploy to Heroku

The code example shown in this tutorial is available here.

Setup

I am listing the tech stack I am using below, just in case:

Node 11.15.0
Python 3.7.3
yarn 1.17.3 (Node package manager)
poetry 0.12.16 (Python package manager)

P.S. poetry is fairly new to the Python community. This makes the dependency management of python projects much more convenient. Also, similar to pipenv this handles the virtualenv for you. You can use this one or just use pip, pipenv or any other solution you like.

Generating React App

First, We have to generate our react application which will work as our front-end. For this tutorial, I'll name the project django-react-boilerplate. Change it to your liking. Let's create our react app. Here, I am generating a react app that uses TypeScript. You can ignore that by just ommitting the --typescript part from the above command. Run the below command to generate your React app:

$ yarn create react-app django-react-boilerplate --typescript

The above command will create a directory named django-react-boilerplate and it should have the below structure.

django-react-boilerplate
├── node_modules
├── public
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── serviceWorker.ts
├── package.json
├── tsconfig.json
└── yarn.lock

Create Python Virtualenv

I will use Poetry to do this. So, if you are following exactly step-by-step you have to install poetry. You can get instructions from here. You are free to choose any other virtual environment solution you like in your case. First of all let's change directory to the generated react app. And then initialize poetry. It will ask you some general project related questions. You can choose to answer them, otherwise default values from Poetry will be used. You can also install your dependencies when you are installing your app but I will not do that in my case. After following the above instructions your shell might look something like this.

$ cd django-react-boilerplate
$ poetry init

This command will guide you through creating your pyproject.toml config.

Package name [django-react-boilerplate]:
Version [0.1.0]:
Description []:
Author [Shakib Hossain <shakib609@gmail.com>, n to skip]:
License []:
Compatible Python versions [^3.7]:

Would you like to define your dependencies (require) interactively? (yes/no) [yes] no



Would you like to define your dev dependencies (require-dev) interactively (yes/no) [yes] no

Generated file

[tool.poetry]
...
...

Do you confirm generation? (yes/no) [yes] yes

After finishing up generating your pyproject.toml file. You can now move on to installing the dependencies which we will need for our project. Let's install them:

$ poetry add django djangorestframework whitenoise gunicorn django-heroku

The above command will generate a virtualenv for you and install all the dependencies into it.

P.S. You might face problems while installing django-heroku if you don't have postgresql installed.

Generate Django App

Now it's time to generate our django app. We have to first enable our virtualenv. If you're using poetry then follow along, otherwise use your solutions method of activating the virtualenv. Poetry users can activate their virtualenv using the below command:

$ poetry shell

After activating the shell now we have access to our django python package and scripts that come with that package like django-admin. Let's generate our project inside the django-react-boilerplate directory. I am naming my backend project name backend. You're free to choose your own. Run the below command to generate the project inside the current directory:

# Make sure you're inside the django-react-boilerplate directory
$ django-admin startproject backend .

After generating the django project our project structure will look something similar to this.

├── backend
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── package.json
├── Procfile
├── public
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── pyproject.toml
├── README.md
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── serviceWorker.ts
├── tsconfig.json
└── yarn.lock

Update Settings

First change that we will do is add a proxy key to our package.json. This will proxy all our API requests in development. You can learn more about it here. Add the following line to your package.json file.

{
  ...
  "proxy": "http://localhost:8000"
}

After that, we have to create a directory named static inside the public directory. We will move the contents of the public directory into this new static directory except the index.html file. After moving the public directory should look like this.

public
├── index.html
└── static
    ├── favicon.ico
    └── manifest.json

We have to move these files, so that when we build our React app by executing yarn build we will get these files inside a build/static directory, which we will use as our Django projects STATIC_ROOT.

Now, according our directory structure we have to refactor the public/index.html file. Open public/index.html file and update the favicon.ico and manifest.json urls to /static/favicon.ico and /static/manifest.json.

All the configuration to our React app is done. Now, we have to configure our Django project.

We mainly have one HTML file to serve(the React app generated HTML file). Let's create a view in our django app to serve this HTML file. I'll use Generic TemplateView to create the view. Create a views.py file inside the backend directory and add the below python code to the file:

from django.views.generic import TemplateView
from django.views.decorators.cache import never_cache

# Serve Single Page Application
index = never_cache(TemplateView.as_view(template_name='index.html'))

One thing to notice here that, I am using the never_cache decorator while initializing the index view. This decorator is pretty straight-forward. This adds headers to a response so that it will never be cached. We will be generating our index.html file from our React app which might change any time. That's why we do not want any browser to cache obsolete index.html file.

We've wrote the index view. Now let's add it to the urls.py. We will serve the index.html from our root url. Now open your urls.py and update it according to the code below:

from django.contrib import admin
from django.urls import path

from .views import index

urlpatterns = [
    path('', index, name='index'),
    path('admin/', admin.site.urls),
]

Most of our work is done. All now we have to do is update our backend/settings.py file. Here, we'll first do everything as instructed in django-heroku documentation. After applying these changes, Our app won't work straightaway. We have to update our settings.py file further to make it work. First, add whitenoise and rest_framework to your INSTALLED_APPS like below. You have to list whitenoise right before django.contrib.staticfiles. And we also have to add the whitenoise middleware right after Djangos SecurityMiddleware.

INSTALLED_APPS= [
    ...
    'whitenoise.runserver_nostatic',  # < As per whitenoise documentation
    'django.contrib.staticfiles',

    # 3rd party apps
    'rest_framework',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',  # Whitenoise Middleware
    ...
]

Now, we have to update our TEMPLATES settings, so that our django app can find the index.html we referred to in our backend/views.py file. You can add additional directories you want to include here too.

TEMPLATES = [
    {
        'BACKEND':
        'django.template.backends.django.DjangoTemplates',
        'DIRS':
        [os.path.join(BASE_DIR, 'build')]
        ...
    }
]

Almost ready! We have to update our STATIC file related settings and move them to the bottom of the backend/settings.py file. Update your settings.py file like below:

# Import django_heroku module at the top of your settings.py file
import django_heroku

...
...


# Configure app for Heroku deployment
django_heroku.settings(locals())

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/
STATIC_URL = '/static/'
# Place static in the same location as webpack build files
STATIC_ROOT = os.path.join(BASE_DIR, 'build', 'static')
STATICFILES_DIRS = []

# If you want to serve user uploaded files add these settings
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'build', 'media')

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

Testing Our Setup

We are now ready to test our app. A few things we have to keep in mind in this setup:

Always run yarn build after you've updated your front-end
While developing, you have to run the react server and django server separately to make use of the built-in hot-reload of these servers.

Now, run the below commands to test whether our app is serving the files correctly.

$ yarn build
$ poetry shell
$ python manage.py runserver

Open your preffered browser and navigate to localhost:8000. You should see the default React app.

Preparing for Heroku Deployment

First, let's create our heroku app with the below command(Make sure you have heroku-cli installed):

$ heroku create drt-boilerplate

Add nodejs and python buildpacks and the postgresql addon to our app.

$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
$ heroku addons:create heroku-postgresql:hobby-dev

Create a Procfile:

release: python manage.py migrate
web: gunicorn backend.wsgi --log-file -

Here, the release option makes sure to run your django migrations after each deploy. And the web option serves your django application using gunicorn HTTP server.

You have to generate a requirements.txt file for heroku deployments. So, don't forget to do that.

$ poetry export -f requirements.txt --output requirements.txt

We are ready to push the first version of our app. Create a git repository and make a commit. After that, push the files to heroku by running the below command:

$ git push heroku master

This will trigger a deploy and show you your deploy progress. After a successful deploy it will show you the URL of your app. In my case, the URL is https://drt-boilerplate.herokuapp.com/. Now, pat yourself on the back for accomplishing this. 😀

This article was first published here.

Create a Todos app with Flutter and Provider

Shakib Hossain — Mon, 03 Jun 2019 22:12:45 +0000

Todo apps have always been a good first app for starters to learn something new. I also created this app solely for learning purposes. I have used provider package which is now the recommended way of managing your state inside Flutter apps. So, I will be showing you how you can create a Todo app yourself with flutter using provider as the state management system.

You can find the finished app here.

Prerequisites

Basic Understanding of Flutter and Dart
Flutter installed properly on your system

Creating and Installing dependencies

We will start by creating a flutter app. You can use your favorite IDE(Android Studio, Intellij IDEA, VS Code) to create your flutter app. But, I will be creating the app through the terminal. You can run the command below from your workspace to create a new flutter project.



$ flutter create todos

After creating the app. Go to your project directory and open up the pubspec.yaml file. And add the dependency for the provider package we will be using for managing the state of our app. You can remove the cupertino-icons dependency from the file. We will not be using anything from that package in this project.



dependencies:
  flutter:
    sdk: flutter
  provider: ^2.0.1+1

After updating the file run the below command to fetch all the packages enlisted in your pubspec.yaml file.



$ flutter packages get

The above command will create a new directory named todos in your workspace. We can now start working on our todos app.

Creating Model

We will be working with a single model on our app. As this is a very simple app we only need to create a Task's title and whether it's completed or not.

I like to keep my projects organized. So, I have created this model in a separate file inside the lib/models directory. My lib/models/task.dart file looks like this. I have assumed that when a completed argument is not passed to the constructor the Task is not complete.

P.S. I imported the material package here to annotate the required arguments to the Todo class constructor. Also, here



import 'package:flutter/material.dart';

class Task {
  String title;
  bool completed;

  Task({@required this.title, this.completed = false});

  void toggleCompleted() {
    completed = !completed;
  }
}

Creating `TodosModel` Provider

This is the section where I created the TodosModel class which extends the ChangeNotifier class. This is a provider package specific class. This model will help us change the state of our app and also notify flutter when to re-render our app or app portions. So, let's create a new file lib/providers/todos_model.dart.

Here, I am using the UnmodifiableListView from dart:collection to create my getters. This is to ensure that our getters can not be manipulated in any way from outside of the TodosModel declaration.

One other important thing you might notice is that the frequent use of notifyListeners. This method notifies flutter whether the state change requires a re-render of UI or not.

P.S. Only the UI widget which are listening to the provider will be re-rendered.



import 'dart:collection';

import 'package:flutter/material.dart';

import 'package:todos/models/task.dart';

class TodosModel extends ChangeNotifier {
  final List<Task> _tasks = [];

  UnmodifiableListView<Task> get allTasks => UnmodifiableListView(_tasks);
  UnmodifiableListView<Task> get incompleteTasks =>
      UnmodifiableListView(_tasks.where((todo) => !todo.completed));
  UnmodifiableListView<Task> get completedTasks =>
      UnmodifiableListView(_tasks.where((todo) => todo.completed));

  void addTodo(Task task) {
    _tasks.add(task);
    notifyListeners();
  }

  void toggleTodo(Task task) {
    final taskIndex = _tasks.indexOf(task);
    _tasks[taskIndex].toggleCompleted();
    notifyListeners();
  }

  void deleteTodo(Task task) {
    _tasks.remove(task);
    notifyListeners();
  }
}

Finally UI

In this final section, I will discuss on how I laid out the UI and also how I plugged the TodosModel I created in the previous section.

First let's see the structure of the app.

The app will mainly consist of two screens.

Home Screen
Add Task Screen

Again Home Screen will have a TabView containing these tabs

All Tasks
Incomplete Tasks
Complete Tasks

Let's look at the widget tree of the HomeScreen widget we have to create to make our app.

All three tabs will show similar widgets. Only filtering according to the selected tab.

Let's start out writing our TaskListItem widget. We will use a ListTile widget to create this widget. The TaskListItem class will be instantiated with a Task instance which will be later processed and rendered to the UI. I created a new file in this location for this widget: lib/widgets/task_list_item.dart.

Another new thing to notice here is the use of Provider.of<TodosModel>(context, listen: false) inside the onChanged and onPressed arguments. The provider package relies heavily on the static type system of Dart. Here Provider.of<TodosModel>(context, listen: false) reveals the instance of TodosModel instance we will later supply to our app. This instance can then be used to call any methods on that class. The listen: false argument tells flutter that this widget does not need to be re-rendered on state changes.



import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:todos/models/task.dart';
import 'package:todos/providers/todos_model.dart';

class TaskListItem extends StatelessWidget {
  final Task task;

  TaskListItem({@required this.task});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Checkbox(
        value: task.completed,
        onChanged: (bool checked) {
          Provider.of<TodosModel>(context, listen: false).toggleTodo(task);
        },
      ),
      title: Text(task.title),
      trailing: IconButton(
        icon: Icon(
          Icons.delete,
          color: Colors.red,
        ),
        onPressed: () {
          Provider.of<TodosModel>(context, listen: false).deleteTodo(task);
        },
      ),
    );
  }
}

Now, We will create the TaskList widget which will employ the previously created TaskListItem widget to show a list of tasks inside a ListView widget. For now, I am not providing any placeholder Text or anything to indicate an empty list but you are welcome to go ahead and insert a new widget here to tell the user that the current TaskList widget is empty.



import 'package:flutter/material.dart';

import 'package:todos/models/task.dart';
import 'package:todos/widgets/task_list_item.dart';

class TaskList extends StatelessWidget {
  final List<Task> tasks;

  TaskList({@required this.tasks});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: getChildrenTasks(),
    );
  }

  List<Widget> getChildrenTasks() {
    return tasks.map((todo) => TaskListItem(task: todo)).toList();
  }
}

We are now ready to create all the necessary tabs for our HomeScreen widget. We will keep the tabs of our HomeScreen widget in a separate directory. Let's start by creating our AllTasksTab widget first. (lib/tabs/all_tasks.dart)



import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:todos/providers/todos_model.dart';
import 'package:todos/widgets/task_list.dart';

class AllTasksTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Consumer<TodosModel>(
        builder: (context, todos, child) => TaskList(
              tasks: todos.allTasks,
            ),
      ),
    );
  }
}

Consumer is a new widget provided by the provider package. This widget provides an easy way to listen for changes in the provider state and re-render accordingly. It is generally considered a bad practice to enclose a huge widget tree inside a Consumer widget. This widget should be inserted as deep as possible in the widget tree to prevent unnecessary re-renders. For more info, see here.

We need to re-render all the list items in case any of the task item changes. That's why I have enclosed the use of TaskList widget inside the Consumer. Now whenever our provider calls notifyListener in its model. It will re-render our TaskList widget.

Similarly, try creating the remaining two tab widgets before continuing. I am giving my code below just in case.



// lib/tabs/completed_tasks.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:todos/providers/todos_model.dart';
import 'package:todos/widgets/task_list.dart';

class CompletedTasksTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Consumer<TodosModel>(
        builder: (context, todos, child) => TaskList(
              tasks: todos.completedTasks,
            ),
      ),
    );
  }
}



// lib/tabs/incomplete_tasks.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:todos/providers/todos_model.dart';
import 'package:todos/widgets/task_list.dart';

class IncompleteTasksTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Consumer<TodosModel>(
        builder: (context, todos, child) => TaskList(
              tasks: todos.incompleteTasks,
            ),
      ),
    );
  }
}

Now we can create our HomeScreen widget. This will be a fairly simple widget which will use the widgets we previously created for our app.

Let's look at the code:



import 'package:flutter/material.dart';

import 'package:todos/tabs/all_tasks.dart';
import 'package:todos/tabs/completed_tasks.dart';
import 'package:todos/tabs/incomplete_tasks.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
            },
          ),
        ],
        bottom: TabBar(
          controller: controller,
          tabs: <Widget>[
            Tab(text: 'All'),
            Tab(text: 'Incomplete'),
            Tab(text: 'Complete'),
          ],
        ),
      ),
      body: TabBarView(
        controller: controller,
        children: <Widget>[
          AllTasksTab(),
          IncompleteTasksTab(),
          CompletedTasksTab(),
        ],
      ),
    );
  }
}

The app should display all, completed and incomplete tasks correctly now and you should be able to toggle the state of a task's completed property. But we cannot test our app yet. We need some demo tasks to check if our app is working. Let's add some.

Open your provider/todos_model.dart file and add some instances of Task model to the _tasks property.



  final List<Task> _tasks = [
    Task(title: 'Finish the app'),
    Task(title: 'Write a blog post'),
    Task(title: 'Share with community'),
  ];

Now give your app a go. All the tasks we created are incomplete. Try toggling them by tapping the checkbox. Our app should be working fine now. You should be able to Update, Delete the tasks we created through the UI. Now, the last thing we need to do is create a screen for adding Tasks to our app. We will create a simple AddTaskScreen stateful widget to provide this functionality to our users. We are using a stateful widget because we need the value of the TextField and the Checkbox widget from this widget while creating new tasks.



import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:todos/providers/todos_model.dart';
import 'package:todos/models/task.dart';

class AddTaskScreen extends StatefulWidget {
  @override
  _AddTaskScreenState createState() => _AddTaskScreenState();
}

class _AddTaskScreenState extends State<AddTaskScreen> {
  final taskTitleController = TextEditingController();
  bool completedStatus = false;

  @override
  void dispose() {
    taskTitleController.dispose();
    super.dispose();
  }

  void onAdd() {
    final String textVal = taskTitleController.text;
    final bool completed = completedStatus;
    if (textVal.isNotEmpty) {
      final Task todo = Task(
        title: textVal,
        completed: completed,
      );
      Provider.of<TodosModel>(context, listen: false).addTodo(todo);
      Navigator.pop(context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add Task'),
      ),
      body: ListView(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(15.0),
            child: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  TextField(controller: taskTitleController),
                  CheckboxListTile(
                    value: completedStatus,
                    onChanged: (checked) => setState(() {
                          completedStatus = checked;
                        }),
                    title: Text('Complete?'),
                  ),
                  RaisedButton(
                    child: Text('Add'),
                    onPressed: onAdd,
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

We again used the Provider.of<TodosModel>(context, listen: false) from the provider package to call the addTodo method on the TodosModel. This makes sure our app state changes and all the listening widgets are notified of this change and are re-rendered.

Now, all we need to do is hook up this screen with our HomeScreen widget and Voila! Let's do that. Open up your lib/screens/home_screen.dart file and update the IconButton widgets onPressed argument to include this.



import 'package:flutter/material.dart';

import 'package:todos/screens/add_task_screen.dart';

...
...


            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => AddTaskScreen(),
                ),
              );
            },

...
...

This will take the user to the AddTaskScreen whenever the + button is pressed on the Appbar. Now, all we need to do is wrap our main app in lib/main.dart inside a ChangeNotifierProvider widget which will pass our TodosModel instance to all the widgets inside our app. Update your lib/main.dart file like below:



import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:todos/screens/home_screen.dart';
import 'package:todos/providers/todos_model.dart';

void main() => runApp(TodosApp());

class TodosApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      builder: (context) => TodosModel(),
      child: MaterialApp(
        title: 'Todos',
        theme: ThemeData.dark(),
        home: HomeScreen(),
      ),
    );
  }
}

Now, our app is ready. Congratulations on creating your first Todo app using Flutter using Provider.

Thanks for reading the post. I am providing some more resources from where you can learn more about the usage of provider package with flutter.

This article was first posted in my personal website.