How do I deploy Vue Webpack-simple app to Netlify?

Question

This is my first attempt with the webpack-simple template. I have very little experience with webpack in general and am hoping someone can help point me in the right direction. I am trying to deploy a Vue app that uses webpack-simple to Netlify.

It's my understanding that I should just be able to run npm run build or yarn build on Netlify, and voila... But, I'm getting a 404 after the deploy. Below are the files that should impact the deployment on Netlify:

Here's my webpack config:

var path = require('path')
var webpack = require('webpack')
require("babel-polyfill");

module.exports = {
  entry: ["babel-polyfill", './src/main.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      }, {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(woff|woff2)(\?.*$|$)/,
        loader: 'url-loader?importLoaders=1&limit=100000'
      },
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

And my package.json. I have everything in dependencies as opposed to devDependencies, but Netlify sometimes chokes on dev dependencies for me.

{
  "name": "quotes",
  "description": "blah blah blah",
  "version": "1.0.0",
  "author": "Me",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "html-loader": "^0.5.5",
    "prettier": "^1.12.1",
    "url-loader": "^1.1.1",
    "vue": "^2.5.11",
    "vue-loader": "^13.0.5",
    "vue-router": "^3.0.1",
    "vue-svg-loader": "^0.10.0",
    "vue-template-compiler": "^2.4.4",
    "vuelidate": "^0.7.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

My vue.config

module.exports = {
  baseUrl: '/'
}

And finally, my babel.rc

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-regenerator"
  ]
}

There are no errors in the deployment log. Netlify suggests that the site is deployed. But, I keep getting a "Page Not found" error. I suspect I'm missing something simple here.

Also, when I run the build in my local dev environment, I see only two files in my dist folder. They are a build.js and a build.js.map file. Should I also see an html file in there somewhere? Any help is appreciated. Thank you.

In the answer I gave you can get the webpack-simple example working easily, but it might be better to consider a better example of a deploy solution. Although this is nice for a starter to learn how Netlify can host a vue site. — talves
– talves, Commented Oct 12, 2018 at 0:52

talves · Accepted Answer · 2018-10-12 14:13:03Z

5

The Vue webpack-simple template does not create a finished build folder. It assumes you will be hosting your site from the root of the project.

There are a couple simple options for this example to host on Netlify:

Deploy from root (example only)

Anything you have in your project will get deployed to the Netlify CDN. Best practices would be to avoid this solution, but this is only an example, so we will show it is possible. It helps us to understand how Netlify works.

Add the following netlify.toml to the root of your project

netlify.toml

[build]
  command = "yarn build"
  publish = "/"

Build from a copied deploy site location (recommend)

This will require you to make sure any assets you add to the site also get copied to the build folder.

Add the following netlify.toml to the root of your project

netlify.toml

[build]
  command = "yarn build && mkdir build && cp index.html build && cp -r dist build/dist"
  publish = "build"

Also add build/ to your .gitignore file.

NOTE: The copy commands could be moved to the scripts section of the package.json. The above works for this simple working example. Also in a more advanced webpack solution, the dist folder would be your deploy folder and would handle the copy of the index.html for you.

edited Oct 12, 2018 at 14:13

answered Oct 12, 2018 at 0:43

talves

14.4k5 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

somecallmejosh Over a year ago

talves, thank you for your informative reply! This is very helpful.

jaletechs Over a year ago

this totally saved me!

Collectives™ on Stack Overflow

How do I deploy Vue Webpack-simple app to Netlify?

1 Answer 1

Deploy from root (example only)

Build from a copied deploy site location (recommend)

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Deploy from root (example only)

Build from a copied deploy site location (recommend)

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related