HTML has a base tag
Today I learned about
<base /> tag. It is really useful in a situation where you need to tell
the browser what is the base for relative links. Why you need that?
Imagine that you have a script that is located on CDN:
https://cdn/application/index.html and from
inside index.html you have a JS tag that points to
If you want implicitly tell browser to look for
application/* folder not
you can drop base tag:
<base ref="https://cdn/application/" />
It is telling the browser to base all relative links on
Notice trailing slash at the end - this is important to
base to work.
You have base tag ready - now it is time to add
<script src="app.js" />
Notice that it don’t have
/ at the beginning
src parameter - it is relative link.
Now the browser will resolve
https://cdn/application/app.js. You can read more on MDN
base documentation page.
If you need to set it up using html-webpack plugin:
baseparam to html-webpack options:
template: paths.indexHTML, // path to your index.html if you are using it
- make sure that you don't have
publicPathset in the webpack config.
- It is causing the output to be
/app.js(or whatever you set your public path) instead of having
In this post, I wrote about base an HTML tag that can be used to hint browser what is the base URL for relative links inside a document.