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.
Top comments (3)
Is developing for Shopify free? My experience with Shopify has been some subscription or other on minor features at every turn.
Developing apps for Shopify has some costs.
Thanks.
Thank you sir :) Very helpfull