How to share TypeScript/JavaScript between Frontend and Backend?

Issue

I have a folder structure for a Node.js /w Angular.js project with some files like so (from project root):

frontend
  frontend-file1.ts
  frontend-file2.ts

backend
  backend-file1.ts
  backend-file2.ts

I use a TypeScript compiler along with many other gulp plugins to compile this into a build folder like so (notice how frontend files get placed into public):

build
  backend-file1.js
  backend-file2.js

  public
    frontend-file1.js
    frontend-file2.js

In the source folders, I use ES6/TypeScript import statements to import files.

Example: backend-file1.ts

import './backend-file2';

Situation

I've written some custom utility functions that should be used by both backend and frontend. I don't want to repeat the same functions in both folders, since this is prone to errors and is double work.

I've considered creating a shared folder at the project root amongs the frontend and backend folders, but I can't import files in the browser that go up further than the index.html file, which is in the frontend folder.

Question

How would I be able to write a TypeScript file once and be able to import this file in both frontend and backend folders?

Solution

I would just structure the code like this:

- src/
   - server/
   - client/
   - shared/

You can place all your shared libraries into shared directory then import/require them from your server or client source files:

import '../shared/library'

Answered By - lxe