DEV Community

Zubair Mohsin
Zubair Mohsin

Posted on

Building a Shopify App - Day2

Alright, let's kick off Day 2 of the side project.

Few Thoughts

  • I have decided to keep it non-embedded app initially. It just makes development easier πŸ€·πŸ»β€β™‚οΈ
  • Decided not to go with TypeScript for now

Day 2 progress

  • AppLayout component, including Toast component which displays if there is a flash error returned from backend.
import React, { useState, useEffect } from 'react';
import { usePage } from '@inertiajs/inertia-react';
import { AppProvider, Frame, Toast } from '@shopify/polaris';
import translations from '@shopify/polaris/locales/en.json';

export const AppLayout = ({ children }) => {
    const { flash } = usePage().props;

    const [toastActive, setToastActive] = useState(false);

    useEffect(() => {
        if (flash.message) {
    }, [flash.message]);

    const toastMarkup = toastActive ? (
            onDismiss={() => setToastActive(false)}
    ) : null;

    return (
        <AppProvider i18n={translations}>

Enter fullscreen mode Exit fullscreen mode
  • Dashboard component
import React from 'react';
import { Card, Layout, Page } from '@shopify/polaris';

import { AppLayout } from '@/Shared/Layouts/AppLayout';

export default function Show() {
    return (
                        <Card sectioned>Dashboard</Card>
Enter fullscreen mode Exit fullscreen mode
  • Learned more about HandleInertiaRequests middleware in Inertia.js Laravel adapter. We used to do this inside a ServiceProvider before.
  • Registered a ScriptTag. Just needed to provide a URL and laravel-shopify package took care of rest
  • Returned JavaScript from Controller method. Going to write a separate ( short ) article about this. Link

Time spent

1 Hour

Signing off 😴


I tweet about Laravel, Shopify and React stuff. If any of this is your thing, you can follow me on Twitter.

Top comments (0)