Building a Shopify App - Day1
Tags: webdev, laravel, shopify
Published: 2020-11-12 17:39:23

> 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](https://polaris.shopify.com/) which has beautify **React** components ready to use.
- For the communication between **frontend** and **backend** I'll be using [Inertia.js](https://inertiajs.com). 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](https://shopify.com/partners?ref=artisanify) 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](https://github.com/osiset/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](https://dev-to-uploads.s3.amazonaws.com/i/svke526tbasfw0tpg1ir.png)
- 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:
```javascript
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**
```javascript
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**
```sass
@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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ykgeerjdok2r7zorlby4.png)

Signing off for today. 😴

I tweet about Laravel, Shopify and React stuff. If any of this is your thing, you can [follow me](https://twitter.com/Zubairmohsin33) on Twitter.