How to use Phoenix and react js with Shopify Polaris

wlminimal · October 29, 2018, 11:11pm

Hi
I am trying to make a shopify app using phoenix…
and shopify recommends using react js for the front end(Shopify polaris).

I am very new to React so I read some documents, and watched some tutorial…
Then I set up react with phoenix framework.

But I don’t still understand basics and couldn’t find a help.

How can I use such a form action in react front end?
How can I do submit a form in react ? so my controller do the job?

adrianrl · October 29, 2018, 11:49pm

You’ll need to make a post request when submitting the form, using either a library like axios, superagent… or the native browser API fetch. Using a library is a good idea, you’ll get better browser compatibility, a better way to handle unexpected errors and so on.

However I find a very tedious task building forms using JavaScript, you can build your form with Phoenix like normal, and validate all the fields using vanilla JavaScript, no React.js is needed for that.

peerreynders · October 30, 2018, 1:48am

Having had a quick scan of the documentation of polaris-react, it is my impression there isn’t any place for Phoenix.

The back end for a Polaris app is the EASDK (Embedded App SDK) accessed via the Shopify App Bridge (npm; using Actions) - i.e. Polaris is an embedded front end/native app centric solution (i.e. the back end is entirely controlled by Shopify).

What’s worse, while Facebook uses Flow, Shopify decided to use TypeScript to implement the React components - so reading the source code is just that annoyingly bit different.

For a non-embedded app there is the Rails based shopify_app and a simple node/Express example - which could likely be emulated with Phoenix but seem to be the “old way of doing things”.

samba6 · October 30, 2018, 9:04am

I scanned the polaris-react page. My understanding is it’s just a regular react app where you use components from polaris-react and follow some conventions on design. If you are going to be serving your shopify app from a website not powered by phoenix e.g the shopify admin, then you may do as @adrianrl suggested.

However if you need to serve your shopify from a phoenix-powered site e.g your marketing website written in phoenix and you’d like to take users to your shopify app when a link/button is clicked, then you may follow this simple tutorial that I put together.

I took shopify’s example from here and served it from a phoenix app.

mkdir shopify-polaris-react
cd shopify-polaris-react
npx create-react-app shopify-polaris-react
mv shopify-polaris-react front-end
mix phx.new back-end --app shopify
cd front-end
yarn add @shopify/polaris
Replaced contents of front-end/src with contents from https://github.com/Shopify/polaris-react/tree/master/examples/create-react-app/src
In react app root, run:
echo "REACT_APP_API_URL=http://localhost:4000/api" > .env
Note: http://localhost:4000/ is where your phoenix app is running.
http://localhost:4000/api is where we will post requests from react app
yarn start (to ensure your react-app works fine)
- if you get some css error, you may want to take a look at https://github.com/Shopify/polaris-react/issues/441. It has something to do with a bug in post-css-loader. What I did was to:
  a. yarn eject
  b. removed the post-css parts of the webpack configs (dev and prod)
  c. yarn start
cd back-end\ (root of phoenix app)
Add {:corsica, "~> 1.1"} to mix.exs so we can handle CORS request from react app (running on another port) during development
mix ecto.create
iex -S mix phx.server (to ensure phoenix app works)
create a plug in endpoint.ex to serve priv/shopify-app/index.html for the route /shopify-app:

def serve_shopify_app(conn, _opts) do
  case conn.path_info do
    ["shopify-app"] ->
	%{
		conn
		| path_info: ["shopify-app", "index.html"],
		 request_path: "/shopify-app/index.html"
	}

    _ ->
     conn
  end
end

add the plug plug(:serve_shopify_app) before plug(Plug.Static,... in endpoint.ex
In front-end/package.json, add key homepage with value shopify-app (your react app will then be served from /shopify-app when deployed in phoenix)
from react app root, run:
yarn build && rm -rf ..\back-end\priv\static\shopify-app && cp -r build\ ..\back-end\priv\static\shopify-app
(You may create an npm task for this)
Test that you can access your react app from phoenix by pointing your browser to http://localhost:4000/shopify-app
Take a look at front-end/src/App.js. You will find an example of how to submit form to phoenix at http://localhost:4000/api/form. Phoenix will dispatch to router.ex

scope "/api", ShopifyWeb do
    pipe_through(:api)

    post("/form", PageController, :form)
end

and in page_controller.ex, you can handle like so:

def form(conn, params) do
    json(conn, params)
end

Then just add a link to /shopify-app from any phoenix-served page (like I did in back-end/lib/shopify_web/templates/layout/app.html.eex)
I created a github repo

wlminimal · October 30, 2018, 6:41pm

Thanks for your answer.
Is there anyway to use Phoenix channel for this case?

wlminimal · October 30, 2018, 6:41pm

Thanks! I will this this.

adrianrl · October 30, 2018, 6:59pm

You need to import socket.js to interact with channels, it’s already included with the generated project.

More info: https://hexdocs.pm/phoenix/channels.html

mikemccall · October 30, 2018, 10:30pm

I have an app published in shopify and you are not required to use polaris. Shopify wants third party apps to still feel “branded”. Furthermore they have stated they don’t plan to support anything but react. The only reasons to use shopify polaris is if you really want to use it as a react ui kit or if you are building and embedded app. Otherwise build with what you want and style is how you please. Especially if you want to stand out as your own brand.

wlminimal · October 31, 2018, 4:51pm

Oh I thought I have to use Polaris / React to make a shopify app.
So you mean, I can make just normal web app for shopify app that can embeds in shopify admin right?

mikemccall · October 31, 2018, 5:28pm

If you are building an embedded app it might make sense. You still do not need to use it, you can use the embedded app sdk plus the other features like app bridge. The goal of polaris is so when you embed an app it blends in with the shopify ui.

You can also just build your own external app and use oauth. You could add stuff like admin links so the user gets links in their shopify dashboards but the action is sent to your external app.

Either way you have options.

peerreynders · October 31, 2018, 6:09pm

Following the breadcrumbs:

Embedded Apps:

App Extensions:

Shopify App Bridge:

i.e. @shopify/app-bridge - npm a

To me this does not suggest that a “normal web app” - i.e. non-javascript, server-side rendered web application - is able to appear in Shopify Admin. It sounds more like a pure JavaScript component.

But that is just my impression from the documentation.

For example:

Interacting isn’t the same as embedding.

I think some clarification around the “App Bridge” is in order - because the documentation makes it seem like it’s just a (server-side/client-side?) JavaScript library.

mikemccall · October 31, 2018, 8:26pm

Using the embedded sdk and oauth you can load your app into shopify admin as an embedded app. It’s literally an iframe. Shopify’s example app is a Rails app. No reason it couldn’t be a phoenix app.

From my understanding app bridge is just a library that allows you to utilize the shopify ui and actions instead building them yourself. For example if you wanted to show a confirm modal you can use app bridge to show that modal using shopify’s already built ui and subscribe the the actions. You don’t have to actually build your own modal. You may call the actions from javascript (which makes sense) but the app does not need to be a react app or any type of SPA.

I don’t want to get too far off topic regarding @wlminimal original question. Obviously shopify provides the needed tools and documentation. To meet specific app requirements it’s probably best to consult the docs. I just wanted to point out polaris and react are not required. You can build a server side rendered elixir/phoenix app with a sprinkle of js and use oauth. Embedding apps is also not a requirement.

peerreynders · October 31, 2018, 10:12pm

That isn’t my intention. As far as I can tell the core issue is:

what are the constraints on the technology choices for an “app” to be able to “load inside of Shopify admin” - whatever that means.

It’s literally an iframe.

In terms of general technology that would make sense - it’s just that the technology choice for Polaris makes me suspicious of what “embedded” and “inside of Shopify admin” in this context actually means.

Given the availability of React Native, the push towards “embedded” could hint at an App as a React component capable of running on a web server controlled by Shopify AND a native App distributed by Shopify.

While it’s clear that the Rails example app (which could be built with Phoenix):

is a “Shopify App”
which can interact with Admin

it isn’t clear to me

that the Rail’s example app can “load inside of Shopify admin” - which seems to be the core requirement here.