Import Aliases
By default all templates will have 2 import aliases pre-setup to use.
@src - root directory for all none test source code.
@store - sub directory in root that contains all global state atoms (recoil).
Adding new import aliases
To add a new import alias you'll need to modify the following files:
TsConfig
tsconfig.json
//...
"compilerOptions": {
// ...
"paths": {
"@src/*": ["./src/*"],
"@store/*": ["./src/store/*"]
//
// new alias goes here
//
}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// ...
}
//...Jest
jest.config.ts
//...
moduleNameMapper: {
"^@src(.*)$": "<rootDir>/src$1",
//
// new alias goes here
//
},
//...Vite Config
NOTE: Only needed if you choose a template with a vite bundler.
vite.config.js
//...
defineConfig({
//...
resolve: {
alias: {
"@src": path.resolve(__dirname, "src"),
"@store": path.resolve(__dirname, "src/store"),
//
// new alias goes here
//
},
},
//...
});
//...Webpack files
NOTE: Only needed if you choose a template with a webpack bundler.
You'll need to make this change to both the dev and prod webpack files.
webpack/webpack.dev.mjs
//...
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"],
alias: {
"@src": path.resolve(__dirname, "../src"),
"@store": path.resolve(__dirname, "../src/store"),
//
// new alias goes here
//
},
},
//...webpack/webpack.prod.mjs
//...
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"],
alias: {
"@src": path.resolve(__dirname, "../src"),
"@store": path.resolve(__dirname, "../src/store"),
//
// new alias goes here
//
},
},
//...