[CLI 3.0] Separate backend from frontend

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.

Start by reviewing the current /web structure, including frontend/package.json, the main package.json, and backend entry point index.js. Compare it with the proposed frontend/backend layout and investigate how the backend currently reads frontend/index.html through the htmlFile path; done means the separation works without an inelegant cross-directory import and preserves the stated linting boundaries.