├── .gitignore ├── manage.py-tpl ├── package.json ├── project_name ├── __init__.py ├── config │ ├── __init__.py │ ├── settings_common.py-tpl │ ├── settings_development.py-tpl │ ├── settings_production.py-tpl │ ├── webpack.config.base.js │ ├── webpack.config.development.js │ └── webpack.config.production.js ├── settings_development.py-tpl ├── urls.py-tpl ├── views.py-tpl ├── webpack.config.development.js └── wsgi.py-tpl ├── readme.md ├── requirements.txt ├── server.js ├── static └── js │ └── someother.js ├── static_src ├── css │ ├── base.css │ ├── base.scss │ └── cats.css └── js │ ├── cats.js │ └── index.js └── templates ├── base.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | *.sqlite3 2 | *.pyc 3 | *.pyo 4 | *.log 5 | *.pot 6 | .DS_Store 7 | __pycache__/ 8 | pip-log.txt 9 | pip-delete-this-directory.txt 10 | node_modules/ 11 | staticfiles/ 12 | -------------------------------------------------------------------------------- /manage.py-tpl: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | import os 3 | import sys 4 | 5 | if __name__ == "__main__": 6 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "{{ project_name }}.config.settings_development") 7 | 8 | from django.core.management import execute_from_command_line 9 | 10 | execute_from_command_line(sys.argv) 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ project_name }}", 3 | "version": "1.0.0", 4 | "description": "description", 5 | "main": "index.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "scripts": { 10 | "build": "webpack --config {{ project_name }}/config/webpack.config.development.js --progress --colors", 11 | "build-production": "webpack --config {{ project_name }}/config/webpack.config.production.js --progress --colors", 12 | "watch": "node server.js" 13 | }, 14 | "author": "", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "babel-cli": "^6.18.0", 18 | "babel-core": "^6.8.0", 19 | "babel-loader": "^6.2.4", 20 | "css-loader": "^0.23.1", 21 | "node-sass": "^3.10.1", 22 | "postcss-loader": "^0.9.1", 23 | "sass-loader": "^3.2.0", 24 | "style-loader": "^0.13.1", 25 | "webpack": "^1.13.0", 26 | "webpack-bundle-tracker": "0.0.93", 27 | "webpack-dev-server": "^1.14.1" 28 | }, 29 | "dependencies": { 30 | "extract-text-webpack-plugin": "^1.0.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /project_name/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toymakerlabs/django-webpack-scaffolding/df5b57b9a7935a0eeef5c03598194e0a3136cb71/project_name/__init__.py -------------------------------------------------------------------------------- /project_name/config/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toymakerlabs/django-webpack-scaffolding/df5b57b9a7935a0eeef5c03598194e0a3136cb71/project_name/config/__init__.py -------------------------------------------------------------------------------- /project_name/config/settings_common.py-tpl: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for {{ project_name }} project. 3 | 4 | Generated by 'django-admin startproject' using Django {{ docs_version }} 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/{{ docs_version }}/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/{{ docs_version }}/ref/settings/ 11 | """ 12 | 13 | import os 14 | 15 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...) 16 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))) 17 | 18 | 19 | # Quick-start development settings - unsuitable for production 20 | # See https://docs.djangoproject.com/en/{{ docs_version }}/howto/deployment/checklist/ 21 | 22 | # SECURITY WARNING: keep the secret key used in production secret! 23 | SECRET_KEY = '{{ secret_key }}' 24 | 25 | # SECURITY WARNING: don't run with debug turned on in production! 26 | DEBUG = True 27 | 28 | ALLOWED_HOSTS = [] 29 | 30 | 31 | # Application definition 32 | 33 | INSTALLED_APPS = [ 34 | 'django.contrib.admin', 35 | 'django.contrib.auth', 36 | 'django.contrib.contenttypes', 37 | 'django.contrib.sessions', 38 | 'django.contrib.messages', 39 | 'django.contrib.staticfiles', 40 | 'webpack_loader', 41 | ] 42 | 43 | MIDDLEWARE_CLASSES = [ 44 | 'django.middleware.security.SecurityMiddleware', 45 | 'django.contrib.sessions.middleware.SessionMiddleware', 46 | 'django.middleware.common.CommonMiddleware', 47 | 'django.middleware.csrf.CsrfViewMiddleware', 48 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 49 | 'django.contrib.auth.middleware.SessionAuthenticationMiddleware', 50 | 'django.contrib.messages.middleware.MessageMiddleware', 51 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 52 | ] 53 | 54 | ROOT_URLCONF = '{{ project_name }}.urls' 55 | 56 | TEMPLATES = [ 57 | { 58 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 59 | 'DIRS': [ 60 | # insert your TEMPLATE_DIRS here 61 | os.path.join(BASE_DIR, "templates"), 62 | ], 63 | 'APP_DIRS': True, 64 | 'OPTIONS': { 65 | 'context_processors': [ 66 | 'django.template.context_processors.debug', 67 | 'django.template.context_processors.request', 68 | 'django.contrib.auth.context_processors.auth', 69 | 'django.contrib.messages.context_processors.messages', 70 | ], 71 | }, 72 | }, 73 | ] 74 | 75 | WSGI_APPLICATION = '{{ project_name }}.wsgi.application' 76 | 77 | 78 | # Database 79 | # https://docs.djangoproject.com/en/{{ docs_version }}/ref/settings/#databases 80 | 81 | DATABASES = { 82 | 'default': { 83 | 'ENGINE': 'django.db.backends.sqlite3', 84 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 85 | } 86 | } 87 | 88 | 89 | # Password validation 90 | # https://docs.djangoproject.com/en/{{ docs_version }}/ref/settings/#auth-password-validators 91 | # https://docs.djangoproject.com/en/{{ docs_version }}/ref/settings/#auth-password-validators 92 | AUTH_PASSWORD_VALIDATORS = [ 93 | { 94 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 95 | }, 96 | { 97 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 98 | }, 99 | { 100 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 101 | }, 102 | { 103 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 104 | }, 105 | ] 106 | 107 | 108 | # Internationalization 109 | # https://docs.djangoproject.com/en/{{ docs_version }}/topics/i18n/ 110 | 111 | LANGUAGE_CODE = 'en-us' 112 | 113 | TIME_ZONE = 'UTC' 114 | 115 | USE_I18N = True 116 | 117 | USE_L10N = True 118 | 119 | USE_TZ = True 120 | 121 | 122 | # Static files (CSS, JavaScript, Images) 123 | # https://docs.djangoproject.com/en/{{ docs_version }}/howto/static-files/ 124 | 125 | STATIC_URL = '/static/' 126 | 127 | WEBPACK_LOADER = { 128 | 'DEFAULT': { 129 | 'CACHE': not DEBUG, 130 | 'BUNDLE_DIR_NAME': 'bundles/', # must end with slash 131 | 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), 132 | 'POLL_INTERVAL': 0.1, 133 | 'IGNORE': ['.+\.hot-update.js', '.+\.map'] 134 | } 135 | } 136 | 137 | -------------------------------------------------------------------------------- /project_name/config/settings_development.py-tpl: -------------------------------------------------------------------------------- 1 | from {{ project_name }}.config.settings_common import * 2 | import os 3 | 4 | 5 | ########## DEBUG CONFIGURATION 6 | DEBUG = True 7 | ########## END DEBUG CONFIGURATION 8 | 9 | 10 | ########## EMAIL CONFIGURATION 11 | EMAIL_BACKEND = 'django.core.mail.backends.dummy.EmailBackend' 12 | ########## END EMAIL CONFIGURATION 13 | 14 | 15 | ########## DATABASE CONFIGURATION 16 | # Database 17 | # https://docs.djangoproject.com/en/1.9/ref/settings/#databases 18 | 19 | DATABASES = { 20 | 'default': { 21 | 'ENGINE': 'django.db.backends.sqlite3', 22 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 23 | } 24 | } 25 | ########## END DATABASE CONFIGURATION 26 | 27 | 28 | 29 | STATIC_URL = '/static/' 30 | 31 | STATICFILES_DIRS = [ 32 | os.path.join(BASE_DIR, "static"), 33 | ] 34 | 35 | STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles") 36 | 37 | #location of your media on your disk 38 | #MEDIA_ROOT = '' 39 | 40 | #url wherever you store your media stuff. Nginx/Apache. 41 | #MEDIA_URL = '' 42 | 43 | if not DEBUG: 44 | WEBPACK_LOADER.update({ 45 | 'DEFAULT':{ 46 | 'BUNDLE_DIR_NAME': 'dist/', 47 | 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json') 48 | } 49 | }) 50 | 51 | 52 | -------------------------------------------------------------------------------- /project_name/config/settings_production.py-tpl: -------------------------------------------------------------------------------- 1 | from {{ project_name }}.config.settings_common import * 2 | import os 3 | 4 | 5 | ## probably update this. probably. 6 | ALLOWED_HOSTS = ['*'] 7 | 8 | 9 | ########## DEBUG CONFIGURATION 10 | DEBUG = False 11 | ########## END DEBUG CONFIGURATION 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ########## EMAIL CONFIGURATION 20 | EMAIL_BACKEND = 'django.core.mail.backends.dummy.EmailBackend' 21 | ########## END EMAIL CONFIGURATION 22 | 23 | # https://docs.djangoproject.com/en/1.9/ref/settings/#databases 24 | #POSTGRES example. Be sure to install: pip install psycopg2 25 | # DATABASES = { 26 | # 'default': { 27 | # 'ENGINE': 'django.db.backends.postgresql_psycopg2', 28 | # 'NAME': 'myproject', 29 | # 'USER': 'myprojectuser', 30 | # 'PASSWORD': 'password', 31 | # 'HOST': 'localhost', 32 | # 'PORT': '', 33 | # } 34 | # } 35 | 36 | ########## END DATABASE CONFIGURATION 37 | 38 | WSGI_APPLICATION = 'dwtest.wsgi.application' 39 | 40 | 41 | STATIC_URL = '/static/' 42 | 43 | 44 | STATICFILES_DIRS = [ 45 | os.path.join(BASE_DIR, "static"), 46 | ] 47 | 48 | STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles") 49 | 50 | #make sure webpack loader always goes for dist when debug is off 51 | if not DEBUG: 52 | WEBPACK_LOADER.update({ 53 | 'DEFAULT':{ 54 | 'BUNDLE_DIR_NAME': 'dist/', 55 | 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json') 56 | } 57 | }) 58 | -------------------------------------------------------------------------------- /project_name/config/webpack.config.base.js: -------------------------------------------------------------------------------- 1 | 2 | var path = require("path") 3 | var webpack = require('webpack') 4 | var BundleTracker = require('webpack-bundle-tracker') 5 | 6 | module.exports = { 7 | context: __dirname, 8 | 9 | entry: '../../static_src/js/index', 10 | 11 | output: { 12 | path: path.resolve('./static_src/bundles/'), 13 | filename: "[name]-[hash].js" 14 | }, 15 | 16 | plugins: [ 17 | // add all common plugins here 18 | ], 19 | 20 | module: { 21 | loaders: [ 22 | // common loaders 23 | ] 24 | }, 25 | 26 | resolve: { 27 | modulesDirectories: ['node_modules', 'bower_components'], 28 | extensions: ['', '.js', '.jsx'] 29 | }, 30 | } -------------------------------------------------------------------------------- /project_name/config/webpack.config.development.js: -------------------------------------------------------------------------------- 1 | var path = require("path") 2 | var webpack = require('webpack') 3 | var BundleTracker = require('webpack-bundle-tracker') 4 | var config = require('./webpack.config.base.js') 5 | 6 | /** 7 | Good article for your css 8 | http://jamesknelson.com/writing-happy-stylesheets-with-webpack/ 9 | */ 10 | 11 | 12 | // Use webpack dev server 13 | config.entry = [ 14 | 'webpack-dev-server/client?http://localhost:3000', 15 | '../../static_src/js/index' 16 | ] 17 | 18 | // override django's STATIC_URL for webpack bundles 19 | config.output.publicPath = 'http://localhost:3000/static_src/bundles/' 20 | 21 | // Add HotModuleReplacementPlugin and BundleTracker plugins 22 | config.plugins = config.plugins.concat([ 23 | new webpack.HotModuleReplacementPlugin(), 24 | new webpack.NoErrorsPlugin(), 25 | new BundleTracker({filename: './webpack-stats.json'}), 26 | new webpack.SourceMapDevToolPlugin({filename: '[file].map'}), 27 | ]) 28 | 29 | // Add a loader for JSX files with react-hot enabled 30 | config.module.loaders.push( 31 | { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'] }, 32 | 33 | //Probably a good idea to pick one 34 | //vanilla CSS 35 | {test: /\.css$/, loader: "style-loader!css-loader?root=."}, 36 | 37 | //sass 38 | { test: /\.scss$/, loader: "style!css!postcss-loader!sass" } 39 | 40 | ) 41 | 42 | module.exports = config -------------------------------------------------------------------------------- /project_name/config/webpack.config.production.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var BundleTracker = require('webpack-bundle-tracker') 3 | var config = require('./webpack.config.base.js') 4 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 5 | 6 | config.output.path = require('path').resolve('./static/dist/') 7 | 8 | config.plugins = config.plugins.concat([ 9 | //stats file is used to determine static files location 10 | new BundleTracker({filename: './webpack-stats-prod.json'}), 11 | 12 | //sets the node env to production 13 | new webpack.DefinePlugin({'process.env': {'NODE_ENV': JSON.stringify('production')}}), 14 | 15 | // keeps hashes consistent between compilations 16 | new webpack.optimize.OccurenceOrderPlugin(), 17 | // minifies your code 18 | new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}}), 19 | 20 | //builds a css file 21 | new ExtractTextPlugin('styles/[name].css', {allChunks: true}) 22 | ]) 23 | 24 | config.module.loaders.push( 25 | { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')}, 26 | { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!sass-loader") }, 27 | { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' } 28 | ) 29 | 30 | module.exports = config -------------------------------------------------------------------------------- /project_name/settings_development.py-tpl: -------------------------------------------------------------------------------- 1 | from {{ project_name }}.config.settings_common import * 2 | import os 3 | 4 | 5 | ########## DEBUG CONFIGURATION 6 | DEBUG = True 7 | ########## END DEBUG CONFIGURATION 8 | 9 | 10 | ########## EMAIL CONFIGURATION 11 | EMAIL_BACKEND = 'django.core.mail.backends.dummy.EmailBackend' 12 | ########## END EMAIL CONFIGURATION 13 | 14 | 15 | ########## DATABASE CONFIGURATION 16 | # Database 17 | # https://docs.djangoproject.com/en/1.9/ref/settings/#databases 18 | 19 | DATABASES = { 20 | 'default': { 21 | 'ENGINE': 'django.db.backends.sqlite3', 22 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 23 | } 24 | } 25 | ########## END DATABASE CONFIGURATION 26 | 27 | 28 | 29 | STATIC_URL = '/static/' 30 | 31 | STATICFILES_DIRS = [ 32 | os.path.join(BASE_DIR, "static"), 33 | ] 34 | 35 | STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles") 36 | 37 | #location of your media on your disk 38 | #MEDIA_ROOT = '' 39 | 40 | #url wherever you store your media stuff. Nginx/Apache. 41 | #MEDIA_URL = '' 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /project_name/urls.py-tpl: -------------------------------------------------------------------------------- 1 | """{{ project_name }} URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/{{ docs_version }}/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: url(r'^$', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.conf.urls import url, include 14 | 2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls')) 15 | """ 16 | from django.conf.urls import url,include 17 | from django.contrib import admin 18 | from {{ project_name }} import views 19 | 20 | urlpatterns = [ 21 | url(r'^admin/', admin.site.urls), 22 | url(r'^$', views.index, name='index'), 23 | #url(r'^example/', include('example.urls')), 24 | ] 25 | -------------------------------------------------------------------------------- /project_name/views.py-tpl: -------------------------------------------------------------------------------- 1 | from django.shortcuts import render 2 | 3 | # Create your views here. 4 | def index(request): 5 | context = {'text': 'Hey buddy. This is the index.'} 6 | return render(request, 'index.html', context) -------------------------------------------------------------------------------- /project_name/webpack.config.development.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toymakerlabs/django-webpack-scaffolding/df5b57b9a7935a0eeef5c03598194e0a3136cb71/project_name/webpack.config.development.js -------------------------------------------------------------------------------- /project_name/wsgi.py-tpl: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for {{project_name}} project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/{{docs_version}}/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "{{ project_name }}.config.settings_production") 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | 2 | # Quickstart 3 | This is a template that you can use to integrate Webpack into your Django front-end workflow. [See my article for more details](https://www.toymakerlabs.com/getting-started-with-webpack-and-django) 4 | 5 | 6 | ### Development Environment Overview 7 | Webpack requires NodeJS. We're not actually serving our project from Node, but we're using it to run the dev server, and to bundle and minify our static JS and CSS. Technically, we don't need node on our production server since we're building locally and following Django's normal *collectstatic* process. 8 | 9 | Let's verify that we have Node, npm, and virtualenv installed. 10 | 11 | `node -v` 12 | should yield > v4.2.2 13 | `npm -v` 14 | should yield > 2.14.7 15 | `virtualenv --version` 16 | should yeild > 13.1.0 17 | 18 | [Node installation](https://docs.npmjs.com/getting-started/installing-node) 19 | [Virtualenv installation (OSX)](http://sourabhbajaj.com/mac-setup/Python/virtualenv.html) 20 | 21 | 22 | 23 | ### Start by creating a new Virtualenv 24 | Choose your Python version according to the version of Django. See Django's (documentation)[https://docs.djangoproject.com/en/1.10/faq/install/] for details. I chose Python3 but you can also use Python 2.7. 25 | 26 | ```language-bash 27 | virtualenv -p python3 projectname && cd projectname 28 | ``` 29 | 30 | Activate the virtualenv using the command: 31 | `source bin/activate` 32 | 33 | ### Install Django 34 | Install Django so that we can use the *django-admin.* 35 | ```language-bash 36 | pip install django 37 | ``` 38 | 39 | If you already have a virtualenv with django ready, you can use the Django admin to install the template with this command: 40 | ```language-bash 41 | django-admin startproject projectname --template=https://github.com/toymakerlabs/django-webpack-scaffolding.zip --extension=js,json 42 | ``` 43 | 44 | Dont forget the `--extension=js,json` parameter. That will affect your package.json file and webpack config. 45 | 46 | For more information on Webpack and Webpack with Django, check out these links below: 47 | * [What is Webpack](http://webpack.github.io/docs/what-is-webpack.html): An overview of Webpack 48 | * [Webpack with Django](http://owaislone.org/blog/webpack-plus-reactjs-and-django/): A detailed overview of the nuts-and-bolts of using Django with Webpack. By Owais Lone. 49 | 50 | 51 | 52 | ### Run Startproject 53 | The [startproject](https://docs.djangoproject.com/en/1.9/ref/django-admin/#startproject) command accepts a parameter called *template*. Replace **projectname** in the command with the name of your project. 54 | 55 | ```language-bash 56 | django-admin startproject projectname --template=https://github.com/toymakerlabs/django-webpack-scaffolding/archive/master.zip --extension=js,json 57 | ``` 58 | 59 | 60 | ### Install Django Dependencies 61 | Now we need to install Django dependencies, which right now is just: [django-webpack-loader](https://github.com/owais/django-webpack-loader) 62 | ```language-bash 63 | cd projectname 64 | pip install -r requirements.txt 65 | ``` 66 | 67 | ### Update the Virtualenv Activate Script 68 | This will tell Django which environment settings file to use; production or development. 69 | 70 | We should still be in the */projectname* directory, so open *../bin/activate* in your editor of choice and paste the following at the bottom of the file. (Again change *projectname* to the name of your project) 71 | 72 | ```language-bash 73 | vim ../bin/activate 74 | GG 75 | ``` 76 | 77 | ```language-bash 78 | DJANGO_SETTINGS_MODULE="projectname.config.settings_development" 79 | export DJANGO_SETTINGS_MODULE 80 | ``` 81 | 82 | Then activate the environment again to apply the settings module change. From the projectname folder: 83 | 84 | ```language-bash 85 | source ../bin/activate 86 | ``` 87 | **Tip:** Verify the value of DJANGO_SETTINGS_MODULE by echoing it in the terminal:`echo $DJANGO_SETTINGS_MODULE`. It should print: *projectname.config.settings_development* 88 | 89 | 90 | 91 | ### Install Node Dependencies 92 | Now we need to install Webpack and Webpack's supporting modules from *package.json*. 93 | 94 | 95 | ```language-bash 96 | npm install 97 | ``` 98 | 99 | ### Create an Initial Bundle 100 | To test our config we can run the build script which should create `./webpack-stats.json` 101 | 102 | 103 | ```language-bash 104 | npm run build 105 | ``` 106 | 107 | 108 | ### Start Webpack 109 | 110 | ```language-bash 111 | npm run watch 112 | ``` 113 | If successfull the terminal should read that the dev server is running on **0.0.0.0:3000** 114 | 115 | 116 | 117 | ### Run the Django Development Server 118 | We need Webpack Dev Server to keep running for it to serve our static files. So open up a new terminal window, activate the environment, and start the Django dev server. 119 | ```language-bash 120 | source ../bin/activate 121 | ``` 122 | Sincen Django will ouput a warning, we might as well create an initial migration first. 123 | ```language-bash 124 | python manage.py migrate 125 | ``` 126 | Run the dev server 127 | 128 | ```language-bash 129 | python manage.py runserver 130 | ``` 131 | 132 | 133 | 134 | 135 | ### Check it in the browser 136 | Open your browser and paste:http://127.0.0.1:8000/ 137 | 138 | ###### Build a Production Version 139 | Create a production ready bundle by running: 140 | ```language-bash 141 | npm run build-production 142 | ``` 143 | 144 | 145 | 146 | ### Workflow Overview 147 | 148 | 1. Start the node dev server by running `npm run watch` 149 | 2. When ready to commit your changes, run `npm run build` to build a static bundle 150 | 3. When ready to push to production, run `npm run build-production` to create a compressed, minified version in */static/dist/* 151 | 4. Push to production and run `python manage.py collectstatic` to apply the changes to the static files 152 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | Django>=1.9.6 2 | django-webpack-loader>=0.3.0 3 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var WebpackDevServer = require('webpack-dev-server') 3 | var config = require('./{{ project_name }}/config/webpack.config.development') 4 | 5 | new WebpackDevServer(webpack(config), { 6 | publicPath: config.output.publicPath, 7 | hot: true, 8 | inline: true, 9 | historyApiFallback: true 10 | }).listen(3000, '0.0.0.0', function (err, result) { 11 | if (err) { 12 | console.log(err) 13 | } 14 | 15 | console.log('Listening at 0.0.0.0:3000') 16 | }) -------------------------------------------------------------------------------- /static/js/someother.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | console.log("this is some ad hoc js that you might need to include, and now you can. yay. ") 3 | }()) -------------------------------------------------------------------------------- /static_src/css/base.css: -------------------------------------------------------------------------------- 1 | $font-stack: Helvetica, sans-serif; 2 | $primary-color: #333; 3 | 4 | body { 5 | font: 100% $font-stack; 6 | color: $primary-color; 7 | } -------------------------------------------------------------------------------- /static_src/css/base.scss: -------------------------------------------------------------------------------- 1 | $font-stack: Helvetica, sans-serif; 2 | $primary-color: #333; 3 | 4 | body { 5 | font: 100% $font-stack; 6 | background: $primary-color; 7 | } -------------------------------------------------------------------------------- /static_src/css/cats.css: -------------------------------------------------------------------------------- 1 | html { 2 | color:green; 3 | } -------------------------------------------------------------------------------- /static_src/js/cats.js: -------------------------------------------------------------------------------- 1 | require("../css/cats.css") 2 | 3 | var cats = ['dave', 'henry', 'maise']; 4 | module.exports = cats; 5 | -------------------------------------------------------------------------------- /static_src/js/index.js: -------------------------------------------------------------------------------- 1 | require("../css/base.scss") 2 | cats = require('./cats'); 3 | console.log(cats); 4 | console.log('mountfd') 5 | -------------------------------------------------------------------------------- /templates/base.html: -------------------------------------------------------------------------------- 1 | {% load render_bundle from webpack_loader %} 2 | 3 | 4 | 5 | 6 | 7 | Example 8 | {% render_bundle 'main' 'css'%} 9 | {%block extra_head%} 10 | {%endblock%} 11 | 12 | 13 | 14 | {% block content%} 15 | {% endblock %} 16 | 17 | {%block extra_js_before%} 18 | {%endblock%} 19 | 20 | {% render_bundle 'main' 'js' %} 21 | 22 | {%block extra_js_after%} 23 | {%endblock%} 24 | 25 | 26 | -------------------------------------------------------------------------------- /templates/index.html: -------------------------------------------------------------------------------- 1 | {% extends "base.html" %} 2 | {% load staticfiles%} 3 | 4 | {% block content %} 5 | 6 | {{text}} 7 | {%endblock%} 8 | 9 | 10 | {% block extra_js_before%} 11 | 12 | {%endblock%} --------------------------------------------------------------------------------