How to share TypeScript/JavaScript between Frontend and Backend?

Question

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?

Answer 1

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'

Answer 2

To extend the already given answer for outFile case I will show my way of dealing with class sharing in case when you cant or do not want to use webpack/browserify/outFile options.

The structure looks similar

-client
    index.html
    app.ts
-server
    service.ts
-common
    helper.ts
-dist
    -client
        -index.html
        -lib
            -client
                app.js
            -common
                helper.js
    -server
        service.js
    -common
        helper.js

The idea is how you build the dist folder with the results of your build. I do this with gulp tasks and by having the structure above it allows me to reuse components both server and client side from the common library.

Note. To work at client side do not forget to setup base url for systemjs in index.html:

    System.config({
        baseURL: './lib'
    });

    System.defaultJSExtensions = true;

Hope this helps.