[CLI 3.0] Separate backend from frontend

Question

[CLI 3.0] Separate backend from frontend

wisniewski94 opened this issue 2 years ago · 4 comments

Issue summary

It should be a good idea to separate backend from frontend. Right now the structure is:

/web
- /frontend
- - package.json (frontend)
- index.js (which is the main file of backend)
- package.json (main)

The issues with that are:

developers tend to install frontend stuff in the main package.json (including myself, doing it by mistake as others do)
import backend utils into frontend and vice versa (in one direction eslint doesn't find it to be an issue)
that will also encourage making different eslint configs for each dir (FE and BE)

I managed to split it into:

/web
- /frontend
- - package.json
- - shopify.web.toml
- /backend
- - package.json
- - shopify.web.toml
- /extensions (haven't tried but should work too)

But the issue is that I have to import htmlFile from frontend, and I consider it to not be the most elegant solution:

    ...
    const htmlFile = join(
      isProd ? PROD_INDEX_PATH : DEV_INDEX_PATH,
      "../../frontend/index.html",
    );

    return res
      .status(200)
      .set("Content-Type", "text/html")
      .send(readFileSync(htmlFile));
  });
...

I haven't yet figured out how to do it better. It's just a quick test, but I think there are many pros to doing it this way.

Answer 1 · 2022-12-03T02:52:49.000Z

hi @wisniewski94 , I am also in favour of this separation. My folder structure is the same as yours and did the same thing as the code you shared. However, I have faced an issue and am not sure if you did as well. After my backend have sent the htmlFile to the frontend via .send(readFileSync(htmlFile)); My ngrok client which was serving my backend express app shows the get requests as follows.

my index.html file has the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="src/main.tsx"></script>
  </body>
</html>

and the two GET requests that has a 404 http status code are due to the link tag and script tag retrieving the individual files. It is trying to retrieve those files relative to the index.js file which is residing in the backend folder. Did you manage to serve the frontend without this issue?
Any help is greatly appreciated :)

Answer 2 · 2022-12-05T16:00:03.000Z

@jw-soh Hi, I did not find any issue with my current implementation. Everything loads just fine but I do not load anything from the backend as it violates the whole encapsulation idea, which is: frontend and backend are separate packages that should not import from each other. There's the small exception mentioned in the main post which is index.html :).

Answer 3 · 2022-12-20T01:24:12.000Z

I've implemented this in my template OSB, see here http://michaelgibbons.info/OSB/#/

Answer 4 · 2023-01-04T14:56:27.000Z

Hi :),

I tried, for curiosity, to learn more about how apps are working in 2023. I was also extremely confused by the distinction made between frontend/backend.

I looked at the documentation here: https://shopify.dev/apps/tools/cli/migrate#single-process-or-frontend-process and, in the example written there:

The PHP app (which is normally the backend part) is actually considered as the "frontend", while the Polaris app (usually frontend) is actually... the backend part, from Shopify CLI perspective.

This general architecture makes me think that Shopify may have mixed different concepts here (maybe the "frontend" should be called "api"/"entry" and backend "webapp" or something like that. Unless I misunderstood something, not only the architecture is confusing, but also the naming. Or am I missing something obvious here?