I've got an app with several custom elements in it, and I'm writing tests, and I'm not sure how the directories are supposed to be set up for tests to work.
Is it something like:
myApp
myApp/bower_components
myApp/test
myApp/test/myApp
myApp/test/myElement1
myApp/test/myElement2
myApp/test/myElement3
myApp/src
myApp/src/myApp
myApp/src/myElement1
myApp/src/myElement2
myApp/src/myElement3
myApp/demo
Or does each element get a test/ subfolder? Like
myApp/src/myElement1/test
myApp/src/myElement2/test
myApp/src/myElement3/test
According to the docs here each element has a test folder that can be accessed via the browser when you use polymer serve like so localhost:8080/components/my-el/test/my-el_test.html
The test should be in their own folder separated from the app main directory to facilitate the Polymer CLI's build process. (Making your app production ready.)
Recommended Structure:
myApp/test/myElement1
myApp/src/myElement1
Here’s an example polymer.json file from the Shop app: ((No Test Folder))
polymer.json
{
"entrypoint": "index.html",
"shell": "src/shop-app.html",
"fragments": [
"src/shop-list.html",
"src/shop-detail.html",
"src/shop-cart.html",
"src/shop-checkout.html",
"src/lazy-resources.html"
],
"sources": [
"src/**/*",
"data/**/*",
"images/**/*",
"bower.json"
],
"extraDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.js"
],
"lint": {
"rules": ["polymer-2-hybrid"]
}
}
Related
I would like to exclude certain components from my production build in Angular 5+. So far I have read around and I understand the concepts of environment variables, but to my understanding those are available at runtime. What I am looking for is to actually exclude certain modules from ever being imported so that the code for them does not get to the production build (files).
I also dont want to have an
<div *ngIf="isProduction">...</div> laying around, what I would rather want to do is something like this:
Component({
...
templateUrl: environment.production ? 'app.prod.html' : 'app.html'
})
However this is also not possible due to how the Angular compiler works.
I guess the answer to this is to tweak the angular-cli, but given there is no good documentation (that I can find), I'd like to know if someone perhaps has a better idea?
For those looking for a *not so scalable* solution.
Solution is for Angular 5 / Angular 6+
You can switch specific files depending on what environment you are building/serving by adding each file pair in the angular.json file.
For example, if you wish to use app.prod.html instead of app.html in your app component only when using the production environment / configuration.
In angular.json add your replacments in the fileReplacements array under the config you wish to have replaced:
{
...
"projects": {
...
"configurations": {
"production": {
...
"fileReplacements": [
...
*** ADD YOUR REPLACEMENT FILES HERE ***
...
]
}
}
}
}
Using the above example:
{
...
"projects": {
...
"configurations": {
"production": {
...
"fileReplacements": [
...
{
"replace": "src/app/app.html",
"with": "src/app/app.prod.html"
}
...
]
}
}
}
}
Not a pretty solution as it seems you will be doing this for each file you wish to replace but it should work nontheless.
Build or serve the specific config with
ng serve --configuration=production
ng build --configuration=production
I have a grunt task building my bundles for my app through systemJs/Jspm. I have 2 things I need bundled, the entire app, then the app.jsx itself. So I have 2 grunt tasks using grunt-run, the problem is, for one of the tasks I would like it not to bundle external dependancies. So here is the grunt-run task :
app_jspm_bundle: {
cmd: 'jspm',
args: [
'bundle',
'build/client/app.js',
'build/client/app.js'
]
},
jspm_bundle: {
cmd: 'jspm',
args: [
'bundle',
'build/client/irc/index.js',
'build/client/bundle/irc.js'
]
}
So jspm_bundle works great, however I would like the app_jspm_bundle task to not include external dependancies.
Based on the systemJs documentation, I tried adding this to the systemjs.congif.js file :
meta: {
"build/client/app.js": {
"build": false
}
},
However, this just generates my app.js file empty in my build folder. Is there any way to do bundle the app.js alone? Thanks!
I have two projects under a solution, one is my main web project, say MyProject and the other serves for testing purposes, say MyProject.Tests.
Solution
MyProject
MyProject.Tests
I want to have my JavaScript headless tests running to the second one.
On the first project, all the javascript files are under the Scripts directory, like so:
Scripts/
Common.js
Libs/
jquery/
jquery.js
requirejs/
require.js
At the test project, I have my chutzpah.json file on root.
MyProject.Tests
chutzpah.json
Tests/
Specs/
spec.js
The file has this configuration:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [ { "Path": "Tests/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": ["*Common.js"],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
But when I try to run the spec file I get an error.
Spec file:
define(["jquery"], function ($) {
//code here. Doesn't matter, the error is because of the jquery module
});
The error, is this:
Error: Error opening C:/Users/g.dyrrahitis/Documents/Visual Studio 2013/Projects/MySolution/MyProject.Tests/Scripts/Libs/jquery/jquery.js: The system cannot find the path specified.
The thing is that chutzpah tries to find my jquery module at the test project rather the main project, where it resides.
Why I'm getting this kind of behavior and how can I solve this please? I've been trying for hours to tackle this with no luck so far.
Note
*The names MySolution, MyProject, MyProject.Tests are used for clarity, rather than using the real names.
I've found it, the chutzpah file hadn't the right configuration options (as expected) for the test harness directory.
I needed the TestHarnessDirectory and TestHarnessLocationMode options to explicitly instruct it to look at my main project directory.
This now is the correct one:
{
"TestHarnessDirectory": "../MyProject",
"TestHarnessLocationMode": "Custom",
"TestHarnessReferenceMode": "AMD",
"Framework": "jasmine",
"Tests": [ { "Path": "JavaScript/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": [ "*Common.js" ],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
Just needed to tell chutzpah that the harness location mode is custom, in order to provide a directory for it, which is the root of my main project.
Beware for the right configuration paths then, you may end up struggling for hours like me to find a solution. And read the documentation thoroughly (which I hadn't done).
I'm building multiple applications using Durandal JS. All those applications are located on the same server under the same document root and share some common code. For example they all use the same model & view for login.
How can i reuse/share the login model & view in all those applications without just copy & pasting the files to the projects?
I already tried something with the following folder structure:
ProjectsDir/Project1/app/durandal/..
/models/Shell.js, Main.js, ...
/views/Shell.html, Main.html, ...
/main.js
/main-built.js
ProjectsDir/Project2/app/durandal/..
/models/Shell.js, Main.js, ...
/views/Shell.html, Main.html, ...
/main.js
/main-built.js
ProjectsDir/ProjectsBase/app/models/Login.js
/views/Login.html
This way it would be possible to reference the same login model & view in my ProjectsBase from all other projects by setting the correct route to it in the respective shell.js. This route could look something like this:
router.map([
{
url: 'Login',
moduleId: '../../ProjectsBase/app/models/Login',
name:'Login',
visible: true
},
{
url: 'Main',
moduleId: 'models/Main',
name:'Main',
visible: true
}
]);
This works as expected during debugging but building the production version with the durandal optimizer unfortunately doesn't work.
Actually building does work (it produces the main-built.js just fine) but when i launch the site with the production file referenced i get the following error:
Uncaught Error: undefined missing durandal/../../../MPBase/durandal-app/models/Login
I'd really appreciate any ideas on how I could make the built production file work with the setup I described above.
Of course I'm also open for other ideas on how to make models & views reusable/sharable between multiple projects.
Thanks
With some help from Durandals Google Group I found a solution.
It's not possible to use the provided optimizer.exe but it's quite easy to create a custom r.js config which can handle the setup I described in the question:
First of all I ran the optimizer.exe which created a basic config file (app.build.js) that i used as a starting point.
This config file automatically included all necessary files from the project itself (e.g. Project1).
The only things that are missing in this config file are the references to my shared code (the login files from the ProjectsBase directory). Therefore I added them manually along with a new path.
Custom app.build.js (3 changes highlighted with a comment, the rest is how it was built from the optizimer.exe):
{
"name": "durandal/amd/almond-custom",
"inlineText": true,
"stubModules": [
"durandal/amd/text"
],
"paths": {
"text": "durandal/amd/text",
"projectsbase": "../../ProjectsBase/" // New path to folder with shared files
},
"baseUrl": "ProjectsDir\\Project1\\app",
"mainConfigFile": "ProjectsDir\\Project1\\app\\main.js",
"include": [
"main",
"durandal/app",
"durandal/composition",
"durandal/events",
"durandal/http",
"text!durandal/messageBox.html",
"durandal/messageBox",
"durandal/modalDialog",
"durandal/system",
"durandal/viewEngine",
"durandal/viewLocator",
"durandal/viewModel",
"durandal/viewModelBinder",
"durandal/widget",
"durandal/plugins/router",
"durandal/transitions/entrance",
"projectsbase/app/models/Login", // Include for login model
"models/Main",
"models/Shell",
"text!projectsbase/app/views/Login.html", // Include for login view
"text!views/Main.html",
"text!views/Shell.html"
],
"exclude": [],
"keepBuildDir": true,
"optimize": "uglify2",
"out": "ProjectsDir\\Project1\\app\\main-built.js",
"pragmas": {
"build": true
},
"wrap": true,
"insertRequire": [
"main"
]
}
Now I only had to update my Shell.js to use the correct routes to the Login model & view by also adding a path to requirejs and using it correctly when setting the routes:
Add path at the very beginning of Shell.js:
requirejs.config({
paths: {
'projectsbase': '../../ProjectsBase/'
}
});
Set correct routes in activate method of Shell.js:
router.map([
{ url: 'Login', moduleId: 'projectsbase/app/models/Login', name:'Login', visible: true },
{ url: 'Main', moduleId: 'models/Main', name:'Main', visible: true }
]);
Now i can build my main-built.js which bundles & minifies all relevant files by opening the node js command line, browsing to the directory where the r.js config file is and create the build (the main-built.js) with the following command:
node r.js -o app.build.js
This way everything is included correctly when I'm working with the debug files and it's also working with the build main-built.js which also includes my shared files from the ProjectsBase.
I've got an app I'm building in Sencha Touch 2 then packaging into android. What I want to include is a "defines.js" file which contains all my variables. (This app is to be altered for different people so this makes things easier to change)
I've got it to work fine on the browser by adding the script link to the index.html file, but when I package it up and run it on the android emulator it can't find the variables.
Any ideas? Ask if you need more information.
Currently the file resides under "resources/defines.js"
Edit:
I want to include a file containing variables for use in the app (titles etc)
It is called "defines.js".
I have linked it in the index.html using the following script tag:
<script type="text/javascript" src="resources/defines.js"></script>
I have also added into the to js section of the app.json:
"js": [
{
"path": "sdk/sencha-touch.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
},
{
"path": "resources/defines.js"
}
],
It works in a browser but not when I created a native android app.
You can try a more 'sencha' way.
First, remove the:
<script type="text/javascript" src="resources/defines.js"></script>
and also remove the entry on app.json:
{
"path": "resources/defines.js"
}
Then, in your app.js add the resources path for the loader:
Ext.Loader.setPath({
....
'Resources': 'resources'
});
Require the class:
Ext.application({
...
requires: [
'Resources.defines',
...
]
....
});
Define the class in the file resources/defines.js:
Ext.define('MyApp.resources.defines', {
alternateClassName: 'Defines',
singleton: true,
BASEURL: 'localhost/myapp',
APPVERSION: '0.1',
});
Tehn, you can access the object properties by:
Defines.BASEURL
Defines.APPVERSION
Hope it helps-
How are you creating packaging the android app?
Using Sencha native packaging or the cordova packaging over Sencha touch