Repository: dcapal/dcapal (language: rust)

Issue:
[Enhancement]: Introduce aliases to avoid double dots in imports
# **🚀 Enhancement Request**

When you move a file between folders are there different points where codebase changes.
For instance from:
```
./../../../../foo.js
```
If you move foo to parent folder all file that depends from foo changes is relative path and in review phase is difficult to read.
```
./../../../foo.js
```

## **Is your enhancement request related to a problem? Please describe.**
/ 

---

## **Describe the solution you'd like**

* Webpack aliases, for instance define some checkpoint like: `@app`, `@core` ...

In this way the relative path will be:
```
@app/folder/folder2/foo.js
```
If you move to parent folder will be
```
@app/folder/foo.js
```
---

## **Describe alternatives you've considered**

/

---

### **Additional context**
/



Discussion / hints:

Fix patch:
diff --git a/dcapal-frontend/jsconfig.json b/dcapal-frontend/jsconfig.json
index 933f554a..a5468bac 100644
--- a/dcapal-frontend/jsconfig.json
+++ b/dcapal-frontend/jsconfig.json
@@ -1,7 +1,14 @@
 {
   "compilerOptions": {
+    "baseUrl": "./",
     "paths": {
-      "@images/*": ["./images/*"]
+      "@images/*": ["images/*"],
+      "@app/*": ["src/app/*"],
+      "@components/*": ["src/components/*"],
+      "@utils/*": ["src/utils/*"],
+      "@workers/*": ["src/workers/*"],
+      "@demo/*": ["demo/*"],
+      "@routes/*": ["src/routes/*"]
     }
   },
   "exclude": ["node_modules"]
diff --git a/dcapal-frontend/src/app/index.js b/dcapal-frontend/src/app/index.js
index cb786c0e..35bcb7e1 100644
--- a/dcapal-frontend/src/app/index.js
+++ b/dcapal-frontend/src/app/index.js
@@ -2,10 +2,10 @@ import React, { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { Toaster } from "react-hot-toast";
 
-import { AllocationFlow } from "../components/allocationFlow";
-import { setCurrencies } from "./appSlice";
+import { AllocationFlow } from "@components/allocationFlow";
+import { setCurrencies } from "@app/appSlice";
 import { fetchAssetsDcaPal } from "./providers";
-import { ContainerPage } from "../routes/containerPage";
+import { ContainerPage } from "@routes/containerPage";
 
 const loadCurrencies = async (dispatch) => {
   const res = await fetchAssetsDcaPal("fiat");
diff --git a/dcapal-frontend/src/app/providers.js b/dcapal-frontend/src/app/providers.js
index abe1414c..f89555b6 100644
--- a/dcapal-frontend/src/app/providers.js
+++ b/dcapal-frontend/src/app/providers.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import { api } from "./api";
 import { DCAPAL_API, DCAPAL_API_CHART } from "./config";
-import { ACLASS } from "../components/allocationFlow/portfolioSlice";
+import { ACLASS } from "@components/allocationFlow/portfolioSlice";
 
 export const Provider = Object.freeze({
   DCA_PAL: "DCAPal",
diff --git a/dcapal-frontend/src/app/store.js b/dcapal-frontend/src/app/store.js
index 6f4444cb..f7bfa94b 100644
--- a/dcapal-frontend/src/app/store.js
+++ b/dcapal-frontend/src/app/store.js
@@ -3,8 +3,8 @@ import i18n from "i18next";
 import portfolioReducer, {
   FeeType,
   getDefaultFees,
-} from "../components/allocationFlow/portfolioSlice";
-import appReducer, { Step } from "./appSlice";
+} from "@components/allocationFlow/portfolioSlice";
+import appReducer, { Step } from "@app/appSlice";
 import storage from "redux-persist/lib/storage";
 import {
   persistReducer,
@@ -17,7 +17,7 @@ import {
   REGISTER,
 } from "redux-persist";
 import createMigrate from "redux-persist/es/createMigrate";
-import { mapValues } from "../utils";
+import { mapValues } from "@utils/index.js";
 import { REFRESH_PRICE_INTERVAL_SEC } from "./config";
 
 const migrations = {
diff --git a/dcapal-frontend/src/components/allocationFlow/index.js b/dcapal-frontend/src/components/allocationFlow/index.js
index e586f8b5..1dec594e 100644
--- a/dcapal-frontend/src/components/allocationFlow/index.js
+++ b/dcapal-frontend/src/components/allocationFlow/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Step, setAllocationFlowStep } from "../../app/appSlice";
+import { Step, setAllocationFlowStep } from "@app/appSlice";
 import { EndStep } from "./steps/end";
 import { ImportStep } from "./steps/importFile";
 import { InvestStep } from "./steps/invest";
diff --git a/dcapal-frontend/src/components/allocationFlow/portfolioSlice.js b/dcapal-frontend/src/components/allocationFlow/portfolioSlice.js
index 8f3e58f3..e2e991a6 100644
--- a/dcapal-frontend/src/components/allocationFlow/portfolioSlice.js
+++ b/dcapal-frontend/src/components/allocationFlow/portfolioSlice.js
@@ -1,5 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit";
-import { roundPrice } from "../../utils";
+import { roundPrice } from "@utils/index.js";
 import i18n from "i18next";
 
 const updateWeight = (asset, totalAmount) => {
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/ccy/index.js b/dcapal-frontend/src/components/allocationFlow/steps/ccy/index.js
index ddbd1234..521a82f0 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/ccy/index.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/ccy/index.js
@@ -1,8 +1,11 @@
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { setAllocationFlowStep, Step } from "../../../../app/appSlice";
-import { currentPortfolio, setQuoteCurrency } from "../../portfolioSlice";
+import { setAllocationFlowStep, Step } from "@app/appSlice";
+import {
+  currentPortfolio,
+  setQuoteCurrency,
+} from "@components/allocationFlow/portfolioSlice";
 import { CcyGroup } from "./ccyGroup";
 import { useTranslation } from "react-i18next";
 
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/end/allocateCard.js b/dcapal-frontend/src/components/allocationFlow/steps/end/allocateCard.js
index d4ca04ca..790bb201 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/end/allocateCard.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/end/allocateCard.js
@@ -1,10 +1,14 @@
 import { useMediaQuery } from "@react-hook/media-query";
 import React from "react";
 import { useSelector } from "react-redux";
-import { MEDIA_SMALL } from "../../../../app/config";
+import { MEDIA_SMALL } from "@app/config";
 import { UNALLOCATED_CASH } from ".";
-import { roundAmount, roundDecimals } from "../../../../utils";
-import { ACLASS, FeeType, currentPortfolio } from "../../portfolioSlice";
+import { roundAmount, roundDecimals } from "@utils/index.js";
+import {
+  ACLASS,
+  FeeType,
+  currentPortfolio,
+} from "@components/allocationFlow/portfolioSlice";
 import { useTranslation } from "react-i18next";
 
 const feeAmount = (fees, amount) => {
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/end/index.js b/dcapal-frontend/src/components/allocationFlow/steps/end/index.js
index 5ad4d121..4578cba5 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/end/index.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/end/index.js
@@ -1,21 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { spawn, Thread, Worker } from "threads";
-import { setAllocationFlowStep, Step } from "../../../../app/appSlice";
-import {
-  replacer,
-  roundAmount,
-  roundDecimals,
-  timeout,
-} from "../../../../utils";
-import { Spinner } from "../../../spinner/spinner";
+import { setAllocationFlowStep, Step } from "@app/appSlice";
+import { replacer, roundAmount, timeout } from "@utils/index.js";
+import { Spinner } from "@components/spinner/spinner";
 import {
   ACLASS,
   clearBudget,
   currentPortfolio,
   feeTypeToString,
   isWholeShares,
-} from "../../portfolioSlice";
+} from "@components/allocationFlow/portfolioSlice";
 import { AllocateCard } from "./allocateCard";
 import { useTranslation } from "react-i18next";
 
@@ -152,7 +147,7 @@ export const EndStep = ({ useTaxEfficient, useWholeShares }) => {
   useEffect(() => {
     const launchSolver = async () => {
       const solver = await spawn(
-        new Worker(new URL("../../../../workers/solver.js", import.meta.url), {
+        new Worker(new URL("@workers/solver.js", import.meta.url), {
           name: "wasm-solver-worker",
         })
       );
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/importFile.js b/dcapal-frontend/src/components/allocationFlow/steps/importFile.js
index 2bb397cf..640deeaa 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/importFile.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/importFile.js
@@ -2,14 +2,10 @@ import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import {
-  setAllocationFlowStep,
-  setPfolioFile,
-  Step,
-} from "../../../app/appSlice";
-import { getFetcher } from "../../../app/providers";
-import { timeout } from "../../../utils";
-import { Spinner } from "../../spinner/spinner";
+import { setAllocationFlowStep, setPfolioFile, Step } from "@app/appSlice";
+import { getFetcher } from "@app/providers";
+import { timeout } from "@utils/index.js";
+import { Spinner } from "@components/spinner/spinner";
 import {
   ACLASS,
   FeeType,
@@ -23,7 +19,7 @@ import {
   setFeesAsset,
   setQty,
   setTargetWeight,
-} from "../portfolioSlice";
+} from "@components/allocationFlow/portfolioSlice";
 
 import { useTranslation } from "react-i18next";
 
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/invest.js b/dcapal-frontend/src/components/allocationFlow/steps/invest.js
index 2f72b467..f269a493 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/invest.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/invest.js
@@ -1,14 +1,17 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useCollapse } from "react-collapsed";
-import { setAllocationFlowStep, Step } from "../../../app/appSlice";
-import { InputNumber, InputNumberType } from "../../core/inputNumber";
-import { currentPortfolio, isWholeShares, setBudget } from "../portfolioSlice";
+import { setAllocationFlowStep, Step } from "@app/appSlice";
+import { InputNumber, InputNumberType } from "@components/core/inputNumber";
+import {
+  currentPortfolio,
+  isWholeShares,
+  setBudget,
+} from "@components/allocationFlow/portfolioSlice";
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
 import { spawn, Thread, Worker } from "threads";
-import { replacer } from "../../../utils";
-
+import { replacer } from "@utils/index.js";
 const amtDecimals = 2;
 
 const buildProblemInput = (assets, useWholeShares) => {
@@ -58,7 +61,7 @@ export const InvestStep = ({
 
     const launchSolver = async () => {
       const solver = await spawn(
-        new Worker(new URL("../../../workers/analyzer.js", import.meta.url), {
+        new Worker(new URL("@workers/analyzer.js", import.meta.url), {
           name: "wasm-analyzer-worker",
         })
       );
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/portfolio/assetCard.js b/dcapal-frontend/src/components/allocationFlow/steps/portfolio/assetCard.js
index 7af80242..e6f323b7 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/portfolio/assetCard.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/portfolio/assetCard.js
@@ -2,13 +2,13 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useMediaQuery } from "@react-hook/media-query";
 
-import { InputNumber, InputNumberType } from "../../../core/inputNumber";
+import { InputNumber, InputNumberType } from "@components/core/inputNumber";
 import {
   currentPortfolio,
   isWholeShares,
   removeAsset,
-} from "../../portfolioSlice";
-import { MEDIA_SMALL } from "../../../../app/config";
+} from "@components/allocationFlow/portfolioSlice";
+import { MEDIA_SMALL } from "@app/config";
 import { useCollapse } from "react-collapsed";
 import classNames from "classnames";
 import { TransactionFees } from "./transactionFees";
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/portfolio/index.js b/dcapal-frontend/src/components/allocationFlow/steps/portfolio/index.js
index 5bfae846..d33c1e79 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/portfolio/index.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/portfolio/index.js
@@ -15,20 +15,17 @@ import {
   setQty,
   setRefreshTime,
   setTargetWeight,
-} from "../../portfolioSlice";
+} from "@components/allocationFlow/portfolioSlice";
 
-import { setAllocationFlowStep, Step } from "../../../../app/appSlice";
+import { setAllocationFlowStep, Step } from "@app/appSlice";
 
-import {
-  MEDIA_SMALL,
-  REFRESH_PRICE_INTERVAL_SEC,
-} from "../../../../app/config";
+import { MEDIA_SMALL, REFRESH_PRICE_INTERVAL_SEC } from "@app/config";
 
 import SETTINGS from "@images/icons/settings.svg";
 import BAG from "@images/icons/bag.svg";
 import PIECHART from "@images/icons/piechart.svg";
 import { TransactionFees } from "./transactionFees";
-import { getFetcher } from "../../../../app/providers";
+import { getFetcher } from "@app/providers";
 import { Trans, useTranslation } from "react-i18next";
 
 const refreshAssetPrices = async (assets, quoteCcy, validCcys, dispatch, t) => {
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/portfolio/searchBar.js b/dcapal-frontend/src/components/allocationFlow/steps/portfolio/searchBar.js
index 454263d8..a3696a5a 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/portfolio/searchBar.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/portfolio/searchBar.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import axios from "axios";
-import { api } from "../../../../app/api";
+import { api } from "@app/api";
 import Fuse from "fuse.js";
 import { useSelector } from "react-redux";
 import {
@@ -9,10 +9,13 @@ import {
   fetchPrice,
   fetchPriceYF,
   Provider,
-} from "../../../../app/providers";
-import { DCAPAL_API_SEARCH } from "../../../../app/config";
-import { Spinner } from "../../../spinner/spinner";
-import { ACLASS, currentPortfolio } from "../../portfolioSlice";
+} from "@app/providers";
+import { DCAPAL_API_SEARCH } from "@app/config";
+import { Spinner } from "@components/spinner/spinner";
+import {
+  ACLASS,
+  currentPortfolio,
+} from "@components/allocationFlow/portfolioSlice";
 import { useTranslation } from "react-i18next";
 
 let searchId = undefined;
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/portfolio/transactionFees.js b/dcapal-frontend/src/components/allocationFlow/steps/portfolio/transactionFees.js
index a1b44a9f..10aa8bba 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/portfolio/transactionFees.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/portfolio/transactionFees.js
@@ -11,9 +11,9 @@ import {
   setMaxFeeImpactAsset,
   setVariableFee,
   setVariableFeeAsset,
-} from "../../portfolioSlice";
+} from "@components/allocationFlow/portfolioSlice";
 import classNames from "classnames";
-import { InputNumber, InputNumberType } from "../../../core/inputNumber";
+import { InputNumber, InputNumberType } from "@components/core/inputNumber";
 import { Trans, useTranslation } from "react-i18next";
 
 export const TransactionFees = ({ asset }) => {
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/portfolios/index.js b/dcapal-frontend/src/components/allocationFlow/steps/portfolios/index.js
index dde10b59..8d7f5764 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/portfolios/index.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/portfolios/index.js
@@ -3,18 +3,18 @@ import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { PortfolioCard } from "./portfolioCard";
 import { useNavigate } from "react-router-dom";
-import { InputText } from "../../../core/inputText";
-import { CcyGroup } from "../ccy/ccyGroup";
+import { InputText } from "@components/core/inputText";
+import { CcyGroup } from "@components/allocationFlow/steps/ccy/ccyGroup";
 import {
   Step,
   setAllocationFlowStep,
   setPreferredCurrency,
-} from "../../../../app/appSlice";
+} from "@app/appSlice";
 import {
   addPortfolio,
   getNewPortfolio,
   selectPortfolio,
-} from "../../portfolioSlice";
+} from "@components/allocationFlow/portfolioSlice";
 import classNames from "classnames";
 
 export const PortfoliosStep = () => {
diff --git a/dcapal-frontend/src/components/allocationFlow/steps/portfolios/portfolioCard.js b/dcapal-frontend/src/components/allocationFlow/steps/portfolios/portfolioCard.js
index b01be9d6..def8e0b5 100644
--- a/dcapal-frontend/src/components/allocationFlow/steps/portfolios/portfolioCard.js
+++ b/dcapal-frontend/src/components/allocationFlow/steps/portfolios/portfolioCard.js
@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { InputText } from "../../../core/inputText";
+import { InputText } from "@components/core/inputText";
 import { useDispatch } from "react-redux";
 import {
   deletePortfolio,
   duplicatePortfolio,
   renamePortfolio,
   selectPortfolio,
-} from "../../portfolioSlice";
-import { Step, setAllocationFlowStep } from "../../../../app/appSlice";
+} from "@components/allocationFlow/portfolioSlice";
+import { Step, setAllocationFlowStep } from "@app/appSlice";
 
 import EDIT_SVG from "@images/icons/edit.svg";
 import CLOSE_SVG from "@images/icons/close-menu.svg";
diff --git a/dcapal-frontend/src/components/core/launchBtn.js b/dcapal-frontend/src/components/core/launchBtn.js
index a7249c55..36b4f268 100644
--- a/dcapal-frontend/src/components/core/launchBtn.js
+++ b/dcapal-frontend/src/components/core/launchBtn.js
@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { setAllocationFlowStep, setPfolioFile, Step } from "../../app/appSlice";
+import { setAllocationFlowStep, setPfolioFile, Step } from "@app/appSlice";
 import { useTranslation } from "react-i18next";
 
 export const LaunchBtn = () => {
diff --git a/dcapal-frontend/src/components/core/navBar.js b/dcapal-frontend/src/components/core/navBar.js
index dac18faf..b0246af1 100644
--- a/dcapal-frontend/src/components/core/navBar.js
+++ b/dcapal-frontend/src/components/core/navBar.js
@@ -2,17 +2,17 @@ import { useMediaQuery } from "@react-hook/media-query";
 import React, { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Link } from "react-router-dom";
-import { MEDIA_SMALL } from "../../app/config";
-import { ExportBtn } from "../exportBtn";
+import { MEDIA_SMALL } from "@app/config";
+import { ExportBtn } from "@components/exportBtn";
 
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
-import LanguageSwitcher from "../languageSwitcher";
+import LanguageSwitcher from "@components/languageSwitcher";
 
 import HAMBURGER_MENU from "@images/icons/hamburger-menu.svg";
 import CLOSE_MENU from "@images/icons/close-menu.svg";
 import { useDispatch } from "react-redux";
-import { Step, setAllocationFlowStep } from "../../app/appSlice";
+import { Step, setAllocationFlowStep } from "@app/appSlice";
 
 const CloseBtn = ({ onClick }) => {
   return (
diff --git a/dcapal-frontend/src/components/exportBtn.js b/dcapal-frontend/src/components/exportBtn.js
index 1d4c0592..db97b9af 100644
--- a/dcapal-frontend/src/components/exportBtn.js
+++ b/dcapal-frontend/src/components/exportBtn.js
@@ -1,11 +1,11 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { Step } from "../app/appSlice";
+import { Step } from "@app/appSlice";
 import {
   aclassToString,
   currentPortfolio,
   feeTypeToString,
-} from "./allocationFlow/portfolioSlice";
+} from "@components/allocationFlow/portfolioSlice";
 import { useTranslation } from "react-i18next";
 
 const pad = (n) => `${n}`.padStart(2, "0");
diff --git a/dcapal-frontend/src/components/spinner/spinner.js b/dcapal-frontend/src/components/spinner/spinner.js
index e996dc1e..94525e70 100644
--- a/dcapal-frontend/src/components/spinner/spinner.js
+++ b/dcapal-frontend/src/components/spinner/spinner.js
@@ -1,5 +1,5 @@
 import React from "react";
-import "./spinner.css";
+import "@components/spinner/spinner.css";
 
 export const Spinner = ({ width = "80px", height = "80px" }) => (
   <div className="lds-ripple" style={{ width: width, height: height }}>
diff --git a/dcapal-frontend/src/index.js b/dcapal-frontend/src/index.js
index 4fb35ecc..c5f0ad2f 100644
--- a/dcapal-frontend/src/index.js
+++ b/dcapal-frontend/src/index.js
@@ -4,8 +4,8 @@ import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 
 import "./style.css";
-import { store, persistor } from "./app/store";
-import { Router } from "./routes/router";
+import { store, persistor } from "@app/store";
+import { Router } from "@routes/router";
 import { BrowserRouter } from "react-router-dom";
 
 import i18n from "i18next";
diff --git a/dcapal-frontend/src/routes/containerPage.js b/dcapal-frontend/src/routes/containerPage.js
index 3ef0496a..aaff0c09 100644
--- a/dcapal-frontend/src/routes/containerPage.js
+++ b/dcapal-frontend/src/routes/containerPage.js
@@ -1,9 +1,9 @@
 import React from "react";
-import { NavBar } from "../components/core/navBar";
+import { NavBar } from "@components/core/navBar";
 import { DcaPalHelmet } from "./helmet";
-import { Footer } from "../components/core/footer";
-import { CookieButton } from "../components/core/cookieButton";
-import CookieConsent from "../components/core/cookieConsent";
+import { Footer } from "@components/core/footer";
+import { CookieButton } from "@components/core/cookieButton";
+import CookieConsent from "@components/core/cookieConsent";
 
 export const ContainerPage = ({ id, title, content }) => {
   return (
diff --git a/dcapal-frontend/src/routes/demoPage.js b/dcapal-frontend/src/routes/demoPage.js
index 9f14f19b..b9535591 100644
--- a/dcapal-frontend/src/routes/demoPage.js
+++ b/dcapal-frontend/src/routes/demoPage.js
@@ -2,18 +2,18 @@ import React, { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import { setAllocationFlowStep, setPfolioFile, Step } from "../app/appSlice";
+import { setAllocationFlowStep, setPfolioFile, Step } from "@app/appSlice";
 
 import {
   DEMO_PF_60_40,
   DEMO_PF_ALL_SEASONS,
   DEMO_PF_MR_RIP,
   DEMO_PF_HODLX,
-} from "../app/config";
-import PF_60_40 from "../../demo/dcapal-60-40.json";
-import PF_ALL_SEASONS from "../../demo/dcapal-all-seasons.json";
-import PF_MR_RIP from "../../demo/dcapal-mrrip.json";
-import PF_HODLX from "../../demo/dcapal-hodlx.json";
+} from "@app/config";
+import PF_60_40 from "@demo/dcapal-60-40.json";
+import PF_ALL_SEASONS from "@demo/dcapal-all-seasons.json";
+import PF_MR_RIP from "@demo/dcapal-mrrip.json";
+import PF_HODLX from "@demo/dcapal-hodlx.json";
 import { useTranslation } from "react-i18next";
 
 const demoPortfolios = {
diff --git a/dcapal-frontend/src/routes/helmet.js b/dcapal-frontend/src/routes/helmet.js
index 2d049857..8ebfa6ba 100644
--- a/dcapal-frontend/src/routes/helmet.js
+++ b/dcapal-frontend/src/routes/helmet.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { Helmet } from "react-helmet";
 import { useLocation } from "react-router-dom";
-import { DCAPAL_CANONICAL } from "../app/config";
+import { DCAPAL_CANONICAL } from "@app/config";
 
 export const DcaPalHelmet = ({ title }) => {
   const location = useLocation();
diff --git a/dcapal-frontend/src/routes/root.js b/dcapal-frontend/src/routes/root.js
index 5df1aef0..b4397025 100644
--- a/dcapal-frontend/src/routes/root.js
+++ b/dcapal-frontend/src/routes/root.js
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { LaunchBtn } from "../components/core/launchBtn";
-import { RootCard } from "../components/core/rootCard";
+import { LaunchBtn } from "@components/core/launchBtn";
+import { RootCard } from "@components/core/rootCard";
 import { Trans, useTranslation } from "react-i18next";
 import { ContainerPage } from "./containerPage";
 
diff --git a/dcapal-frontend/src/routes/router.js b/dcapal-frontend/src/routes/router.js
index bb92df9d..db2622af 100644
--- a/dcapal-frontend/src/routes/router.js
+++ b/dcapal-frontend/src/routes/router.js
@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation, useRoutes } from "react-router-dom";
-import { App } from "../app";
-import { setAllocationFlowStep, Step } from "../app/appSlice";
+import { App } from "@app";
+import { setAllocationFlowStep, Step } from "@app/appSlice";
 
 import AboutPage from "./aboutPage";
 import DemoPage from "./demoPage";
@@ -16,7 +16,7 @@ import {
   DEMO_PF_ALL_SEASONS,
   DEMO_PF_MR_RIP,
   DEMO_PF_HODLX,
-} from "../app/config";
+} from "@app/config";
 
 export const Router = () => {
   const step = useSelector((state) => state.app.allocationFlowStep);
diff --git a/dcapal-frontend/webpack.common.js b/dcapal-frontend/webpack.common.js
index 1f04e67e..3c6e5c13 100644
--- a/dcapal-frontend/webpack.common.js
+++ b/dcapal-frontend/webpack.common.js
@@ -39,7 +39,13 @@ module.exports = (_env, argv) => {
     },
     resolve: {
       alias: {
-        "@images": path.resolve(__dirname, "images/"),
+        "@images": path.resolve(__dirname, "images"),
+        "@app": path.resolve(__dirname, "src/app/"),
+        "@components": path.resolve(__dirname, "src/components"),
+        "@utils": path.resolve(__dirname, "src/utils"),
+        "@workers": path.resolve(__dirname, "src/workers"),
+        "@demo": path.resolve(__dirname, "demo"),
+        "@routes": path.resolve(__dirname, "src/routes"),
       },
     },
     plugins: [


Test patch: