Modern Front-end in Rails. Part 1 of a three-part tutorial
An opinionated guide by Andy Barnov and Alexey Plutalov to modern, modular, component-based front-end in Rails 5.1+. No front-end frameworks involved. Follow our three-part tutorial to learn the bare minimum of up-to-date front-end techniques by following an example and finally make sense of it all. Part 1: goodbye Asset Pipeline, code organization, linting.
Comments
Nice article, thank you. But I’ve run into few issues:
Cannot read property 'insertAdjacentHTML' of null
window.addEventListener("load", () => { document.body.insertAdjacentHTML("afterbegin", "Webpacker works!"); });
In Procfile add
--port=3000
option to rails server (not sure why, in my localhost it is uses in 5000 port by default, I used Foreman)server: bin/rails server --port=3000 assets: bin/webpack-dev-server
Looking forward for second part. Also, why there is no way to leave a comment on Martians site?
Nice catch on a port number, indeed not everyone runs rails on 3000 on localhost. As to the
document.body
not being loaded, did you manage to get rid of it? In my test project (the repo will be published at the end of Part 3), your code works.Can you make sure your
application.html.erb
looks something like this?``` <!DOCTYPE html>
EvilChat <%= csrf_meta_tags %> <%= stylesheet_pack_tag 'application' %> <%= yield %> <%= javascript_pack_tag 'application' %>```
There is no plan to add comments to the blog, but you can always reach authors individually or contact Evil Martians directly, if you got any questions, we’ll be happy to answer! :)
Sorry for markdown not being parsed correctly, here’s the gist
your code works.
It works because I’ve added
window.addEventListener
(in your article no any listeners) :) But as I just realized the problem was in my layout:<%= javascript_pack_tag 'application' %>
should be insidebody
tag (just like in your gist, while it was insidehead
).Thanks for you answers.
Post a comment