Setup Phoenix Zurb Foundation - SolarisJapan/lunaris-wiki GitHub Wiki

A guide to setup Phoenix with webpack and Zurb Foundation

Configurations

assets/package.json

Add foundation-sites, jquery, node-sass, optimize-css-assets-webpack-plugin, sass-loader, webpack-cli, what-input and (for good measure) fontawesome to your package.json.

🔥 As of this writeup (2019-06-21) fontawesome has a typo in their dependency: @fortawesome instead of @fontawesome! 🔥

Your package.json should look something like this now:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@fortawesome/fontawesome-free": "^5.9.0",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^4.5.0",
    "css-loader": "^2.1.1",
    "foundation-sites": "^6.5.3",
    "jquery": "^3.4.1",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "4.4.0",
    "webpack-cli": "^2.0.10",
    "what-input": "^5.2.3"
  }
}

cd into the assets folder and install the dependencies:

cd assets && npm install

assets/webpack.config.js

We need to tell MiniCssExtractPlugin how to load scss files, and make jquery available to our modules.

  • Change test: /\.css$/ to test: /\.scss$/
  • Add const Webpack = require('webpack') so we can provide jquery as a plugin
  • Add the plugin new Webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'}) 
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const Webpack = require('webpack');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    './js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', {loader: 'sass-loader', query: {includePaths: [path.resolve(__dirname, 'node_modules/foundation-sites/scss'), path.resolve(__dirname, 'node_modules/@fortawesome/fontawesome-free/scss')]}}]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new Webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
  ]
});

assets/css/app.css

Rename this file to app.scss, add the foundation modules and fontawesome:

@import "foundation";
@include foundation-everything;

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "fontawesome";

assets/js/app.js

Change import css from "../css/app.css" to import css from "../css/app.scss", import foundation and initialize the jquery plugin:

import css from "../css/app.scss"

// ...

import {Foundation} from "../vendor/foundation.min";
$(document).foundation();

Move foundation.min.js into the assets/vendor folder

We need to move the javascript into our assets folder so webpack can find it:

In your project root:

mv assets/node_modules/foundation-sites/dist/js/foundation.min.js assets/vendor/foundation.min.js

Test it

Add some elements to a page to test if your setup works, if your app is a freshly generated phoenix app, go to lib/offer_spotter_web/templates/page/index.html.eex and add something like this:

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-4">
      <div class="callout primary">
        <h5>Does it work?</h5>
      </div>
    </div>
  </div>
</div>

Fire up your phoenix server and visit localhost:4000. You should see a big blue box

⚠️ **GitHub.com Fallback** ⚠️