Integrating tornado and webpack

INTEGRATING TORNADO AND WEBPACKTom Chen

[email protected]

mailto:[email protected]

Front End

minify concat

preprocesspackage inclusion

postprocess (hashed filename…)

Grunt: The JavaScript Task Runner

tried it in 2013

GulpAutomate and enhance your workflow

tried it in 2014-15

Webpackmodule bundler

!!!

OMG!!!

Webpackmodule bundler

tried it this year

• Transform jsx

• ES6

• SCSS

• Can use require

Tornado + webpackwith jinja2, ReactJS and SCSS

(venv)$ pip install tornado

#!/usr/bin/envpythonimporttornado.ioloopimporttornado.web

classMainHandler(tornado.web.RequestHandler):defget(self):self.write("Hello,world")

application=tornado.web.Application([(r"/",MainHandler),])

if__name__=="__main__":application.listen(8888)tornado.ioloop.IOLoop.current().start()

http://www.tornadoweb.org/en/stable/index.htmlserver.py

http://www.tornadoweb.org/en/stable/index.html

(venv)$ python server.py

Add jinja2

(venv)$ pip install jinja2


fromjinja2importEnvironment,FileSystemLoader

env=Environment(loader=FileSystemLoader('templates'))

classMainHandler(tornado.web.RequestHandler):defget(self):template=env.get_template('index.html')self.write(template.render())

application=tornado.web.Application([(r"/",MainHandler),])

if__name__=="__main__":application.listen(8888)tornado.ioloop.IOLoop.current().start()

server.py

<!doctypehtml><html><body><h1>Hello,World</h1></body></html>

templates/index.html

Setup webpack

(venv)$ npm install -g webpack(venv)$ npm install babel-loader babel-runtime style-loader css-loader sass-loader extract-text-webpack-plugin assets-webpack-plugin

varpath=require('path');varExtractTextPlugin=require("extract-text-webpack-plugin");

module.exports={entry:{main:"./js/main.jsx"},output:{path:path.resolve(__dirname,'static'),publicPath:"/static/",filename:'scripts/[name]-bundle-[hash].js'},module:{loaders:[{test:/\.scss$/,loader:ExtractTextPlugin.extract('style-loader','css-loader?sourceMap!sass-loader?sourceMap')},{test:/\.jsx?$/,exclude:/node_modules/,loader:"babel-loader?optional[]=runtime&stage=0"}]},plugins:[newExtractTextPlugin('styles/main-bundle-[hash].css')]};

webpack.config.js

varReact=require('react');require('../scss/main.scss');

classTestextendsReact.Component{constructor(props){super(props);}

render(){return(<divclassName="hihi"><h3>Iamh3</h3></div>);}}

React.render(<Test/>,document.getElementById('root'));

var$=require('jquery');console.log($("#root"));

js/main.jsx

h1{color:blue;}

scss/main.scss

(venv)$ webpack --progress

Assets Webpack Plugin

(venv)$ npm install assets-webpack-plugin

varpath=require('path');varExtractTextPlugin=require("extract-text-webpack-plugin");varAssetsPlugin=require('assets-webpack-plugin');

module.exports={entry:{main:"./js/main.jsx"},output:{path:path.resolve(__dirname,'static'),publicPath:"/static/",filename:'scripts/[name]-bundle-[hash].js'},module:{loaders:[{test:/\.scss$/,loader:ExtractTextPlugin.extract('style-loader','css-loader?sourceMap!sass-loader?sourceMap')},{test:/\.jsx?$/,exclude:/node_modules/,loader:"babel-loader?optional[]=runtime&stage=0"}]},plugins:[newExtractTextPlugin('styles/main-bundle-[hash].css'),newAssetsPlugin()]};

webpack.config.js

{"main":{"js":"/static/scripts/main-bundle-e91575da93d4e0ef31f4.js","css":"/static/styles/main-bundle-e91575da93d4e0ef31f4.css"}}

webpack-assets.json

Link it together


importjsonfromtornado.optionsimportoptions,definefromtornado.autoreloadimportwatchfromjinja2importEnvironment,FileSystemLoader

env=Environment(loader=FileSystemLoader('templates'))

classMainHandler(tornado.web.RequestHandler):defget(self):template=env.get_template('index.html')self.write(template.render({'assets':options.ASSETS}))

application=tornado.web.Application([(r"/",MainHandler),],static_path='static',debug=True)

if__name__=="__main__":try:fn='webpack-assets.json'withopen(fn)asf:watch(fn)assets=json.load(f)exceptIOError:passexceptKeyError:pass

define('ASSETS',assets)application.listen(8888)tornado.ioloop.IOLoop.current().start()

server.py

<!doctypehtml><html><head><linkrel="stylesheet"href="{{assets['main']['css']}}"/></head><body><h1>Hello,World</h1><divid="root"></div><scriptsrc="{{assets['main']['js']}}"></script></body></html>

templates/index.html

so, you can try ithttps://github.com/yychen/tornado-webpack

https://github.com/yychen/tornado-webpack

What about… django?

#!/usr/bin/envpythonimportosimportsys

if__name__=="__main__":os.environ.setdefault("DJANGO_SETTINGS_MODULE","django_webpack.settings")

fromdjango.core.managementimportexecute_from_command_line

importdjango.utils.autoreloadfromdjango.confimportsettingsimportjsondjango_gen_filenames=django.utils.autoreload.gen_filenameswithopen('webpack-assets.json')asf:parsed=json.load(f)setattr(settings,'ASSETS',parsed)defpatched_gen_filenames(only_new=False):ifnotonly_new:ifos.path.isfile('webpack-assets.json'):return['webpack-assets.json']+django_gen_filenames(only_new)

returndjango_gen_filenames(only_new)

django.utils.autoreload.gen_filenames=patched_gen_filenamesexecute_from_command_line(sys.argv)

manage.pyHack it! An ugly monkey patch!

fromdjango.confimportsettings

defwebpack(request):return{'assets':settings.ASSETS}

project/context_processors.pyAnd a custom context processor

TEMPLATES=[{'BACKEND':'django.template.backends.django.DjangoTemplates','DIRS':[],'APP_DIRS':True,'OPTIONS':{'context_processors':['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages','project.context_processors.webpack',],},},]

project/settings.py

<!doctypehtml><html><head><linkrel="stylesheet"href="{{assets.main.css}}"/></head>

<body><h1>Hello</h1><divid="root"></div><scriptsrc="{{assets.main.js}}"></script></body></html>

index.htmlUse the assets variable directly!

Thank you. Any Questions?

Integrating tornado and webpack

Engineering

Transcript of Integrating tornado and webpack