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.

Latest comments (0)

Timeless DEV post...

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

How to write a kickass README