All threads / Using Webpack in Rails with the Webpacker Gem Discussion

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Using Webpack in Rails with the Webpacker Gem Discussion

I wish our front end guys took 20 minutes to set up webpack on a project!

Reply

I think breakfast/brunch makes a better job at adding SPA support to rails.

Garry Gomez ·

breakfast requires rails 5.0 or greater though

Reply

Thanks a lot, Chris, well done !

Reply

Nice intro to webpacker. I'm looking forward to how to get it all working smoothly with turbolinks. It helps big time if you want your web app to be speedy on actual mobile devices.

Reply
Alex Musayev ·

Rails 5.1 is released finally - http://weblog.rubyonrails.o...

Reply

Great overview Chris!

Reply
Reply
Joseph Le Brech ·

how can you use webpacker with angularjs 1?

Reply

Thank you for this material, really helpfull!
got stucked with a nested relation, i'm using rails 5.1.
i got this if i try to follow your solution > "{"players.team":["must exist"]}" the solution is to manually add a team_id to the player before call .save in rails. and after.save the current player gets the right id of the "new_team".id.

Table test :

Parameters = {"team"=>{"id"=>nil, "name"=>"testes", "players_attributes"=>[{"id"=>nil, "name"=>"dadada", "_destroy"=>false, "team_id"=>nil}]}}

controller will ignore team_id, in players_attributes as we don't intend to permit it, as long as player id and team id. assuming :

so parameters = { "team"=>{"name"=>"testes","players_attributes"=>[{"name" => "ronaldinho","position" => nil}]}}

team = new(parameters)
team.players.each do player
team.player.team_id = 1
end

team.save

and ok, it works. if i dont use this "gambiarra" each loop it will return
"{"players.team":["must exist"]}

Can you help me? thanks

Reply

How do I use SCSS? I tried setting <style lang="scss" scoped> in app.vue but then webpack stopped emitting the .css files entirely.

Update: Chris investigate this during a Slack discussion and found a fix. Use loader/vue.js from webpacker gem's master head, then set const extractStyles = true. https://github.com/rails/we...

Reply

i get this error :(

Adding configurations
append .gitignore
Installing all JavaScript dependencies
run yarn add @rails/webpacker [email protected] from "."
ERROR: [Errno 2] No such file or directory: 'add'
Installing dev server for live reloading
run yarn add --dev webpack-dev-server from "."
Usage: yarn [options]

yarn: error: no such option: --dev

Reply
Hey Chris!

I was wondering if you've been deploying Webpacker apps with capistrano.

I've been dealing with failures due to Node.js v8.10 running out of memory on 
rake assets:precompile. 

Not sure where to look to fix this issue, since my Webpacker assets aren't that big to begin with. (React + Apollo-client do add some weight the the bundle, plus a couple custom components).

I'm runing on a standard 1GB DO droplet which I'd guess should be enough for now, I'll try increasing it's memory but it doesn't seem like a sustainable solution as my app keeps growing and I add functionality.

Anyways, just wondering if you'd encounterd a similar issue so you could point me towards the right direction to fix it.

Cheers, love your casts and this community.

Felipe
Reply
Please break lines to paragraph.
Reply

Hi there,

In my company we had a lot of problem when getting started with webpacker, especially for juniors developpers.
To help getting started, I wrote a small article showing how to configure webpacker properly with Rails 6.

https://blog.capsens.eu/configuring-webpacker-for-rails-6-with-bootstrap-jquery-and-hot-module-reloading-bdb3c7aa5f0

Reply
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 37,629+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.