Webpacker: Ditching the Rails view layer

[aalvrz]

Hello everyone.

I was wondering if it was possible (and recommended) to completely ditch Rails' view layer in favor of a JavaScript framework integrated with the help of webpacker, and just an application.html.erb entry layout file.

I think it would be a good idea to add some guidelines about this to the Wiki.

[gauravtiwari]

@BigChief45 Yes, totally up to you and Webpacker support this out of the box. You could use client side router instead of Rails router. However with Rails views and routing you may be able to render much smaller packs with a common vendor bundle.

You can also go with turbolinks route without any client side router and just use Rails router + Turbolinks, however to have any real benefit you may need to bundle you app into one single javascript app file - - https://webpacker-react-frontend.herokuapp.com

[renchap]

With webpacker-react you can render a component without a view, if this component is the only thing you want (wrapped in your layout) : https://github.com/renchap/webpacker-react#rendering-from-a-controller
I guess you can use the same technique for any other JS framework.

[gauravtiwari]

Feel free to make a PR to update docs 👍 🍰

[shawnacscott]

I tried to create a new app like rails _5.1.0.rc2_ new --api --webpack=angular app_name today, and I would have expected it to have this behavior (stripping out the default rails view layer in deference to the JS app), but instead it removed some of the needed JS components. Is this supposed to be a supported option? What is the expected way of accomplishing this? (Maybe I should file this on the main rails project instead?)

[dhh]

--api and --webpack have not been designed to be used together.

On Apr 27, 2017, at 17:51, Shawna C. Scott [e-mail] wrote:

I tried to create a new app like rails _5.1.0.rc2_ new --api --webpack=angular app_name today, and I would have expected it to have this behavior (stripping out the default rails view layer in deference to the JS app), but instead it removed some of the needed JS components. Is this supposed to be a supported option? What is the expected way of accomplishing this? (Maybe I should file this on the main rails project instead?)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[aalvrz]

Hi all. Thanks for all the answers and suggestions.

I like the idea of using a client router. But what I am really worried about, and what I really want to avoid, is getting caught up in between both things: using Rails views and a Front-end framework.

I will begin experimenting and hopefully soon, I will have a draft on this to add to the documentation.

[gauravtiwari]

Pushed two examples one just frontend with webpacker - https://github.com/gauravtiwari/webpacker-rails-api-frontend and second frontend and api living together under one app - https://github.com/gauravtiwari/webpacker-rails-api (you would probably need to setup nginx on production to proxy app server and frontend)

There are no views and by default Rails serve from public/app directory https://github.com/gauravtiwari/webpacker-rails-api/blob/master/config/application.rb#L25 and HTML plugin - https://github.com/gauravtiwari/webpacker-rails-api/blob/master/config/webpack/shared.js#L75

[kockok]

@gauravtiwari What's the difference between using webpacker and just generate a regular rails --api app with webpack?

[gauravtiwari]

@kockok You mean two separate apps - rails backend and frontend with webpack?

[kockok]

Yes. And wondering if webpacker could specifically tailor a version for rails --api. That way, we might be able to use things like asset_path / image_path in react components but without assets pipeline.

[gauravtiwari]

@kockok Ahh right, no this isn't supported out-of-the-box. You can use this helper tag to get an asset path - https://github.com/rails/webpacker#getting-asset-path and pass in options as you would do with image_path.

[samratjp]

Adding this here in case if anyone else might find it still useful - Airbnb's Hypernova seems to be a decent solution if you're ok running a separate node server for just rendering your JS views on the server side alongside with Rails.

They also did a good writeup recently about their frontend re-architecture with lots of gotchas and lessons learned along the way.

[ojab]

I'm using rails new app --webpack=react --api with HtmlWebpackHarddiskPlugin installed, webpack-dev-server proxying /api requests to the rails s and browsing app via webpack-dev-server (i. e. http://localhost:8080/), everything works great so far without further configuration.

So, what exactly is missing, if anything?

[ziaulrehman40]

@ojab Can i ask how the views/css etc work, like where are they kept.

I am pretty new to react and i am struggling with this setup for a new app i am trying to generate.

[gauravtiwari]

@ziaulrehman40 Depends on how you would like to use them. If it's just including them in views then, use asset pipeline to add styles. Here are couple of examples, not up to date but directory wise it is:

1. https://github.com/gauravtiwari/webpacker-react-frontend
2. https://github.com/gauravtiwari/webpacker-example-app/tree/master/app/assets/javascript
3. https://github.com/gauravtiwari/rails-webpacker/tree/master/app/javascript