Disclaimer: This is not a tutorial

This is just me trying to log/document my journey of building a Shopify App and hopefully, launching it 🤞

What am I building?

I have decided not to reveal the app idea until I make some good progress. There is a good reason for that. Shopify App market is rapidly growing and people are always looking for ideas to make apps and sell them.

Well, it's not like my I am going to build the next groundbreaking app 😅 Just trying to play it safe, initially.

I have spent some time on doing some research about the idea, how is it going work? what problem does it solve? And some other questions. Which I believe, everyone should do before starting a project.

Teaser: This app has something to do with offering discounts 🙈

What tools I am planning to use?

• I am a Laravel Fanboy, so without any doubt, backend will be built with Laravel.
• For app UI, I'll be using Shopify Polaris which has beautify React components ready to use.
• For the communication between frontend and backend I'll be using Inertia.js. Its super awesome.
• Did someone say TypeScript? 👨🏽‍💻 Well, maybe!

Time for the Day1 progress

• Setup a new Laravel project
• Setup a new app on Shopify Partners Dashboard and get API credentials

App name becomes URI of the app in Shopify Admin when a merchant opens the app. Therefore, I tend to create 3 apps on partner dashboard ( appname, appname-local, appname-staging) to reserve the appname as URI )

• Require and setup laravel-shopify package to get me started really quickly with Shopify Auth and more.
• Following the documentation from laravel-shopify wiki page for setup.
• Bare minimum app is installed in a Shopify Development store
• Next I'll setup React and Shopify Polaris. Also import Polaris styles in app.scss file.
• This is a confusing part ( I think ) so I'll just share some code, maybe someone find it useful.
• Install Inertia and Inertia-React adapter while we are at it.

app.js
Entry point file:

import React from 'react';
import { render } from 'react-dom';
import { App } from '@inertiajs/inertia-react';

const el = document.getElementById('app');

render(
    <App
        initialPage={JSON.parse(el.dataset.page)}
        resolveComponent={(name) =>
            import(`./Pages/${name}`).then((module) => module.default)
        }
    />,
    el,
);

Make sure to create Pages directory under resources/js

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');

mix.react('resources/js/app.js', 'public/js')
    .sass('resources/css/app.scss', 'public/css')
    .webpackConfig((webpack) => {
        return {
            output: {
                chunkFilename: 'js/[name].js?id=[chunkhash]',
            },
            resolve: {
                alias: {
                    '@': path.resolve('resources/js'),
                },
            },
        };
    });

app.scss

@import '~@shopify/polaris/dist/styles.css';

• Installed Inertia.js Laravel adapter for backend.
• Spent 20 minutes only to find out that npm run watch was not running 🤦🏽‍♂️ ( I probably need to go to sleep )
• Well, here is basic Shopify app with React + Polaris + Inertia.js + Laravel

Signing off for today. 😴

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