CODEWITHSUNDEEP
ruby-on-railsvue.jswebpackermanifest.json
Alain ANDRE
Alain ANDRE

Reputation: 305

Rails 5.1 api webpacker and vuejs

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 ?

Upvotes: 0

Views: 534

Answers (1)

Alain ANDRE
Alain ANDRE

Reputation: 305

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()

Upvotes: 1

Related Questions