This is an app example I created to document the way that I used to implement the PostgreSQL database for my apps, following the list of Repos available on this link. After a lot of time reading code and trying to get my head up to this, I figured it out and I'll be sharing with you how to do it. Also, here you can see the same implementation using the other examples available there, and of course a step-by-step guide (just Spanish so far).
Just like a tip, please don't use a VPN when you are working over this. You'll avoid some weird behaviors with Node and DB Connection.
- Vite: Which is a build tool that aims to provide a faster and leaner development experience for modern web projects. Note: I really loved working with this framework, or so. It's so clean and the speed is more than acceptable.
- React: Popular library that allows me create wonderful frontend on my projects.
- NODE: Popular backend server used to run Javascript projects.
- React Router is used for routing. We wrap this with file-based routing.
- React Query queries the Admin API.
- Express builds the backend.
- Shopify API library adds OAuth to the Express backend. This lets users install the app and grant scope permissions.
- App Bridge React adds authentication to API requests in the frontend and renders components outside of the App’s iFrame.
- Polaris React is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.
- Custom hooks make authenticated requests to the Admin API.
- File-based routing makes creating new pages easier.
- ElephantSQL: Amazing tool that provides access to a FREE PostgreSQL instance to develop, experiment and build stuff without limitations. I loved when Heroku allowed this BTW, but let's get over of this.
- PostgreSQL: The World's Most Advanced Open Source Relational Database.
- You must download and install Node.js if you don't already have it.
- You must create a Shopify partner account if you don’t have one.
- You must create a development store if you don’t have one.
- You must signup and create a DB cluster on ElephantSQL, if you don't have an account already.
- Look for the .env file (or create one) inside the /web folder and set the following Env Variables:
PG_HOST,PG_DB,PG_USERandPG_PASSWORD.
To install and play with the app, just clone this repo and run npm run dev. Follow the process to connect with your partner account and login. Once you connect sucessfully, go to the App Setup and replace the ngrok link provided so you can see the app working on the panel.
- Database Connection's Examples: Provided by Shopify to teach you how to implement this, but without any clarity about specific cases.
- Introduction to Shopify apps
- App authentication
- Shopify CLI
- Shopify API Library documentation
- Author: Jean Manzo