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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more