Rails 5.1 api webpacker and vuejs

Question

I'm trying to create a Rails API and a client in VueJs using webpacker on Cloud9.

After a standard installation : npm install -g yarn && rails _5.1.4_ new . --api --webpack=vue

I'm using Foreman to launch rails and webpack, here is the file.

# Procfile.dev
web: bundle exec rails s -p $PORT -b $IP
webpacker: ./bin/webpack-dev-server --inline true --hot true --public $C9_HOSTNAME

I changed the development part of config/webpacker.yml to this :

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 8081

When launching foreman start the webpack creates public/packs/manifest.json containing the follow object.

{
  "application.js": "/packs/application-d2ce57fea2210882a7d4.js",
  "hello_vue.css": "/packs/hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css",
  "hello_vue.js": "/packs/hello_vue-d8d50a7562d6abcbea06.js"
}

I created a public/index.html file containing the following

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="packs/hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css" />
  </head>

  <body>
    <script type="text/javascript" src="packs/application-d2ce57fea2210882a7d4.js"></script>
    <script type="text/javascript" src="packs/hello_vue-bd484161b1956b3a536b.js"></script>
  </body>
</html>

Now when I go to the URL I have the Hello World from Webpacker in my JavaScript console and the Hello Vue! in the browser.

My question is : Is it possible to use this generated manifest.json to automatically launch the good files (js, css) and how ?

Alain ANDRE · Accepted Answer · 2018-06-23 13:45:35Z

1

There is a plugin called html-webpack-plugin that can create the index.html file with all the good css and js links.

I just had to npm install html-webpack-plugin --save-dev and then modify my config/webpack/development.js like this :

const environment = require('./environment')
const HtmlWebpackPlugin = require('html-webpack-plugin')

environment.plugins.prepend('HtmlWebpackPlugin', new HtmlWebpackPlugin({
  title: 'My Vuejs App',
  inject: true
}))

module.exports = environment.toWebpackConfig()

edited Jun 23, 2018 at 13:45

answered Nov 27, 2017 at 14:38

Alain ANDRE

3051 silver badge13 bronze badges

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

1 Comment

Kobi Over a year ago

This was helpful. Was difficult to determine which file in Webpacker was the same as the Webpack docs, and the syntax was a bit different. One note: for Webpack 4 .set() is now replaced with .prepend(), so the code above is correct, but you should do: environment.plugins.prepend('HtmlWebpackPlugin', new HtmlWebpackPlugin({ title: 'My Vuejs App', inject: true }))

Collectives™ on Stack Overflow

Rails 5.1 api webpacker and vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related