A sample app (with TypeScript) to help developers bootstrap their Shopify app development.

Overview

⚠️ Please, refer to kanzitelli/shopify-app-template-typescript for the most up-to-date version.

This repo was used for testing purposes.

Shopify App Node with TypeScript

This is a sample app (with TypeScript) to help developers bootstrap their Shopify app development.

It leverages the Shopify API Library on the backend to create an embedded app, and Polaris and App Bridge React on the frontend.

The original template (with JavaScript) is Shopify/shopify-app-template-node that is used when you create a new Node app with the Shopify CLI.

Requirements

Quickstart

  1. Clone the repo
npx degit kanzitelli/shopify-app-template-typescript shopify-app
  1. Create Shopify app
shopify app create node

Then copy .env file to the typescript project and remove the one you just created.

  • Or you can do it in the Shopify Partner Dashboard and then filling .env file with app's credentials (see .env.example).

Note: HOST value will be auto-filled when you run the app.

  1. Run the app
shopify app serve
  1. Install and start using the app by opening provided URL (from step 3) in your browser: https://some-ngrok-subdomain-xxxx.ngrok.io/login?shop=your-shop-name.myshopify.com

Why?

I started developing a Shopify app some time ago that uses NextJS and Koa, which are deprecated in favour of pure React App and Express. The codebase was primarily written using TS, and it was painful to see that Shopify doesn't provide a new template with TS setup. There is even the issue since January 2022 where people ask for TS support but no luck so far. So that's how this repo was born. I tried to keep it as close as possible to the original repo but with TypeScript support. All changes could be found in this PR.

Deployment

We will probably need to deploy it somewhere in the cloud when we are done with the app.

So Dockerfile and Docker Compose with https:// setup will be coming soon...

Enhancements

In the future, I am planning to create an advanced shopify-app-starter that will be powered by React Router, Mobx, more opinionated structure, release-it, and other useful things.

License

This repository is available as open source under the terms of the MIT License.

You might also like...

🚀🚀 A Shopify embedded app starter template, with updated dependencies, session storage, app context and examples for basic functionalities.

Shopify Node App Starter This is a starter template for embedded shopify apps based on the shopify cli node app. Contributions to create the perfect s

Jan 8, 2023

This Next.js app is designed to be used with the Figment Learn Pathways, to help developers learn about various blockchain protocols such as Solana, NEAR, Secret, Polygon and Polkadot!

This Next.js app is designed to be used with the Figment Learn Pathways, to help developers learn about various blockchain protocols such as Solana, NEAR, Secret, Polygon and Polkadot!

👋🏼 What is learn-web3-dapp? We made this decentralized application (dApp) to help developers learn about Web 3 protocols. It's a Next.js app that us

Oct 1, 2022

This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Jun 17, 2022

Portal - Free Bootstrap 5 Admin Dashboard Template For Developers

Portal - Free Bootstrap 5 Admin Dashboard Template For Developers

Theme Details & Demo Demo: https://themes.3rdwavemedia.com/bootstrap-templates/admin-dashboard/portal-free-bootstrap-admin-dashboard-template-for-deve

Dec 22, 2022

A To-Do-List app designed to help users organise their daily activities

A To-Do-List app designed to help users organise their daily activities. it simply creates a list of things you want to do and allows you to mark them as complete. It was built with HTML, CSS and JavaScript.

Jun 9, 2022

A progressive web app to help volunteers track their volunteering activities, register vet concerns and log incident reports.

POOPS - Pets of Older Persons 2022 Introduction This is a Next.js project bootstrapped with create-next-app. Getting Started First, install yarn: npm

Jan 3, 2023

A to-do list app is a productivity tool designed to help users to create and maintain lists of tasks that they need to complete and it allows user to edit their tasks even after the task is saved. Built with CSS, HTML, and JAVASCRIPT.

Tumaini Maganiko 📗 Table of Contents 📗 Table of Contents 📖 To Do List PROJECT 🛠 Built With Tech Stack Key Features 🚀 Live Demo 💻 Getting Started

May 9, 2023
Owner
Batyr
Problems solver. Open Source Staff. MS in CS. Maintainer @starters-dev
Batyr
Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and com

Web & Mobile | eCommerce | Full-Stack Developer 4 Nov 24, 2022
An unofficial, simplified version of the @Shopify/koa-shopify-auth middleware library.

simple-koa-shopify-auth https://www.npmjs.com/package/simple-koa-shopify-auth NOTE: This package is not maintained by or affiliated with Shopify. Desc

David 20 Nov 7, 2022
Shopify Landing (Open source landing page shopify application)

SHOPIFY Open source landing page shopify application Configuration and Setup Key Features Technologies used ?? Screenshots Author License Configuratio

Gilbert Hutapea 8 May 10, 2023
We are creating a Library that would ensure developers do not reinvent the wheel anymore as far as Authentication is concerned. Developers can easily register and download authentication codes that suits their need at any point.

#AuthWiki Resource Product Documentation Figma Database Schema First Presentation Live Link API Documentation Individual Contributions User Activity U

Zuri Training 17 Dec 2, 2022
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database using SQL queries

Microsoft Excel Add-in for Developers About Us Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database u

OSLabs Beta 30 Sep 30, 2022
See a banned user's profile, their friends, their favorite games, their followers etc.

Roblox-Banned-User-Viewer AKA BanView See a banned user's profile, their friends, their favorite games, their followers etc. Ever wondered how to view

SCR1PP3D 4 Nov 18, 2022
e-ONG, an authorial project, whose objective is to help ONGs to find people who need help or would like to help them

This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: npm start Runs the app in the developmen

Lucas Lima 2 Nov 11, 2022
This repository contains an Advanced Zoom Apps Sample. It should serve as a starting point for you to build and test your own Zoom App in development.

Advanced Zoom Apps Sample Advanced Sample covers most complex scenarios that you might be needed in apps. App has reference implementation for: Authen

Zoom 11 Dec 17, 2022