Skip to content

Latest commit

 

History

History
48 lines (36 loc) · 2.14 KB

README.md

File metadata and controls

48 lines (36 loc) · 2.14 KB
Raw

MyApp - Webpack in Phoenix for sane front end development

Original guide for Phoenix 0.12 here: http://manukall.de/2015/05/01/automatically-building-your-phoenix-assets-with-webpack/

The default tool provided in Phoenix (brunch) is pretty annoying to work with and the npm module integration is a pain. (e.g. import React from 'react' does not do what you expect, import 'react/lib/update' will just totally break on its path finding system, it uses a vendor directory by default instead of pulling down packages from npm, etc.)

Because I already use Webpack for many things and it's very good software that lets me truly pull down and use npm modules for my projects, I opted to generate my project with the no brunch flag (--no-brunch).

There are a few things to be aware of:

  1. You need to provide your own package.json (run npm init after you generate)
  2. You need to install webpack and a loader for ES6/JSX (like babel), so you'll need to run npm i -S webpack and such.
  3. You need to provide webpack configuration (see: webpack.config.js)
  4. Your entry and output should probably match the convention:
[...]
  entry: './web/static/js/app.js',
  output: {
    path: './priv/static/js',
    filename: 'app.js'
  },
[...]
  1. You need to hook up watchers to your dev task, like so:
watchers: [{Path.expand("node_modules/webpack/bin/webpack.js"), ["-wd"]}]
  1. Then run iex -S mix phoenix.server as usual and have fun!

Phoenix details:

To start your Phoenix app:

  1. Install dependencies with mix deps.get
  2. Create and migrate your database with mix ecto.create && mix ecto.migrate
  3. Start Phoenix endpoint with mix phoenix.server

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check our deployment guides.

Learn more