Set urlBase for theme development

🙋Get Help
1

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…

.
├── CHANGELOG.md
├── 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

NODE_PATH=src/

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

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

Related info:

1 Like
2

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.

3

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.

4

Hello!
Any updates on this topic? :slightly_smiling_face:

5

Customizing Webpack is supported now: Customize Webpack configuration