loading...

Building a Shopify App - Day1

zubairmohsin33 profile image Zubair Mohsin ・3 min read

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

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 Bare minimum Shopify App
  • 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,
);
Enter fullscreen mode Exit fullscreen mode

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'),
                },
            },
        };
    });
Enter fullscreen mode Exit fullscreen mode

app.scss

@import '~@shopify/polaris/dist/styles.css';
Enter fullscreen mode Exit fullscreen mode
  • 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 Alt Text

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.

Discussion

pic
Editor guide
Collapse
lkhrs profile image
Luke

Is developing for Shopify free? My experience with Shopify has been some subscription or other on minor features at every turn.

Collapse
zubairmohsin33 profile image
Zubair Mohsin Author

Developing apps for Shopify has some costs.

  • You need to have a domain
  • You need to have hosting
  • 20% of your app billing

Thanks.

Collapse
mohinpatwary profile image
Mohin patwary

Thank you sir :) Very helpfull