RequireJS - what should I set for BaseUrl?
I am having trouble figuring out how to set the base url for requirejs given my project structure.
Problem: Not all html files will be at the same folder level. The script file paths change depending on the location of the html page.
What I've tried: I've looked at the API , but I just don't understand what the BaseURL should be to get the correct path for all pages. I've tested the variations (../js/lib,/js/lib/, I've tried not including all of this in the main.js file), but this one below is the only one that seems to give the correct result for certain files.
Main.js
requirejs.config({
baseUrl: '../js/lib',
paths: {
'jquery' : (document.addEventListener) ? ['vendor/jquery'] : ['vendor/jquery-1.9.1']
},
shim: {
'foundation/foundation': {
deps: ['jquery']
},
'foundation/foundation.alert': {
deps: ['jquery', 'foundation/foundation']
},
'vendor/slick.min': {
deps: [
'jquery',
'foundation',
'foundation/foundation.interchange'
],
exports: 'slick'
}
}
});
requirejs(['jquery'
, 'foundation/foundation'
]);
Folder structure
Main Folder
โ
โ Some Folder
โ โโโ css
โ โโโ js
โ โ โโโ lib
โ โ โ โโโ foundation
โ โ โ โ โโโ foundation.alert.js
โ โ โ โ โโโ ...(foundation component js files)
โ โ โ โ โโโ foundation.js
โ โ โ โโโ vendor
โ โ โ โ โโโ jquery-1.9.1.js
โ โ โ โ โโโ jquery.js
โ โ โ โโโ foundation.min.js
โ โ โ โโโ slick.min.js
โ โ โ โโโ slickModule.js
โ โ โโโ main.js
โ โ โโโ require.js
โ โโโ html
โ โ โโโ components
โ โ โ โโโ slider.html [All scripts throw 404: Main Folder/Some Folder/html/js/lib/vendor/file.js ]
โ โ โโโ home.html [loads files as expected]
โ โ โโโ second.html [loads files as expected]
โ โ โโโ subfolder
โ โ โ โโโ random.html
โ โโโ extra folder
โ โ โโโ index.html [All scripts throw 404: Main Folder/Some Folder/extra folder/js/lib/vendor/file.js ]
โ โ
โ Another Folder
โ โโโ index.html [All scripts throw 404]
/html/components/slider.html
When I try to trigger a request this way the slickModule url is "Main folder / Some folder /html/js/lib/slickModule.js" - the "html" note is added after the base url
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script data-main="../../js/main" src="../../js/require.js"></script>
<script>
require(['../js/main'], function () {
require(['slickModule']);
});
</script>
</head>
<body>
...
</body>
</html>
Can someone help me understand why this might be happening?
If possible, what can I do to make the base URL consistent?
source to share
I had this same problem in an ASP.NET MVC4 application structured like this:
Main Folder
โโโ Scripts
โ โโโ Libraries
โ โ โโโ jquery
โ โ | โโโ jquery-1.10.2.min.js
...
What I did was use my server side technology method to determine the "root location" of the application. In my case it is HttpRequest.ApplicationPath
, which "gets the root path of the virtual ASP.NET application on the server". ( source ).
My requirejs setup looks like this:
<script type="text/javascript">
var require = {
baseUrl: '@(Request.ApplicationPath)/Scripts',
paths: {
jquery: 'Libraries/jquery/jquery-1.10.2.min',
...
}
}
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Libraries/require/require.js")"></script>
Summarizing:
- My base url is application root path plus folder
Scripts
- Each
path
starts with a folder that is a childScripts
- This forces requires to use the absolute path to the libraries instead of trying to figure out the relative paths from different directories.
- Any scripts not specified in the config
paths
must also start with a folder that is a childScripts
- You don't need to use
../
at any point in your configuration
Hope this helps, obviously you will need to configure this for whatever technology you are using.
source to share
Summary
- You don't need the same file twice per line, especially if it is a file that changes your config options, especially if it uses relative paths.
- Use one application entry point. If you cannot run the application in one place, it will be difficult (though not impossible) to use the attribute
data-main
. - Use the config option
paths
to specify files rather than relative paths when you enable a module or set up a config.
Single entry point
First of all, you are likely to run into some problems with your attribute data-main
, since its behavior when used for multiple entry points is undocumented . As they say:
If you want to make calls
require()
on the HTML page, then it is best not to use the basic information. data-main is only intended to be used when the page has only one main entry point, the main script information. For pages that want to make inline callsrequire()
, it is best to nest those inside the callrequire()
for configuration
Multiple requests required
Second, you use an attribute data-main
to load the config, which defines the behavior of the library (in other words, function require
/ requirejs
configurable), but then you use this configurable tool to load the config again:
<script data-main="../../js/main" src="../../js/require.js"></script>
<script>
require(['../js/main'], function () {
require(['slickModule']);
});
</script>
I'm pretty sure this introduces some strange behavior.
Use paths
to avoid../
Third, yours baseUrl
automatically sets either the location of the uploaded HTML file, or where the data-main
script resides . You can use this to your advantage by creating a single entry point (maybe js/main
) and then defining a config option to hide the nested modules.
In other words, your application never needs to query ../
(or any of its variations), because anything nested must be hidden with a path entry, like this:
"paths": {
"slickModule": "lib/slickModule"
}
I know this answer doesn't specifically solve your problem, but I'm pretty sure one of these problems - when corrected - will solve your 404 problem.
source to share
Since you have html files in different folders at different levels, setting baseUrl as a relative path (i.e. ../lib/js
) will work for some files, but it is expected for all. You need to set the absolute path from root to lib folder eg. if "Base Folder" is your root, your baseUrl must be /Some Folder/js/lib/
or /Some Folder/js/lib
. Hope it helps.
source to share