dojo looking for build.js in wrong path - dojo

I am trying to run my dojo project on a local Tomcat (7.0) server using Eclipse Juno 64bit as a dev environment.
I ran into a problem yesterday concerning how dojo assumes where files are stored within the source tree.
Below is a firebug log showing the issue:
304 Not Modified 23ms dojo.js (Line 295)
GET http://localhost:8080/src/dojo-18/dojo/parser.js
304 Not Modified 46ms dojo.js (Line 295)
GET http://localhost:8080/src/dojo-18/dojo/util.js
404 Not Found 24ms dojo.js (Line 295)
"NetworkError: 404 Not Found - http://localhost:8080/src/dojo-18/dojo/util.js"
The first 2 paths (and a lot before them) are loaded correctly, now the third path is incorrect, there is no util.js in the base dojo folder, I dont know why dojo would look there.
In order to solve the issue I tried describing the path better using the baseUrl property
<script>
dojoConfig = {
isDebug: true,
parseOnLoad: false,
baseUrl: './src/dojo-18/',
};
</script>
the dojo.js is referenced like this:
<script src="./src/dojo-18/dojo/dojo.js"></script>

Dojo does not look for util.js by itself, if it's doing that, you have imported a module called util by yourself, for example:
require([ "dojo/util" ], function(util) {
// This will not work because the util module does not exist
});
If you want to reference a self defined module, you have to configure the package first using dojoConfig:
<script>
dojoConfig = {
isDebug: true,
parseOnLoad: false,
baseUrl: './src/dojo-18/',
packages: [{
name: 'custom',
location: '/path/to/custom'
}]
};
</script>
Then you can reference a module in that package by using:
require([ "custom/util" ], function(util) {
// This will load the custom util module
});
In this case, the Dojo AMD loader will look for util.js inside the /path/to/custom folder, so it would become:
/path/to/custom/util.js

Related

How to set the module name or path used in require() calls of a module in browserify?

I am using browserify to move a reusable typescript module into the browser using gulp.
gulp.task("default", function(){
return browserify({
basedir: '.',
debug: true,
require: ['./src/common/common.ts'],
fullPaths: false,
cache: {},
packageCache: {}
}).plugin(tsify)
.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest("dist"));
});
To my surprise I need to include the resulting common.js file via
require("c:\\Users\\Luz\\Desktop\\tstest\\client\\src\\common\\common.ts");
In typescript or in builds using UMD + require JS I require files using relative paths without problems with exactly the same code. In the moment I add browserify I get absolute paths. I tried compiling typescript myself and use browserify without tsify but it always demands an absolute path to include it. All other modules that require common.js will fail to find it. How can I fix this?
Edit: Example how it looks like in the html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="common.js"></script>
</head>
<body>
<script>
console.log("script started");
//works
var test = require("c:\\Users\\Luz\\Desktop\\tstest\\client\\src\\common\\common.ts");
test.printCommon();
//fails (all other modules will try to find it at this path)
var test2 = require("../common/common");
test2.printCommon();
</script>
</body>
</html>
While I couldn't find the root of the problem I found a solution that works:
var brofy = browserify({
basedir: '.',
debug: true
});
brofy.plugin(tsify);
brofy.require("./src/common/common.ts", { expose: "../common/common" });
brofy.bundle()
.pipe(source('common.js'))
.pipe(gulp.dest("dist"));
The property expose will make sure that require("../common/common") leads to the correct module avoiding any absolute paths and allowing me to use the same paths I use in typescript.
Other bundles can reference the bundle using "brofy.external("../common/common");" to tell browserify to not include it in their own bundle and rather use require to find it.
Edit: Still hoping someone comes up with a better solution.

Using Dojo with Tapestry 5.4

I am planning to use Dojo toolkit with Tapestry 5.4. I started off with the tapestry quickstart project and tried to include dojo. However, I have been facing a lot of issues w.r.t the new require mechanisms.
- Unknown Type error - require is not a function
- Unable to load the dojo module
webapp Directory structure
webapp
+------- mybootstrap
+----------- js (part of tapestry quick start project)
+------- js (js folder I added for Dojo)
+----------- dojo (All dojo files here)
Using it with Tapestry 5.3 was pretty simple - including the dojo.js file in the layout component. The same thing does not work in 5.4
I have tried using requirejs data-main attribute, but still stuck with it.
Any help will be appreciated.
Put all your dojo files in webapp\js folder.
your folder structure should be like
// Folder structure
-webapp
-js
-dojo
-digit
-dojox
Note: Make sure you provide the access to js/* path. So that url : http://localhost:8080/app/js/dojo/dojo.js accessible.
Put a script tag inside your tapestry page (*.tml) and add dojo modules using requireJS using below script,
<script type="text/javascript">
setTimeout(
function() {
var dojoConfig = {
async : true
};
require.config({
packages :
[ {
name : 'dojo',
location : '../js/dojo'
} ],
});
require(
[ 'dojo', 'dojo/dom' ],
function(dojo, dom) {
console.log(dojo);
dom.byId("myDiv").innerHTML = "updatedHTML content";
});
}, 1000);
</script>
thats it.

Load customized Dojo module

I am really new to Dojo so this may sound dumb.
I am using Dojo 1.7 as a hosted resource (that is, I downloaded the dojo package and put it under the source code). Then I have a customized module defined in another folder. The structure looks like this:
/
libs/
js/
dojo/
dojo.js
myPage/
myModules/
myCustomizedModule.js
index.html
I am using the "define" function to define a module in myPage/myModules/myCustomizedModule.js
In "myPage" folder, I am using index.html to require the customized module:
<script>
require(["myPage/myModules/myCustomizedModule"], function(myCustomizedModule){
// Do something.
})
</script>
However, I can't get it to work: the console reported an error:
"http://localhost/myDojoTest/libs/js/dojo/myPage/MyModules/myCustomizedModule.js 404 (Not found)".
I know this directory is not right since "myPage" folder is not under "libs/js/dojo". But it seems when using the "require" statement, instead of using the relative path of the current HTML document, the code uses the current path for the dojo.js file.
Is there anything I can do to correctly refer to my customized module?
Many thanks!
As per your requirement, you need to set up packages as indicated below
<!-- dojo configuration options -->
<!-- For Package configuration refer tutorial at http://dojotoolkit.org/documentation/tutorials/1.7/modules/ -->
<script type="text/javascript">
var dojoConfig = {
async: true,
baseUrl: "/",
tlmSiblingOfDojo: false,
packages: [
{ name: "dojo", location: "libs/js/dojo" },
{ name: "dijit", location: "libs/js/dijit" },
{ name: "dojox", location: "libs/js/dojox" },
{ name: "myModules", location: "myPage/myModules" }
]
};
</script>
You can than access dojo, dijit and myModules in require function call as.
Remember you need to precede the modules with their respective packages.
<script>
require([
//Require resources.
"dojo/store/Memory",
"myModules/myCustomizedModule"
], function(Memory, myCustomizedModule){
....
}
);
</script>
Hope it helps.

how to load js widget file in dojo ? registerModulePath is working but in 1.8 packages not working - need help immediately

Hello need help immediately,
I have web directory as
- WebContent
index.jsp
dojo
testjs
- bpl
- mywidget.js
Context path is /TestWeb/CheckDojo
script in index.jsp:
dojo.registerModulePath("testjs","/TestWeb/CheckDojo/testjs");
is working and i can do
require([ "dojo/dom", "testjs/bpl/mywidget", "dojo/domReady!"], ...
but in dojo 1.8 ,
in dojoconfig i am using
data-dojo-config="locale: en-us,
async: true,
config-tlmSiblingOfDojo: false,
packages: [{
name: 'testjs',
location: '/TestWeb/CheckDojo/testjs'
}],
parseOnLoad: true"
then in require mywidget is searched in dojo directory which is not the correct path.
what and how should i load the package ?
Look here enter link description here (module indentifiers). The documentation tells that the location is relative of the 'dojo' folder (defined in dojo.baseUrl).
You should change the code to :
data-dojo-config="locale: en-us,
async: true,
config-tlmSiblingOfDojo: false,
packages: [{
name: 'testjs',
location: '../TestWeb/CheckDojo/testjs'
}],
parseOnLoad: true"

Running a durandal app with the main-built file results does not work

I am having some problems with the optimized code that weyland generates. Here is what I did so far:
This is my project structure:
This is my weyland-config file:
exports.config = function(weyland) {
weyland.build('main')
.task.uglifyjs({
include:['www/**/*.js', 'www/js/durandal/**/*.js']
})
.task.rjs({
include:['www/**/*.{js,html}', 'www/js/durandal/**/*.js'],
loaderPluginExtensionMaps:{
'.html':'text'
},
rjs:{
name:'libs/require/require', //to deploy with require.js, use the build's name here instead
baseUrl : '../www/js',
paths : {
'text': 'libs/require/text',
'durandal': 'durandal',
'plugins': 'durandal/plugins',
'transitions': 'durandal/transitions',
'knockout': 'empty:',
'bootstrap': 'empty:',
'jquery': 'empty:'
},
inlineText: true,
optimize : 'none',
pragmas: {
build: true
},
stubModules : ['text'],
keepBuildDir: true,
out:'../www/js/main-built.js'
}
});
}
This is what I added in my index.html file to run the generated file instead of the one created by me:
<script src="js/main-built.js"></script>
I have also tryed using:
<script data-main="js/main-built" src="js/libs/require/require.js"></script>
This is what I had before:
<script data-main="js/main" src="js/libs/require/require.js"></script>
After I run weyland build on the command line the main-built file get's generated without any errors.
If I try to run the app the applycation freezez at the start screen as if the the app.start() method never get's called and no errors are being displayed.
I have checked chrome debugging tools the main-built file is recieved by the client it just seems it does nothing.
What am I doing wrong?
EDIT
I have also tryed building using almond-custom and ading this aditional configuration:
insertRequire:['main']
wrap:true
When I try to run the app I get this error:
Uncaught Error: main missing durandal/app
In my main fail I am loading the 'durandal/app' threw require js and for some reason it can not find it anymore