Added publicPath

[bngsudheer]

Bootstrap and other resources should load assets from this URL path

[singingwolfboy]

Can you explain what this is for, and why it's necessary?

[bngsudheer]

When you build the Sass version of Bootstrap with webpack, without the publicPath, requests are sent to /somefile.woff, /somefile.ttf, etc. But the requests actually should be made to /assets/static/gen/somefile.woff. If you set publicPath to /static/gen/, URLs will be referenced properly.

[singingwolfboy]

@bngsudheer I just tested this locally, and it doesn't seem to make any difference for where webpack outputs the font files. Your pull request also has a syntax error, since the filename line doesn't end with a comma. Can you double-check that this works the way you expect?

[bngsudheer]

Thanks for pointing out the missing comma. Fixed in https://github.com/lektor/lektor-website/pull/108/commits/5df1f13f0817020d56aaf4674f4c1ac418a04868

Some packages like bootstrap-sass needs to know the correct publicPath when generating the build. I will provide you examples of configs that fail without publicPath.

[bngsudheer]

Steps to reproduce the issue:

Install bootstrap-sass and some required packages npm install bootstrap-loader css-loader node-sass resolve-url-loader sass-loader style-loader url-loader file-loader jquery imports-loader bootstrap-sass jqyery --save-dev

Webpack configuration to build Bootstrap:

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var options = {
  entry: {
    'app': './js/main.js',
    'styles': './scss/main.scss',
    'my.bootstrap.build': 'bootstrap-loader'
  },
  output: {
    path: path.dirname(__dirname) + '/assets/static/gen',
    filename: '[name].js'
  },
  devtool: '#cheap-module-source-map',
  resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /bootstrap-sass\/assets\/javascripts\//, 
        loader: 'imports?jQuery=jquery'
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
      },
      {
        test: /.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test: /.woff2?$|.ttf$|.eot$|.svg$|.png|.jpe?g|.gif$/,
        loader: 'file'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css', {
      allChunks: true
    }),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.DedupePlugin()
  ]
};

module.exports = options;

Include the build in your template:

 <script type=text/javascript src="{{ '/static/gen/app.js'|asseturl }}" charset="utf-8"></script>
  <script type=text/javascript src="{{ '/static/gen/my.bootstrap.build.js'|asseturl }}" charset="utf-8"></script>

Include some markup that uses Bootstrap fonts in your template:

 <button type="button" class="btn btn-primary" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>Some text</button>

Now, you will see that request is being sent to http://127.0.0.1:5000/448c34a56d699c29117adc64c43affeb.woff2

If you look in the filesystem, the file 448c34a56d699c29117adc64c43affeb.woff2 is present in assets/static/gen/

If you provide proper publicPath the request will be sent to correct URL.

[rlaverde]

Hi, I was having the same error, fonts, and images didn't generate correct paths. I noticed the problem trying to link font-awesome, and slick-carousel using sass