RubyFlow The Ruby and Rails community linklog

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 inside body tag (just like in your gist, while it was inside head).

Thanks for you answers.

Post a comment

You can use basic HTML markup (e.g. <a>) or Markdown.

As you are not logged in, you will be
directed via GitHub to signup or sign in