Maintain src/ folder structure when building to dist/ folder with Typescript 3

Question

I have a typescript nodejs server with this structure:

tsconfig.json
package.json
src/
    middleware/
    utils/
    index.ts
dist/
    middleware/
    utils/
    index.js

When using Typescript 2, I was able to transpile my project from the src/ to a dist/ folder and have a mirror image of my directory structure to work with.

With the release of Typescript 3 they have introduced project references and changed the way code is transpiled into an output directory. Now tsc outputs to the dist/ folder in a nested way like this:

dist/
    src/
        middleware/
        utils/
        index.js

My tsconfig.json is:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "declaration": false,
    "outDir": "dist/",
    "lib": [
      "es7",
      "dom"
    ]
  },
  "include": [
    "src/"
  ]
}

How can I configure Typescript to output my src/ folder as a mirror image into a dist/ folder?

Answer 1

The structure of the output directory is controlled by the rootDir of the compilerOptions. See documentation here, setting it to ./src should solve the issue.

{
  "compilerOptions": {
    "rootDir": "src",
    ...
  },
  "include": [
    "src/"
  ]
}

Answer 2

The upgrade from TypeScript 2 to 3 by itself shouldn't have changed the behavior; if we can confirm that it did, that may be a bug. In any case, check that the rootDir compiler option points to your src directory and not to the parent directory, because the structure under the rootDir is what is mirrored under the outDir.

Answer 3

In addition to specifying compilerOptions.outDir, specify compilerOptions.rootDir in tsconfig.json.

{
  "compilerOptions": {
     // ...
    "outDir": "dist",
    "rootDir": "./",
    // ...
  }
}

Then run: $ tsc -b inside the folder where the tsconfig.json file is.

Answer 4

The problem appears after adding the resolveJsonModule: true to tsconfig.json

Answer 5

If you're trying to compile a typescript file at /scr/mydir/hello.ts to /dist/mydir/hello.js but the file keeps getting created at /dist/hello.js, what you can do is to add another typescript file at /src/another.ts. That way the two compiled files will go to /src/another.js and /src/mydir/hello.js. Rememver, in your tsconfig.json, outDir must be set to ./dist

Answer 6

I've used a symlink to accomplish this. It neatly allows you to reference root-level files without referencing them directly. For example:

1. From /src, create a link to package.json:

ln -s ../package.json ./details.json

2. Refer to details.json in your TypeScript file:

import { version } from './details.json';

exports.handler = async function ( event: Event ) {
  console.log( `lambda version v${version}` );

3. Bask in the grandeur of dist's flattened file structure:

$ tsc

$ tree dist 
dist
??? index.d.ts
??? index.js
??? details.json

0 directories, 3 files

Answer 7

In case you have multiple entries under the include option, make sure they are resolved.

"include": ["src", "tests"],

For example, if tests is not found, the src directory will not be present in the outDir.

Answer 8

you can change file import from src/entities/Post -> ../entities/Post in file in ./src

this changes the import in the dist folder.

Answer 9

import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

export default function UserAccount() {
    let navigate = useNavigate();
    useEffect(() => {
        let authToken = sessionStorage.getItem('access')
     
        // if user is not authed, redirect user to login page
        if (!authToken) {
            navigate('/login')
        }

     }, [])
    return (
        <div>
            Home Page
        </div>
    )
}

Answer uses functional component and react router v6+. If you provide which version of react-router you're using I can update my answer

You forgot to add condition for checking weather user is authed or no. For this, you need to check inside UserAccount Page. I provided snippet. Condition should be write inside useEffect in functional component. Inside class based component inside componentDidMount. More about authentication can be found here

Besides that, you should also add condition inside Login page and Register page. To protect user from reregistering and re-logining again.