DEV Community: Josef Rousek

Using Create React App 2 with Django 2

Josef Rousek — Sat, 13 Oct 2018 12:22:39 +0000

I finally got opportunity to work on a project that used Django together with a React app. There's a combination of packages that help with integrating CRA and Django.

webpack-bundle-tracker + django-webpack-loader

django-webpack-loader and webpack-bundle-tracker work together in the following way. webpack-bundle-tracker plugin emits information about webpack’s compilation process and results so django-webpack-loader can consume it. To add webpack-bundle-tracker to CRA we will need to hook up a plugin to webpack.

CRA configuration

With your CRA app generated we start with react-app-rewired configuration. Rewired uses config-overrides.js file to hook into webpack configuration. There is one more change we have to make apart from adding BundleTracker. The new splitChunks configuration is not entirely supported, so we have to use only named chunks.

var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  webpack: (config, env) => {

    config.plugins.push(
      new BundleTracker({
        path: __dirname,
        filename: './build/webpack-stats.json',
      }),
    );

    config.optimization.splitChunks.name = 'vendors';

    return config;
  },
};

After running npm start we should see additional file webpack-stats.json in build folder containing all the data we need.

Django configuration

Install django-webpack-loader using pipenv or pip. Then go to your settings.py. Add webpack_loader to INSTALLED_APPS. This will enable us to use template tags.

INSTALLED_APPS = [
    ...
    'webpack_loader',
]

Project structure

My project directory structure looks like this. I decided to put my CRA app to frontend folder.

├── Pipfile
├── Pipfile.lock
├── README.md
├── my_django_app
│   ├── __init__.py
│   ├── context_processors.py
│   ├── settings.py
│   ├── urls.py
│   ├── utils.py
│   └── wsgi.py
├── frontend
│   ├── build
│   ├── config-overrides.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   └── src
└── manage.py

With following structure, we can configure webpack loading in following way.

STATICFILES_DIRS = [
    # So Django knows about webpack files
    os.path.join(BASE_DIR, "frontend", "build", "static"),
]

WEBPACK_LOADER = {
    "DEFAULT": {
        "CACHE": not DEBUG,
        "BUNDLE_DIR_NAME": "frontend/build/static/",  # must end with slash
        "STATS_FILE": os.path.join(BASE_DIR, "frontend", "build", "webpack-stats.json"),
    }
}

Usage

In our Django template we can then use render_bundle to load our CRA app.

{% raw %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'vendors' %}
{% render_bundle 'main' %}
{% render_bundle 'runtime~main' %}
{% endraw %}

It will also display the webpack error when the build process is failing.

I was very happy about getting Django and CRA to work together in this way and I can only recommend it.

Projects

Visualizing Strava activites with Folium and Jupyter Notebook

Josef Rousek — Sun, 23 Sep 2018 17:12:18 +0000

Few days ago I participated in my first race ever! It was short triathlon called Slapský triatlon. My friend was talking me into it for almost two years. The swimming is 500m, cycling is 34km and running is 4.5km. I don't swim or run that much but I was pretty sure I can handle this. I was pretty confident with cycling which turned out to be a mistake. I was happy with the result overall. I wasn't last. I'm pretty satisfied with swimming and running, but I could push a bit harder on the bike. The result is that I have some interesting data I can play around.

Speed visualization of the cycling part. Ranging from deep blue for slowest to deep red for fastest.

When exploring the data I always use Jupyter Notebook and Folium. Folium lets you generate leaflet.js maps directly from Python.

Getting data from Strava is pretty simple. First, you need your Access Token. You can get them in My API Application section in Settings.

from stravalib.client import Client
client = Client(access_token = <STRAVA_ACCESS_TOKEN>)

types = ['time', 'distance', 'latlng', 'altitude', 'velocity_smooth', 'moving', 'grade_smooth']
streams = client.get_activity_streams(<ACTIVITY_ID>, types=types)

Then to get stream data use streams['altitude'].data. To make resulting map look a bit more smooth we need to group similar velocity data points. This does pretty good job.

locations = streams['latlng'].data
velocities = streams['velocity_smooth'].data

data = zip(locations, velocities)

groups = []
last_velocity = None
for location, velocity in data:
    if not last_velocity or abs(abs(last_velocity) - abs(velocity)) > 0.4:
        groups.append({'velocity': velocity, 'velocities': [], 'locations': []})
    groups[-1:][0]['locations'].append(location)
    groups[-1:][0]['velocities'].append(velocity)
    last_velocity = velocity

import statistics

for group in groups:
    group['velocity'] = statistics.median_high(group['velocities'])

To correctly colorize segments we need to normalize and map the values to colors. Luckily matplotlib does this for us with the exception of converting the color to hex. First, we will use Normalize to, well, normalize the value and then colormap value to color. The last step is converting rgb 0.0 - 1.0 to hex.

def convert_to_hex(rgba_color):
    red = str(hex(int(rgba_color[0]*255)))[2:].capitalize()
    green = str(hex(int(rgba_color[1]*255)))[2:].capitalize()
    blue = str(hex(int(rgba_color[2]*255)))[2:].capitalize()

    if blue=='0':
        blue = '00'
    if red=='0':
        red = '00'
    if green=='0':
        green='00'

    return '#'+ red + green + blue

import matplotlib.cm as cm
from matplotlib.colors import Normalize

cmap = cm.bwr
norm = Normalize(vmin=min(velocities), vmax=max(velocities))

def colorize(grade):
    return convert_to_hex(cmap(norm(grade)))

With grouped data and correct color the only thing we need to do is generate PolyLines for each group and display map.

import folium

m = folium.Map(location=[49.7947117,14.3916288], tiles='Stamen Toner', zoom_start=12.2)

for group in groups:
    folium.PolyLine(
        group['locations'],
        weight=10,
        color=colorize(group['velocity'])
    ).add_to(m)

m

You can see the entire notebook on nbviewer.jupyter.org. Here are my ride and run if you want to explore my activities on Strava.

Virtual support phone number with Twilio

Josef Rousek — Mon, 10 Sep 2018 20:15:21 +0000

For a long time I was looking for a simple and, well, cheap solution to isolate my support phone number from my personal number and I recently found the solution.

I like how Twilio makes things simple for developers so they were my first and only bet. What was I actually trying to achieve? I wanted to have a phone number that I could redirect to my phone and when the traffic gets high enough send caller to voicemail when needed. I also wanted to make a phone calls from that number using SIP phone.

First, create a Twilio account and get voice-enabled phone number. Now we need to connect the dots. Let's assume +420111111111 is your number and +420999999999 is the number you got from Twilio.

Receiving calls

Twilio uses TwiML a markup language used to tell Twilio what to do when you receive an incoming call or SMS. The place where we will store our TwiML commands is called TwiML Bins. TwiML Bins allow you to write TwiML that Twilio will host for you - so we don't have to spin up a web server.

Runtime > TwiML Bins is the place where we can manage our Bins.

Create a new bin called Forward incoming calls to my phone and paste following code.

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Dial callerId="+420999999999">
    +420111111111
  </Dial>
</Response>

Then we need to associate this bin with a phone number. In Phone Numbers > Manage Numbers section select your phone number and look for a field called A call comes in. Select TwiML and the select the bin we just created.

That's it, you should now be able to accept incoming phone calls. Try calling your Twilio number.

Making calls using your Twilio number

To make outgoing call using the Twilio number we will need to use VoIP application like Zoiper which is available on Android and iOS. To use this application we need to set up a SIP domain. In Programmable Voice > SIP Domains create a new domain.

Make sure that you associate credentials for both Voice Authentication and SIP Registration. Then we create another TwiML Bin to handle outgoing calls.

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Dial callerId="+420999999999">
    {{#e164}}{{To}}{{/e164}}
  </Dial>
</Response>

The interesting part of this command is {{#e164}}{{To}}{{/e164}}. When using SIP Interface the To value that gets passed down is in following form sip:+15125551212@freelance.sip.us1.twilio.com. Function e164 extracts the phone number from this text. After saving this bin we will copy its URL and use it as Request URL in the SIP Domain we created.

Zoiper configuration

Now that Twilio is setup we can actually make an outgoing call. We will use our SIP credentials we created before. You might have to fill in domain with the region us1 as domain without region or with any other didn't work for me.

I'm pretty happy with the way how this solution works and the calls and number itself are cheap.