DEV Community

Zubair Mohsin
Zubair Mohsin

Posted on

Setting up Polaris React components in your Shopify App with Laravel

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
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

Importing Polaris styles

In app.scss import the stylesheet:

@import "~@shopify/polaris/styles.css";
Enter fullscreen mode Exit fullscreen mode

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

npm install && npm run watch
Enter fullscreen mode Exit fullscreen mode

On the Laravel side 🤓

  • We need a route:
Route::get('/', 'HomeController@index')->middleware('auth.shop')->name('home');
Enter fullscreen mode Exit fullscreen mode
  • a Controller:
class HomeController extends Controller
{
    public function index()
    {
        return view('app');
    }
}
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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"));
}
Enter fullscreen mode Exit fullscreen mode

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"));
}
Enter fullscreen mode Exit fullscreen mode

Output:
Alt Text

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 🙏🏼

Top comments (1)

Collapse
 
sunny_numan profile image
Numan Sunny

Hmmm html css JavaScript.... Php... Fully command...