Building a Shopify App - Day1

#webdev #laravel #shopify

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