CODEWITHSUNDEEP
javascriptnode.jsangulartypescript
Picci
Picci

Reputation: 17762

How to organize Javascript project to allow sharing of code between client SPA and Node server

I am developing an application which comprises a SPA front end and a Rest back-end.

To implement the Rest back-end I am using Node and Express.

Considering that both front-end and back-end are written in JavaScript (and TypeScript), I would like to share some code between these 2 parts (namely Interfaces and simple utils).

So basically my project is composed of three parts: Client, Server, Shared. Therefore I am inclined to have a project directory structure similar to this:

ProjecFolder
   ClientFolder
     .....
   ServerFolder
     .....
   SharedFolder
     .....

I am looking for suggestions on how best organize my project. I have done some research and I have found this interesting article which suggests to use a mechanism based on Gulp tasks that copy all files from SharedFolder into both ClientFolder and ServerFolder and then runs transpling.

I am wondering whether there can be an alternative approach or tools that perform what otherwise has to be configures as Gulp workflow.

Upvotes: 1

Views: 261

Answers (1)

Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24590

My recommendation is to use a package manager tool. When you have dependencies, and the requirements of the server changed, you have to change the module. You don't want the SPA (frontend), to break, when you need to make changes to the server.

This is why package managers give you versions. Each module that depends on your shared code, can use a different version of it. You can use NPM for that. Build a module, publish it, and install it on your frontend and backend.

Many times, in production you split the frontend and backend. The frontend may exist in a file storage system (S3, Google Cloud Storage and similar), and the backend executed on your servers. Then it will be harder to use the same files on both systems.

Upvotes: 1

Related Questions