How to use Phoenix and react js with Shopify Polaris

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?

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.


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”.

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.

  1. mkdir shopify-polaris-react
  2. cd shopify-polaris-react
  3. npx create-react-app shopify-polaris-react
  4. mv shopify-polaris-react front-end
  5. mix back-end --app shopify
  6. cd front-end
  7. yarn add @shopify/polaris
  8. Replaced contents of front-end/src with contents from
  9. 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
  10. yarn start (to ensure your react-app works fine)
    • if you get some css error, you may want to take a look at 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
  11. cd back-end\ (root of phoenix app)
  12. Add {:corsica, "~> 1.1"} to mix.exs so we can handle CORS request from react app (running on another port) during development
  13. mix ecto.create
  14. iex -S mix phx.server (to ensure phoenix app works)
  15. 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"] ->
		| path_info: ["shopify-app", "index.html"],
		 request_path: "/shopify-app/index.html"

    _ ->
  1. add the plug plug(:serve_shopify_app) before plug(Plug.Static,... in endpoint.ex
  2. 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)
  3. 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)
  4. Test that you can access your react app from phoenix by pointing your browser to http://localhost:4000/shopify-app
  5. 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

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

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

def form(conn, params) do
    json(conn, params)
  1. 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)

  2. I created a github repo


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

Thanks! I will this this.

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

More info:

1 Like

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.


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?

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.

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.

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.

1 Like

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.