Open In App

Why does Vite create multiple TypeScript config files: tsconfig.json, tsconfig.app.json and tsconfig.node.json?

Last Updated : 23 Aug, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

In Vite TypeScript projects you may have noticed three typescript configuration files, tsconfig.json, tsconfig.app.json, and tsconfig.node.json. Each file is used for a different purpose and understanding their use cases can help you manage TypeScript configurations for your project.

In this article, you will learn about the three TypeScript config files: tsconfig.json, tsconfig.app.json, and tsconfig.node.json.

Prerequisites:

Understanding the Three TypeScript Config Files

To control how your code is processed by the TypeScript compiler (tsc) you need to use TypeScript configuration files. These files define the TypeScript compilers' behavior and are also used to include or exclude files from compilation. There can be multiple config files that target different environments of development. In Vite projects, you can three TypeScript configuration files for a new TypeScript project.

1. tsconfig.json: The Base Configuration

This is the main TypeScript configuration file used for setting up the base settings for the entire project. It controls the compilation of your TypeScript code into JavaScript and you can specifying various options such as module resolution, target JavaScript version, and include/exclude patterns. Common settings in this file are:

  • compilerOptions: Used for compiler settings such as module resolution, target JavaScript version, and strictness options.
  • include and exclude: Used to specify the files and directories that should be included or excluded from TypeScript.
  • baseUrl and paths: Used to specify import paths.

2. tsconfig.app.json: Application-Specific Configurations

This file is specifically used for the application code which is used by Vite to handle settings that are unique to the application's source code as some settings are not relevant to server-side code or libraries.

The main config tsconfig.json provides the base configuration for both application code and node.js environment but tsconfig.app.json extends or overrides settings to benefit only the application code. For example, in the tsconfig.app.json the paths or settings that is specified will override the tsconfig.file.

3. tsconfig.node.json: Node-Specific Configurations

This file is used only for TypeScript used for Node.js environments such as server-side code, build scripts, or any part of the project that runs in a Node.js context. Vite also uses it for its development and build processes.

Vite uses tsconfig.node.json to set TypeScript's compiler options for Node.js execution. These are settings that differ from client-side code such as target versions for Node.js.

How Vite Utilizes Multiple Config Files?

Configuration Inheritance and Overrides

Vite handles TypeScript configurations by merging and overriding settings from multiple tsconfig files. This allows specific configurations to be applied where needed without affecting the global settings. For example, tsconfig.app.json inherits settings from tsconfig.json but overrides or extends them for application-specific requirements.

Benefits of Splitting Configurations Across Multiple Files

Splitting TypeScript configurations across multiple files have many benefits such as:

  • Clarity: Each file has a specific purpose, making it easier to manage and understand.
  • Flexibility: Allows to set different settings for various parts of the project (e.g., client-side vs. server-side).
  • Isolation: Reduces the risk of confusion and affecting unrelated parts of the project.

Examples of Common Use Cases for Each Config File

The following is the explanation of each config file content generated by Vite:

1. tsconfig.json

This is the base configuration file. It generally includes references to other TypeScript configuration files, as well as global settings that apply to the entire project.

//tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
}
}

In the above example,

  • 'files' are used add files for compilation, an empty array means this file does not include specific files for compilation but references other configurations.
  • 'references' are used to reference other tsconfig.json files, making it easier to manage projects with multiple TypeScript configurations and
  • 'compilerOptions' are used to control many aspects of TypeScript compiler such as target version, enable strict type checking etc

2. tsconfig.app.json

This configuration file is used for application-specific settings. It's common in projects that use different configurations for the server and client parts.

//tsconfig.app.json
{
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": [
"src"
]
}

In the above example,

  • 'compilerOptions' are used to control many aspects of TypeScript compiler.
  • 'Composite' is used to enables project references which needed by TypeScript to quickly determine where to find the outputs.
  • 'Target' is used to specify the JavaScript language version to compile.
  • 'lib' is used to specify the library files to include during compilation.
  • 'Module' is used to set the module code generation method. 'Strict' is used as a flag, if true it enables strict type checking options

3. tsconfig.node.json

This configuration is used specifically for Node.js related code or server-side logic. It has settings specific to Node.js environments.

{
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"noEmit": true
},
"include": [
"vite.config.ts"
]
}

In the above example,

  • 'compilerOptions' are used to control many aspects of TypeScript compiler.
  • 'Composite' is used to enables project references which needed by TypeScript to quickly determine where to find the outputs.
  • 'tsBuildInfoFile'is used to specifies the path for the build information which help to speed up building of larger TypeScript code.
  • 'skipLibCheck' is used as a flag, if true it skips type checking of default library declaration files
  • 'Module' is used to set the module code generation method. 'Strict' is used as a flag, if true it enables strict type checking options.
  • 'include' is used to specify the files or directories that are to be included for compilation.

Best Practices for Managing TypeScript Config Files in Vite

  • Carefully use Base Configurations: Use tsconfig.json for settings that apply for the application code and node.js environments.
  • Customize Application TypeScript: Customize tsconfig.app.json for application needs without affecting the base configuration.
  • Isolate Node specific Settings: Use tsconfig.node.json for server-side or build script configurations to maintain clarity and separation of concerns.
  • Review regularly: Check and update TypeScript configurations time to time to reflect the project changes and TypeScript updates.

Conclusion

TypeScript configuration is important the development and build process in Vite projects. Understanding the roles of tsconfig.json, tsconfig.app.json, and tsconfig.node.json helps in managing complex projects more efficiently. By adopting the best practices for each configuration file you can have a smooth and organized development experience.


Previous Article
Next Article

Similar Reads

How Can I Use Vite Env Variables in vite.config.js?
Vite is a fast and modern front-end build tool that provides an efficient way to develop web applications. One of its powerful features is the ability to use environment variables, which can help you customize your app's behaviour based on different environments. This guide will walk you through how to use Vite environment variables (.env files) wi
4 min read
What is the Difference Between "vite" and "vite preview"?
Vite is a build tool designed for modern web projects, offering a fast and efficient development environment. It features rapid hot module replacement (HMR), so you can instantly see updates as you change your code. This makes Vite ideal for developers who need a quick and responsive development setup. Vite Preview is a command that enables you to
3 min read
How To Set Custom Vite Config Settings In Angular 17?
Vite is a powerful tool that enhances the development experience for web applications, especially large and complex applications. Angular doesn’t use Vite by default; it uses the Angular CLI and Webpack for build tooling. However, you can configure Angular to use Vite instead of Webpack with a bit of setup. Here’s a guide to integrating Vite into a
2 min read
What is the purpose of using tsconfig.json file ?
tsconfig.json file is a file of JSON format which allows us to point the root level files and different compiler options to setup that require to compile a TypeScript based projects. The existence of this file in a project specifies that the given directory is the TypeScript project folder root. The tsconfig.json file mainly consists of the informa
2 min read
How to Migrate from create-react-app to Vite?
In this article, we will learn how we can migrate from create-react-app to Vite. Vite is a build tool for frontend development that aims for fast and efficient development. It provides a development server with hot module replacement and supports various JavaScript flavors, including JSX, out of the box. In this guide, we'll explore the steps to tr
3 min read
How To Create Absolute Imports In Vite React App?
When working on a React app using Vite, we often come across situations where we have a complex folder structure which also makes our component import URLs complex. To resolve this issue we can use Absolute imports in Vite React App. absolute imports help us to import files directly from the root folder of the project which makes the code look clea
3 min read
Plugin "react" was conflicted between "package.json » eslint-config-react-app
The error Plugin "react" was conflicted between package.json and eslint-config-react-app generally arises when there is a conflict in naming convention or package.json data. However, this is not the only reason for this conflict. Some of the other reasons can be due to a different version or conflict in project dependencies. Error image from Termin
2 min read
How to Use TypeScript with Vite?
Vite is a modern build tool known for its speed and efficiency. Using TypeScript with Vite combines Vite's fast development experience with TypeScript's strong static typing, enabling early error detection and more maintainable code. This integration enhances productivity and code quality in modern web development. PrerequisitesNodejsTypeScriptAppr
3 min read
How To Secure a Vite-Powered React App?
Securing a Vite-powered React app involves several best practices and strategies to protect your application from threats and vulnerabilities. Vite, a fast and modern frontend build tool, combined with React, provides a robust environment for building web applications, but it's important to ensure that security is not overlooked. Here’s a comprehen
4 min read
Why Express ‘app’ and ‘server’ files kept separately ?
Express is a simple and minimalistic framework for web applications in Node.js. Express provides a rich collection of features for development of both web and mobile applications. In any web or mobile application, each module or layer should be only responsible for a single task and should not deal with other tasks. This allows the application to b
4 min read
How to compile multiple Typescript files into a single file ?
In this article, we will learn how to compile multiple Typescript files into a single file. There are two approaches that can be followed here: Approach 1: Compiling multiple Typescript files into a single JavaScript file. We simply use the following syntax: Syntax: tsc --out outputFile.js typeScriptFile1.ts typeScriptFile2.ts ... typeScriptFilen.t
3 min read
Node.js process.config Property
The process.config property is an inbuilt application programming interface of the process module which is used to get the JavaScript representation of the configure options that are used to compile the current node.js code.Syntax: process.config Return Value: This property returns an object containing the configuration in JavaScript representation
2 min read
How to Intialize basic template for Electron JS project using Vite and React
ElectronJS, with its ability to create cross-platform desktop applications, has become very popular nowadays. When combined with modern tools like Vite and React, it provides a powerful stack for building feature-rich and performant desktop applications. In this article, we'll learn the stepwise process to initialize a basic template for an Electro
3 min read
How to use React or Vue with Vite and Docker?
This guide will provide details on how to create a Docker container with a new React project integrated with Vite. When combined, with Vite’s short build times and Docker’s ability to create a consistent and reproducible environment, you can quickly achieve developmental parity with the production environment. This also makes it easy to deploy your
3 min read
How to Initialize Firebase in Vite and VueJS?
Firebase with Vite and Vue Firebase, combined with Vite and Vue, opens up a powerful combination of real-time capability, fast development, and seamless backend integration. Firebase offers a real-time database, authentication, and cloud storage services that vastly reduce having to manage any backend infrastructure. Vite brings next-generation dev
4 min read
How to Set Up Vite with ESLint and Prettier?
Integrating ESLint and Prettier is important to maintaining consistent code quality and style across a Vite project. Prettier ensures uniform code formatting, while ESLint assists in locating and resolving possible coding errors. Along with various methods and folder structures, this article will walk you through setting up ESLint and Prettier in a
1 min read
Ultimate Guide to Server-Side Rendering (SSR) with Vite and ReactJS
Server-side rendering (this practice allows making web pages since the browser only enables blank pages) can be defined as one of the current trends in web development. SSR offers many advantages – performance improvement, SEO enhancement, and even convenience for users. As opposed to client-side rendering only after the complete page is loaded, wh
10 min read
Difference between package.json and package-lock.json files
In Node, package.json file contains the list of dependencies and scripts in a project while the package.lock.json specifies their respective versions to ensure consistent installations in different environments. In this article, we will learn the major differences between package.json and package.lock.json and their needs in Node. Table of Content
4 min read
Create a New React App - npm create-react-app
The create react app command allows us to create a development environment and install all necessary libraries for creating single-page applications using React. The CRA tool is used to set up a new React project quickly, providing a standard structure and configuration. It includes a development server, build scripts, and support for modern JavaSc
3 min read
How to setup Tailwind CSS with Vite ?
Tailwind CSS is a popular CSS framework that simplifies the process of designing user interfaces with its utility-first approach. Vite is a build tool that provides a fast development experience for modern web projects. Together, they make front-end development efficient and enjoyable. In this article, we will walk through the steps to set up Tailw
4 min read
How to setup ReactJs with Vite ?
In this article, we will see how to install ReactJs with Vite. The Vite is a build tool that provides a faster development experience for modern web projects. Prerequisites:NodejsReactApproach to setup React with Vite:We have discussed below how to setup the Reactjs with Vite, we ensure that Nodejs is installed in our system or not if not then we w
2 min read
How to Set Up a Vite Project?
Vite is a modern front-end build tool that offers a fast development experience by using native ES modules in the browser. It provides a lean and efficient setup for building JavaScript applications with a focus on performance and simplicity. PrerequisitesNodejsReactJavaScript Approach We have discussed below how to set up a Vite project: First, in
3 min read
How to Integrate Vite with Vue.js?
Vite provides the flexibility and speed needed for modern web development by offering a fast-build tool and development server. Integrating Vite with Vue.js allows developers to use Vite’s efficient hot module replacement and optimized build processes while working with Vue's reactive framework. This integration improves the development experience
3 min read
How to Handle Static Assets in Vite?
In Vite, static assets are files such as images, fonts, and other resources that are served directly to the browser. They should be placed in the public directory, which makes them accessible via the root URL. Vite efficiently handles these assets during development and builds them into the final output. PrerequisitesNodejsReactApproachWe have disc
3 min read
How to Configure Proxy in Vite?
Vite is a popular build tool for modern web libraries and frameworks like React and Vue. It provides features such as dependency resolving, pre-bundling, hot module replacement, typescript support. Using vite you can configure a proxy to handle requests to different backends or APIs during development. It helps bypass CORS issues and manage API req
3 min read
How to Use Environment Variables in Vite?
In order to create your Vite application in different environments such as development, staging and production, you need to use environment variables. They enable you to manage confidential data like API keys or service URLs without having to code them inside your source code. By using environment variables, it is easy to change configurations depe
3 min read
How to Optimize Vite Performance?
Vite is a modern build tool invented by Evan You. It is designed for speed and provides the best UX. For today’s JavaScript projects, it has hot module replacement (HMR) and optimized builds. Still, if you want to achieve the maximum level of possible results, you can tweak several aspects of the work with Vite. These are the following approaches t
5 min read
How to Set Up Vite for Server-Side Rendering (SSR)?
Vite is a build tool that can be integrated with most modern JS web frameworks like React, Vue, Next.js, or even vanillaJS, and offers a variety of features like Hot Module Reloading (HMR), etc. In this article, we will learn how to setup vite using vanillaJS and SSR. Steps to Set Up Vite for Server-Side Rendering (SSR)Step 1: Create a vanillaJS vi
2 min read
How to Load environment variables from .env file using Vite?
The environment variables in the application are managed through .env files in a Vite project, allowing you to configure and access various settings dynamically. By prefixing variables with VITE_, Vite exposes them to your application’s runtime environment. This approach facilitates different configurations for development, production, or testing e
2 min read
How to Setup Path Aliases in Vite React?
Path aliases are a powerful feature in modern JavaScript development that simplifies module imports by allowing you to use shorthand paths instead of relative paths. In Vite React projects, setting up path aliases can enhance code readability and maintainability by providing clear and concise import statements. Prerequisites:NodejsReactApproach to
3 min read
three90RightbarBannerImg