Shopify CLI 3.0 conventions (web/frontend/backend process/single/two-process apps)

Shopify Apps
1

Hi!
Faced with migrating app to 3.0 and I’m confused by the new terminology, some kind of mess of terms.
what is two-process apps ? where are these processes ? what processes do you mean ?

If i have embedded admin app with online theme blocks - how do I know which category it falls under ?
different between web process and frontend process ?
do i need to set the SERVER_PORT/BACKEND_PORT/PORT in shopify.web.toml and why?

Why didn’t this need to be done in the previous version?
what are these two ports, if the only one on the production was always needed?

how is it generally a port for the frontend and port for backend ?

npm run dev> Unable to obtain an available random port number!

Has anyone already figured this out?

4 Likes
2

Hi,

I just installed a 3.x CLI app and had many of the same questions you had. I can’t claim to know this is correct but the way I viewed the two process is when you have two different servers serving code. If you had say one server serving the angular front end and another server handing the back-end logic (database, oauth etc).

There is a migration guide - did you see that? https://shopify.dev/apps/tools/cli/migrate

I am guessing you did but wanted to make sure…=

Not sure if that helps but figured I would try :slightly_smiling_face:

1 Like
3

Of course I studied migration guide, and two processes are mentioned there: front-end and back-end !
what it is? :grinning_face:
what is front-end process and where does it living ?

4

Hey Orloff,
Did you find a solution to “Unable to obtain an available random port number!”?
Thank you

5

did you figure this out? it seems like the .toml files are in weird places like the type=“backend” .toml file is in the /resources/js file and the type=“frontend” .toml file is in the root directory. It may be correct it just seems weird to me. When I run the npm run dev command I get an ERROR: INVALID HOOK CALL but I can remove all of the hook calls and all of the react components and the error is still there. So I assume the error is coming from somewhere else. Just thought I would see if you fixed your problems?

1 Like
6

Hi! No, i don’t find it, I was forced to create new project with CLI 3.0 (init command) and move and remake files from oldschool project

1 Like
7

i couldn’t upgrade old “koa/next” project to latest cli 3.0 due “Unable to obtain an available random port number!” error and had to create new cli 3.0 project. Then file by file migrate to new technology (express/react-query) - in fact, everything has to be redone

I would like Shopify to finally develop a single final framework and develop it only and not rush through different technologies

4 Likes
8

yeah it is annoying. I started down that path of moving an old project over to a new cli 3.0 project. But I just kept cli 2.x and cli 3.x that way I can use both of them when I need to.

1 Like
9

Apparently Shopify don’t bother about backward compatibility, but only urge switch to new technology

3 Likes
10

I am reading this topic and wish I find a solution, but unfortunately, it looks like this is the temporary/quick solution (create a new project based on 3.0 and move your code there).

11

yes, that’s exactly what I did, thank you for reply

12

Looks like I’ll be doing the same. Can’t get my theme app extension recognised by adding in toml files :joy:

13

Where is the ERROR: INVALID HOOK CALL coming from? I dont have react in app extensions

14

What ERROR: INVALID HOOK CALL you mean ?

15

Hello. I Click Reply on the Jameshagood post with this error. I have it too Sad this forum do not show to which post reply posted.

16

You can set the port via cross-env such as

cross-env BACKEND_PORT=5000 FRONTEND_PORT=8080 yarn shopify app dev

The only problem is, The Shopify CLI will not able to forward the request from Ngrok to your local port correctly. Hope this could be fixed in the future.

1 Like