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