Localhost/ngrok to Heroku

Highlighted
Excursionist
25 1 7

Hey all!

I developed an app built on top of the react/polaris tutorial and moved it to heroku to see how it works exactly as this is the first time building and deploying an app.

Right now, all the app does is retrieve the list of themes on the store, and give the option to delete them. Simple, test/learning opportunity app. It'll be a private embedded app, so I figure hosting it on a free plan on heroku should be fine, but in doing this I have a few questions I'm hoping I can get answered...

1) How secure is heroku for hosting a shopify app? I know the API key and password is in an .env file, so that part is supposed to be fairly secure already, but I just want to make sure that it's generally a safe/good choice for private/small apps like this.

2) I already have the codebase in bitbucket, and I know there's direct syncing for github to heroku, but was wondering if there was an easier way to sync my repo to the heroku app and not have to commit and add through the heroku CLI every time I want to deploy. (I know this is more of a heroku question than a shopify question, but just hoping someone might have an easy/quick answer).

3) In order to get the app to run, I changed my scripts from:

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start"
  },

to:

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "node server.js"
  },

because Heroku runs 'npm start' and it wasn't working. I am very new to all of this, so I'm not sure what the main difference is between running just the server.js vs 'next start'. Am I doing something TERRIBLY wrong here? 

 

Thanks for any help you can offer!

0 Likes
Highlighted
Shopify Partner
41 0 8

This is something that confuses most of the people while starting out.

 

Some point to note

 

  1. We can only whitelist a public url in shopify app dashboard (can't add localhost)
  2. Frontend(React) and backend(Node) usually running on separate ports if you are not using SSR (server side rendering)
    • In order to solve this issue we can use SSR(nextjs) to serve react and node in one port

 

  1. If you are not interested to use SSR it's bit tricky and difficult for debugging.
    1. You have to build the react app and serve it through node (in development you have to run build for every change)
0 Likes
Highlighted
Excursionist
25 1 7

Another issue I've found is...

Because I'm storing the store origin and access token in a cookie, if I open the app in one store, and go to another store and open it there, I see the first store's information. I'm assuming cause it's using the cookie data and it's maybe not being overwritten.

Is this accurate, does anyone have any advice?

1 Like
Highlighted
Shopify Partner
41 0 8

Make use of session to handle multiple users access.

1 Like
Highlighted
Shopify Partner
11 0 4

I am running into this same issue. I am using Koa, and the cookies are set to whatever the last shop that used the app is until the browser is closed. I am not sure how to handle multiple stores using the same browser or tab. Any advice would be greatly appreciated :) 

0 Likes
Highlighted
Excursionist
25 1 7

Sadly, I don't have any help I can offer :( I never got back around to getting back to this particular project... other work became more important... so I haven't been able to try to figure out what the above posts alluded to. 

I guess try storing the user access in something other than the cookie, server "storage" or something. Honestly, I'm spitballing and have no good answer :(

 

If I ever get around to getting back to it and getting a better answer, I'll circle back to you and see if you figure out, and hopefully you can do the same if you get it before I do ;)

 

Good luck! And sorry again that I can't be of more help...

1 Like
Highlighted
Tourist
11 1 0

Hi! could you tell me how you got ngrok running on heroku?

0 Likes