Deploy custom app

Shopify Apps
1

Hi Shopify Community,

I’m currently working on deploying a custom Shopify app (webshop) and could use some help and guidance from those more experienced. Here’s a brief overview of my setup and the challenges I’m facing:

Project Overview- Backend: Node.js

  • Frontend: React
  • Storefront: Custom storefront integrated with Shopify Storefront API

What I’ve Done So Far1. Set up the Node.js backend:

  • Installed necessary dependencies.
  • Configured environment variables.
  • Set up a server.
  1. Developed the React frontend:
    • Created the React app.
    • Connected the frontend to the backend using Axios for API calls.
    • Developed components to display Shopify products.

Challenges I’m Facing1. Authentication: Managing authentication and secure communication between the frontend, backend, and Shopify.

  1. Deployment Best Practices: Tips on best practices for deploying and maintaining the app in a production environment.
  2. App Installation: Best practices for setting up the app URL and ensuring smooth installation on Shopify stores.

Questions1. Authentication: How should I handle authentication securely between my Node.js backend and the Shopify API?

  1. Deployment: Any advice on ensuring reliable and scalable deployment for both the backend (Node.js) and frontend (React)?
  2. Shopify App Installation: Are there any specific steps or configurations I should be aware of when installing the app on a Shopify store?

I appreciate any help, advice, or resources you can share. Thanks in advance for your support!

Best regards,
Wassim Fouad

2 Likes
2

Hi, have you found a solution?

3

Yes I did! You should have two github repositories. I hosted the backend on heroku you pay a small fee of 4-5$ a month, depends on your backend usage. For the frontend i’ve used a free hosting platform netlify. You need to change the dns records on your shopify to use the netlify ones. I did that with help of ChatGPT. If you have some more questions you can ask them.

1 Like
4

Thanks @WassimF .
My main issue is with authentication, when you first install the app.
In the beginning you need to redirect the user to an url like this

https://${shop}/admin/oauth/authorize?client_id=${envs.SHOPIFY_CLIENT_ID}&scope=${scopes}&redirect_uri=… so they can perform the installation right?
And then, that OAuth screen redirects to the uri you specified in the url. Do you have those endpoints (auth and auth-redirect) on your backend?
If so, how do you then go to the react application hosted in netlify?

5

What are you to do exactly?

6

I just want to build an embedded shopify app that shows some data from my backend. I want all the data to be hosted in my backend (reuse the backend I already have), no extra backends or databases for the shopify app.

Components- Backend: NodeJS API deployed on ElasticBeanstalk (It’s a server I already have in prod and provides most of the data I need, so I just want to add a couple of endpoints for the shopify app).

  • Frontend: React app hosted in S3 + CloudFront

Flow1. User installs the app (authentication screen and presses “install button”)

  1. Shopify app loads react app (hosted in S3)
  2. React app interacts with backend to obtain data.

I’m having trouble with the transition 1 and 2. How do I create an endpoint to take the user to the installation screen? Would that be in the React App or in the Backend?

7

I’m not a pro in all of this but i can try and help. I think it would be in the backend

8

A developer created an app for me to deploy customization on one product I have. If I want it on my own server, he suggested I purchase my own server. I look at Heroku. I am not understanding their products at all. What product did you buy from them for just $4-5 per month? is there anyway to do backend and frontend on Heroku?