Setting up Polaris React components in your Shopify App with Laravel

#laravel #react #webdev #shopify

Important, must read 🔴

I am going to assume that you have setup your Laravel application and your Shopify Authentication is in place.
If you need help with above, check out ohmybrew/laravel-shopify package, actively maintained and offers many features out of the box.
We will be using Shopify App Bridge.
We will be respecting the deprecation notices from Shopify so that our setup is ready for Polaris v5.
One example of deprecation notice, link

Diving in code 🐋

In a fresh Laravel project ( version 6.x at the time of writing ), we need following dependencies:

react
react-dom
@shopify/polaris
@shopify/app-bridge-react , Read more

npm install react react-dom @shopify/polaris @shopify/app-bridge-react

After this, we need to change mix.js() to mix.react() in webpack.mix.js file to tell Laravel Mix that we will be using React.

mix.react('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Importing Polaris styles

In app.scss import the stylesheet:

@import "~@shopify/polaris/styles.css";

Finally, run below to command to install additional dependencies, compile everything and keep watching for changes:

npm install && npm run watch

On the Laravel side 🤓

We need a route:

Route::get('/', 'HomeController@index')->middleware('auth.shop')->name('home');

a Controller:

class HomeController extends Controller
{
    public function index()
    {
        return view('app');
    }
}

a View:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <title>Polaris Demo</title>
</head>
<body>
    <div id="app"></div>

    <input type="hidden" id="apiKey" value="{{ config('shopify-app.api_key') }}">
    <input type="hidden" id="shopOrigin" value="{{session('shopify_domain')}}">

    <script src="{{asset('js/app.js')}}"></script>

</body>
</html>

We need the apiKey and shopOrigin to initialize Shopify App Bridge.

React, React, React 🥳 🔥

In app.js, let's import React, ReactDOM, Provider and initialize App Bridge.

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {AppProvider} from '@shopify/polaris';
import {Provider, TitleBar} from '@shopify/app-bridge-react';

export default class App extends Component{

    render(){

        const config = {
            apiKey : document.getElementById("apiKey").value,
            shopOrigin : document.getElementById("shopOrigin").value,
            forceRedirect : true
        };

        return(
            <AppProvider>
                <Provider config={config}>
                    <TitleBar title="Polaris Demo" />
                </Provider>
            </AppProvider>
        );

    }

}

if (document.getElementById("app")) {
    ReactDOM.render(<App />, document.getElementById("app"));
}

App Bridge React is fully compatible with Polaris. read in docs

Let's add a Card element to see something on the screen.

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {AppProvider, Card, Page} from '@shopify/polaris';
import {Provider, TitleBar} from '@shopify/app-bridge-react';

export default class App extends Component{

    render(){

        const config = {
            apiKey : document.getElementById("apiKey").value,
            shopOrigin : document.getElementById("shopOrigin").value,
            forceRedirect : true
        };

        return(
            <AppProvider>
                <Provider config={config}>
                    <TitleBar title="Polaris Demo" />
                    <Page title="Polaris Demo Page">
                        <Card sectioned title="Hello World"></Card>
                    </Page>
                </Provider>
            </AppProvider>
        );

    }

}

if (document.getElementById("app")) {
    ReactDOM.render(<App />, document.getElementById("app"));
}

Output:

This is how you can get started with using Polaris React components in your Shopify app with Laravel. Let me know if I missed something or there is another option to achieve this.

Companion GitHub repository: awebartisan/laravel-polaris-demo

Thanks for reading 🙏🏼