Skip to content

Modern front-end and Ruby on Rails are friends ;)

License

Notifications You must be signed in to change notification settings

artofcodelabs/rails-modern-front-end

Repository files navigation

🧐 What's this?

This repository was created as a "code-along" while I was reading blog posts about modern front-end in Rails available on Evil Martians' blog.

Each blog post is in the separate commit, so you can look at incremental changes.

On top of that - I fixed some bugs and introduced my own changes to reduce an unnecessary code and to create even bigger separation between the front-end and the back-end.

Commits in a chronological order:

  1. Initial commit

  2. 🐑 Evil Front Part 1: Modern Front-end in Rails

  3. 👾 Evil Front Part 2: Modern Front-end in Rails

  4. 🛸 Evil Front Part 3: Modern Front-end in Rails

  5. Bug fixes and improvements

  6. loco.js - Loco framework has been added to simplify communication between the front-end and the back-end. It looks like there are more additions than deletions, though, but that's because of the fact that current_user is now persisted in the database. Loco-Rails requires an authenticated model to work with a full functionality. So the app is kind of closer to a production version. However, the part of code that is responsible for a front-end ↔ back-end communication looks way simpler now.

  7. From webpacker to webpack - I strongly believe in a separation of concerns and that a front-end code should be handled by front-end tools. I don't like gemified wrappers of front-end libraries. And I feel the same about webpacker. Why not to use webpack directly instead? This is what I did. To have it working I had to restore Sprockets back. It is kind of a trade off. But it is fair to me. I just use it at the last stage to move assets from app/assets to public/assets and to gzip them.

⚙️ Initialization

Standard Rails stuff:

bundle
bin/rails db:create
bin/rails db:migrate

Plus installation of front-end dependencies:

npm install

🎮 Usage

For development - just run Rails server and webpack with development configuration in separate terminal tabs:

bin/rails s
npm run start

For production - just generate a production version of assets first and follow-up with a standard Rails procedure.

npm run build
bin/rails assets:precompile

📜 License

MIT License

👨‍🏭 Author

Zbigniew Humeniuk from Art of Code