Django CMS + NPM + Webpack + Babel + Uikit + React

mkvirtualenv mysite
workon mysite
pip install djangocms-installer
djangocms mysite
cd mysite
python migrate
python createsuperuser
python runserver
npm install uikit

Using ES6 and ES7 in the Browser, with Babel 6 and Webpack

Initialize with npm

npm init

Accept the default for all the prompts

Installing and Configuring Webpack

Webpack is a module bundler which takes modules with dependencies and generates static assets by bundling them together based on some configuration.

Let’s start with installing webpack using npm

npm i webpack -S

Webpack requires some configuration settings to carry out its work and the best practice is doing it via a config file called webpack.config.js.

touch webpack.config.js

Update the config file as follows:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'

module.exports = config;

Now in the terminal run the following command

./node_modules/.bin/webpack -d

The above command runs the webpack in the development mode and generates the bundle.js file and its associated map file in the src/client/public directory.

Babel installation

Start by installing the babel-core and babel-loader packages:

npm install --save-dev babel-loader babel-core

Next, you’ll need to install any presets and plugins you need. Start with babel-preset-es2015 – Babel’s collection of ES6 transforms. If you’re using JSX, you’ll also want babel-preset-react. And if you want to play with fire, you can add babel-preset-stage-0 for access to ES7 decorators, async/await, etc.

# For ES6/ES2015 support
npm install babel-preset-es2015 --save-dev

# If you want to use JSX
npm install babel-preset-react --save-dev

# If you want to use experimental ES7 features
npm install babel-preset-stage-0 --save-dev

Install all packages at ones:

npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev

Runtime support

Babel can’t support all of ES6 with compilation alone — it also requires some runtime support. In particular, the new ES6 built-ins like Set, Map and Promise must be polyfilled, and Babel’s generator implementation also uses a number of runtime helpers. Given your app doesn’t have to share a JavaScript environment with other apps, you’ll be ok to use babel-polyfill to handle this:


pre><npm install babel-polyfill –save

Babel also bakes a number of smaller helpers directly into your compiled code. This is OK for single files, but when bundling with Webpack, repeated code will result in a heavier file size. It is possible to replace these helpers with calls to the babel-runtime package by adding the transform-runtime plugin:

npm install babel-runtime –save
npm install babel-plugin-transform-runtime –save-dev


Via config

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }

Create .babelrc configuration file

You’ve configured Babel but you haven’t made it actually do anything. Create a .babelrc config in your project root and enable some plugins.

To start, you can use the env preset, which enables transforms for ES2015+

npm install babel-preset-env --save-dev

In order to enable the preset you have to define it in your .babelrc file, like this:

touch .babelrc

  "presets": ["env"]

React installation

npm i babel-loader babel-preset-es2015 babel-preset-react -S

The babel-preset-es2015 and babel-preset-react are plugins being used by the babel-loader to translate ES6 and JSX syntax respectively.

As we did for Webpack, babel-loader also requires some configuration. Here we need to tell it to use the ES6 and JSX plugins.

Create a .babelrc file and update it as below:

touch .babelrc

  "presets" : ["es2015", "react"]

Vincent Verloop

Ervaren ICT Professional met een bewezen geschiedenis van werken in de IT. Begonnen in eigen computer werkplaats, daarna aan het werk gegaan bij KPN als technische helpdeskmedewerker. Daarna Ziggo monteur. Daarna systeembeheerder bij Rijksdienst voor Wegverkeer. Daarna Zelfstandig Ondernemer. Daarna Sport Computer Graphics. Daarna T-Mobile/Tele2. Daarna Centric. Bekwaam in OS X, Search Engine Optimization (SEO), PHP, WordPress en Domain Name System (DNS). Sterke media- en communicatieprofessional met een diploma MBO niveau 4 gericht op ICT-beheer / ICT-beheerder. Volg Vincent Verloop op Twitter.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Schrijf u in voor onze gratis nieuwsbrief

© Vincent Verloop. All rights reserved. Powered by Verloophosting.