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.