I created a client and server folder, the server will serve the static and bundled (webpack) files from the client (using ReactJS) and also will have an API, I was wondering, is it wrong or not recommended to have only one package.json for both client and server or it's better to have separeted, like this:
1:
2:
The only way I know how to deploy a NodeJs app is like this where Express will serve the static file and also have the API routes. I don't know if it's possible to have two separated severs, one for the API and another one for the client. Any ideas?
You'll be able make Option 1 work, but it's less ideal than Option 2 because both projects will have to specify their dependencies in the same package.json and will install them into the same node_modules folder. Given these two options, Option 2 would be my recommendation.
There is a third option that is a variation on Option 2 and my preferred approach: the monorepo approach. I described that approach in another post, linked here:
hashnode.com/post/folder-structure-for-typescript…
And yes, you can have two (or more) servers that sit behind the same hostname. This is usually achieved by using a reverse-proxy server, like
nginxorhaproxy. Reverse-proxy servers can be configured to proxy requests to a certain path, such as /api to one server and /files to another server. Obviously this is a more advanced setup than using a single Express server to serve both parts and is probably best achieved by using containerization, like with Docker.When you are developing, you can simulate this capability by using
webpack-dev-server's proxy feature. This way you can avoid having to deal with troublesome cross-origin issues that can be encountered when using to two different ports onlocalhost.