Setting up Polaris React components in your Shopify App with Laravel
Tags: laravel, react, webdev, shopify
Published: 2020-02-22 07:09:35

---
title: Setting up Polaris React components in your Shopify App with Laravel
published: true
description: In this tutorial, we are going to learn how we can use Polaris React components in a Shopify App made with Laravel.
tags: 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](https://github.com/ohmybrew/laravel-shopify) package, actively maintained and offers many features out of the box.
* We will be using [Shopify App Bridge](https://shopify.dev/tools/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](https://polaris.shopify.com/components/structure/app-provider#section-initializing-the-shopify-app-bridge-deprecated-)

#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](https://shopify.dev/tools/app-bridge/react-components)

```javascript
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.
```javascript
mix.react('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
```
###Importing Polaris styles
In `app.scss` import the stylesheet:
```css
@import "~@shopify/polaris/styles.css";
```
Finally, run below to command to install additional dependencies, compile everything and keep watching for changes:
```javascript
npm install && npm run watch
```
##On the Laravel side 🤓
* We need a route:
```php
Route::get('/', 'HomeController@index')->middleware('auth.shop')->name('home');
```
* a Controller:
```php
class HomeController extends Controller
{
    public function index()
    {
        return view('app');
    }
}
```
* a View:
```php
<!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.

```javascript
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](https://shopify.dev/tools/app-bridge/react-components#using-app-bridge-with-polaris) 

Let's add a **Card** element to see something on the screen.
```javascript
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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3nrynrmzqb6y0s2q8v8i.png)

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](https://github.com/awebartisan/laravel-polaris-demo)

Thanks for reading 🙏🏼