Shopify_app: Status of this repository and Shopify Polaris

[mikeyhew]

Hi everyone, it's been a while since I've been working full-time on Shopify apps. In the meantime, two big things have happened:

1. Shopify has released Shopify Polaris, a library of React components specifically designed to “help developers create the best experience for merchants”.
2. Rails 5.1 has been released, with first-class support for app-like javascript (i.e. React) using the Webpacker gem.

Ideally, I'd like to see Polaris integrated into this gem. Some things that would be useful:

• A generator for creating a starter app using Polaris. It need only support Rails 5.1+
• A section of the Readme on using Polaris and this gem together. This should probably come before the generator, and the generator would just automate the steps involved.

[mikeyhew]

If you have any other good ideas for how these three libraries – Shopify Polaris, Rails, and shopify_app – can be used together, please post them here. Also if there are any blog posts or tutorials about using Polaris and shopify_app together, please do the same.

[kevinhughes27]

Hey @mikeyhew - I am hoping to find some time to work on this next week. In the meantime I like your idea of collecting resources from anyone who might have looked at this already.

cc @AWaselnuk @TheMallen @lemonmade

[resistorsoftware]

I have shopify_app rendering Polaris fine. The only part of the puzzle that is still not solid for me is the Redux aspect of getting data to/from the React... seems easy but is not. Especially since we have Rails as an API now, Rails as an MVC App with API parts, and thus much choice on how to get that all going.

So I would love to see some of the @kevinhughes27 thoughts!

[kevinhughes27]

I've seen and tried a couple of patterns and I would like to settle on something standard for this gem.

How did you configure your asset pipeline to include polaris?

[resistorsoftware]

Rails 5.1 with --webpack=react
I think used npm to install polaris.
I then setup webpack dev server to work with ssl and an open port.
I then ran my Procfile, and the assets compiled and were available.

So I do not think I did anything except trick out the usual assets/javascript/pack and some of my own components, which meant I was able to deliver a view in an Embedded Shopify App, with Polaris as my page layout, and some buttons and components that worked in my minimal React setup. I still have no working CRUD with that, as I am trying to figure out the best way to do that.

I am not sure that answers your question at all. It rendered an App for me. I commented though that due to something in Webpack, Chrome hated the SSL and so my nice Green development environment is now shot to hell thanks to Polaris... I have no idea where the problem lies with that. Some certificate for Webpack or something must be triggering Chrome to hate.

[cbodtorf]

I'd be interested to see how other's are implementing this.
I've been using react_on_rails gem. A nice solution, but it's not exactly a great experience. It feels awkward and a bit redundant passing data from Rails views to React Components. But it was easy add Polaris into the mix.

[kevinhughes27]

I used react_on_rails for a project about a year ago and I haven't had time to check it out since Rails 5.1 with webpacker was announced. I was hoping Rails 5.1 would make things simpler and we could have a bit more of a minimal configuration in this gem.

[resistorsoftware]

My Rails 5.1 has no gem react_on_rails. I suppose that could be either the source of my problems, or the source of why I have no problems :)

I guess it is time for me to see what the gem does as perhaps it would make CRUD easier with Polaris.

[mikeyhew]

@kevinhughes27 Glad to see it is on your radar.

With Rails 5.1, using Polaris in an app that is already set up for React should be as simple as running yarn add '@shopify/polaris', adding a Sass import in one file, and a JS import in another. Getting a working Shopify App with React, on the other hand, will be a bit more complicated: you need to set up an AJAX API so you can access your models and the Shopify API, and then you need some JS code to query the API and render the React components.

A good starting point would be to get an app working with a home page that lists products, like the one that is created with rails g shopify_app:home_controller. @resistorsoftware this would at least demonstrate the R in CRUD.

[edavis10]

Please make sure Polaris and React are either optional add-ons or there's a way to opt-out of them. Not every app needs or wants to use them.

[hallenmaia]

rails (5.1.1) + shopify_app (7.2.8) + webpacker (2.0) + react-intl (2.3.0) + react-router-dom (4.1.1): I created a new layout called polaris.html. In this way, Polaris and React become optional. In the future there may be a setting enabling the polaris on the shopify_app.rb initializer in the same way as the EmbeddedApp.

I am using the reac-int to make it easier to format dates and numbers because I found this a bit tricky in javascript.

Also I am also using the react-router for easy navigation between components.

[dark88888]

I ended up in using Polaris HTML version, VueJS, and Turbolinks, the downside is that I had to create again some javascript that Polaris React version already had. In the end, I'm pretty happy with the result.

[kevinhughes27]

We explored this over the last 2 days and we've tentatively come to the conclusion that React + Rails and Polaris are too new with too many options for us to include an opinionated setup in this gem at this time. I want to continue to watch how Rails and React come together as well as push for some improvements to the HTML version of Polaris for server side applications.

In the meantime I encourage everyone to continue the discussion here and share what has/has not been working for you. When the path forward is more clear I do really want to include Polaris in ShopifyApp.

[jasonbuehler]

Polaris with Relay/GraphQL seems like an awesome stack if the kinks could be worked out between relay/rails. I haven't been successful yet getting a basic read op to render in polaris components with most resources I have found have been more node focused. The graphql-ruby gem has support for a relay compliant server but I haven't been able to put the pieces together as of yet to work within the scope of a Shopify app.

[mikeyhew]

@jasonbuehler if you get Polaris, Relay and graphql-ruby running together, please post your code!

[mikeyhew]

To give an update: I created a rails template that generates an app with Polaris. I wouldn't look at that file too closely: most of the code is specific to our workflow and doesn't have anything to do with Polaris. The interesting Polaris-related stuff is in embedded_app.html.erb, application.js, and components.jsx. It has mostly been straightforward, there are only a couple of design choices I had to make:

• Use react-router for routing
• Create a global appConfig object in an inline script tag in the head, using erb <%= %> tags to load config from ruby. Then reference this config in components.jsx when creating the EmbeddedApp component.

There will be more decisions to make when I'm implementing CRUD. What I was thinking of doing was I'd set up a JSON api and call that, but if there is a clean way to do things with Relay and GraphQL, I'd be interested in trying that out. I'm still a bit new with React, so even though I have a good handle on creating components, I'm not so sure how you're supposed to update/remove them

[alexanderwilkie]

Hi,

I have a more fundamental question, not directly related to this issue. As a newcomer to Shopify App development I must admit the current state of the environment is confusing - should I be focusing on rails or client side app dev? I don't quite understand Shopify seemingly pushing rails, then introducing React components for Polaris - which from reading the above, appears to not be natively or easily supported. I admit I'm really just getting started in this field so my understanding is far from fully formed :( but this is one of the few places I've seen this discussed.

[resistorsoftware]

App development period is your concern. The tools and libraries you use are your choice. Polaris is an incomplete wrapper library on some front-end React components that attempt to provide developers with a look and feel consistent with Shopify. Has zip/zero/zilch to do with Rails or any other App support except as per delivering React. Best to go to another place to discuss philosophy but I felt like you were hungry for the basics, so here is my opinion anyway. Delivering an App for Shopify is best done using the tools you are best with, not with any recommended "stack" from anyone else.

Shopify App gem is an excellent starting point if you script in Ruby to deliver an App. Hence this repository and discussion. Tacking on Polaris is just noise in the signal at this time.

[USvER]

Does anyone managed to get Polaris components to work in rails asset pipeline?
Because i can't get even styles to compile
https://github.com/Shopify/polaris/issues/274

[janklimo]

One piece of this puzzle I'm yet to figure out is making authenticated XHR requests from your React embedded app to the Rails backend.

Say I want to request a collection of images as JSON. What are the required request headers/params I need to pass to the authenticated controller, so that it's able to scope the response to the authenticated shop? Many thanks!

[resistorsoftware]

You store your authenticated session as you wish. Perhaps you use a cookie or a DB table for that. Once authenticated, any call you make to the backend, via fetch() for example, checks for authenticated calls via the controller inheriting from authenticated controller. All your calls should include a shop parameter to ensure you don't have dumb errors when a call is made after a session has expired. So make your call, include shop param, and wait for results.