Set urlBase for theme development

Is there a way to set a urlBase to avoid relative paths when developing a theme?

The idea is that for a tree structure like this one…

β”œβ”€β”€ package.json
└── src
    β”œβ”€β”€ components
    β”‚   β”œβ”€β”€ featured-media.js
    β”‚   β”œβ”€β”€ header.js
    β”‚   β”œβ”€β”€ index.js
    β”‚   β”œβ”€β”€ link.js
    β”‚   β”œβ”€β”€ list
    β”‚   β”‚   β”œβ”€β”€ index.js
    β”‚   β”‚   β”œβ”€β”€ list-item.js
    β”‚   β”‚   β”œβ”€β”€ list.js
    β”‚   β”‚   └── pagination.js
    β”‚   β”œβ”€β”€ loading.js
    β”‚   β”œβ”€β”€ menu-icon.js
    β”‚   β”œβ”€β”€ menu-modal.js
    β”‚   β”œβ”€β”€ menu.js
    β”‚   β”œβ”€β”€ nav.js
    β”‚   β”œβ”€β”€ page-error.js
    β”‚   β”œβ”€β”€ post.js
    β”‚   └── title.js
    β”œβ”€β”€ helpers
    β”‚   └── DataState.js
    └── index.js

You can import from anywhere the component Title just by doing

import Title from 'components/title'

instead of doing

import Title from '../title'
import Title from './title'
import Title from '../../title'
import Title from '../../../../title'

With create-react-app used to be done by setting and environment variable w/ value


With the latest version of create-react-app you have to create a jsconfig.json with this…

  "compilerOptions": {
    "baseUrl": "src"
  "include": ["src"]

Related info:

No, that cannot be done right now, but people will be able to do it when we release the frontity.config.js file with support for extending Webpack.

I have added the tag config-webpack so we can update all the topics that mention this to be able to find them easily once we release this feature.