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.

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!