DEV Community

Zubair Mohsin
Zubair Mohsin

Posted on

2 1

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) {
            setToastActive(true);
        }
    }, [flash.message]);

    const toastMarkup = toastActive ? (
        <Toast
            content={flash.message}
            onDismiss={() => setToastActive(false)}
        />
    ) : null;

    return (
        <AppProvider i18n={translations}>
            <Frame>
                {children}
                {toastMarkup}
            </Frame>
        </AppProvider>
    );
};

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 (
        <AppLayout>
            <Page>
                <Layout>
                    <Layout.Section>
                        <Card sectioned>Dashboard</Card>
                    </Layout.Section>
                </Layout>
            </Page>
        </AppLayout>
    );
}
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 😴

P.S.

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay