Multiple Aurelia Apps Side by Side - gulp

I'm currently tasked with building 2 UI's for a service I've constructed.
The output from both of these UI's will need to end up in the same root folder.
I found the section that names the basic bundles in the "aurelia.json" file, and renamed the bundles created for my project, when built, my project as expected created 2 new bundles in the scripts directory with the new names.
However, upon running my project, I then found that index.html was getting a 404 trying to load the "vendor-bundle" (Which I had renamed to 'service-vendor-bundle').
No problem there, I just edited index.html to reference the new file, and bingo, 404 resolved.
The problem is however, that "service-vendor-bundle" can now not load "service-app-bundle".
I assumed (Probably incorrectly) that, when I renamed the bundles in my aurelia.json file, that the build output would also be configured appropriately to load the files in.
I need to be able to customize this beacuse once the 2 aurelia apps are finished, they will need to share a scripts folder, so I'll need
uione.html to load "scripts\uione-vendor-bundle.js" and "scripts\uione-app-bundle.js"
and I'll need
uitwo.html to load "scripts\uitwo-vendor-bundle.js" and "scripts\uitwo-app-bundle.js"
The final file layout once on the server will look something like the following:
root
uione.html
uitwo.html
scripts
uione-vendor-bundle.js
uione-app-bundle.js
uitwo-vendor-bundle.js
uitwo-app-bundle.js
images
*.png
Both client apps have to be developed separate from each other and be stand alone, so I can't combine them into one app, and I cant put them into seperate folders as the service that will be serving them is a custom in house built service, specifically configured to only serve from a single folder, with a single scripts and images folder.
My aurelia.json file currently looks like this:
.........
"plugins": [
{
"name": "text",
"extensions": [
".html",
".css"
],
"stub": true
}
]
},
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage"
},
"bundles": [
{
"name": "uione-app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
]
},
{
"name": "uione-vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/requirejs/require.js"
],
..........
and I'm using the Aurelia cli tool (au ...) for my Aurelia based tasks.
Any pointers on how to achieve this would be great.

I think you're on the right track by customizing the bundle names.
What you can do is manually load both the vendor bundle and the app bundle. That way the app modules are already downloaded and ready to use, instead of letting the vendor bundle try to download it manually.
index.html
<body aurelia-app="main">
<script src="scripts/my-special-vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
<script src="scripts/my-special-app-bundle.js"></script>
</body>
I have tested this and it is working fine for me. I am using this manual loading technique in my own project to allow ASP.Net script versioning to provide cache-busting (see my answer here).

Related

Disable predefined filename - JSON schema association

I am using Visual Studio Code 1.60.1.
In my project I use many files called project.json and have created my custom JSON schema for them.
When I specify my schema via $schema field directly in project.json everything works just fine.
But I want to use .vscode/settings.json file for that:
{
"json.schemas": [
{
"fileMatch": [
"data/projects/list/*/project.json"
],
"url": "./.vscode/schemas/project.json"
}
]
}
This works too BUT in this case it appears that VS Code is mixing two schemas for my file, which is showing in a tip when I hover the opening { in editor:
JSON schema for .NET Core project.json files
[My scheme name]
This results in mixing properties and messed up hints and autocomplition suggestions.
How can I disable VS Code default ".NET Core" schema for my files and leave only my schema?
Turns out I had C# official extension installed.
I disabled it and everything is working just fine!
The moral is: if something goes wrong, don't forget to check your extensions!

Artifactory REST API: how to add/append docker image artifacts to Build Info?

I have a bamboo server that builds docker images and pushes them to artifactory via reverse proxy. Since the push from the reverse proxy (NGINX) does not provide build information, I need to create it for further requirements.
I came across this REST API https://www.jfrog.com/knowledge-base/how-to-create-and-deploy-a-build-info-json-file-via-the-rest-api/
That went very fine, but the problem is that, when I go to the web UI and check for the build, for every artifact it appears only the name, and even the type, but the "Repo Path" column, shows "No path found (externally resolved or deleted/overwritten)".
Via appending artifacts to an existing module (/api/build/append), or creating a new build (like in the link above), my modules section looks like:
[{
"id":"my-module",
"artifacts":[
{
"type": "txt",
"sha1": "73f4617b4a64dc95c63581609ea0734aab987d98",
"md5": "00ebbb0b0444645b9489825d7a11c4bf",
"name": "MyArtifact.txt"
}
]
}]
The artifact json was created looking at the attributes of the artifacts pushed by the reverse proxy.
In short, I want to create build info linked to artifacts that are already uploaded into artifactory.
Any ideas why this isn't correctly linking the artifacts to the
build info?
Do I need any extra attributes?
Is it really possible to do what I'm looking for?
I'm not using JFrog's artifactory client for my task. I'm just using Advanced Rest Client for testing commands, and jersey client from my java classes.
I ran into the same problem and finally found some of their source code. It appears that artifacts are linked via properties.
So If your build info name is Test and the build info number is 1
You need to add the following properties to MyArtifact.txt
build.name = Test
build.number = 1
I also believe that you need to publish your build info after these properties have been added to the artifact

Webpack build and deploy process

I have just started using Webpack via a recommendation and am looking for some guidance on how it should be implemented for build and deploy purposes.
I currently have it up and running nicely using webpack-dev-server and some Gulp tasks.
Traditionally I would use Gulp or Grunt to concat files among other things and then use the task runner to copy all my files and assets to a dist or build directory from where I would deploy everything.
At the minute, Webpack does it's thing and builds the bundle file, images etc and then copies them to the build dir, using the [hash].js naming convention.
So my question is, what is the standard practice for then copying over my index.html file and then correctly linking it to the js file to be used in production.
Unless I am completely misunderstanding how Webpack should be used, should there not be some way for me to do this, with the ultimate outcome being me having the ability to navigate to the build dir and see my app up and running as it should be?
I am currently using a plugin to move my index.html. Make sure your webpack.output.publicPath points to your site so it can link images and other resources.
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack_config = {
//Other configs here
output: {
publicPath: 'http://localhost/'
},
//Other configs here
plugins:[
new CopyWebpackPlugin([
{from: './index.html', to: './index.html'},
], {
ignore: [
'*.txt',
{glob: '**/*', dot: true}
]
})
],
//Other configs here
}

Chrome Extension Manifest Relative File Path for Scripts

I have several utility script files that are used by multiple extensions. Thus far, I have been copy/pasting those utility scripts to each extension's root folder whenever I make a change. This is becoming less and less feasible. I would like to reference the same utility script files from both extensions' manifests. I have tried this:
{
"background":
{
"scripts":
[
"../utils.js",
"background.js"
]
}
}
But, I when I reload my extension, I get an Extension error saying:
Could not load extension from 'C:\...'. Could not load background script '../../utils.js'.
If I use backslashes instead (this seems like a more likely solution since I'm working with windows...), I get the same error (but with backslashes).
Is it even possible to achieve this type of relative file path?
How about creating a local server that hosts the JS files you need and then your extension can access those JS file through a localhost port and use their functionality? A simple lightweight server would do the trick (maybe bottle.py in Python).
Chrome v33 tightened up extension security so i'm not sure you can access a file like you tried in your manifest.json
Let me know how you get around this problem!
Have you considered using Shared Modules? According to the documentation you can export common functionality from one extension that can thusly be imported into another extension:
"The export field indicates an extension is a Shared Module that exports its resources:
{
"version": "1.0",
"name": "My Shared Module",
"export": {
// Optional list of extension IDs explicitly allowed to
// import this Shared Module's resources. If no whitelist
// is given, all extensions are allowed to import it.
"whitelist": [
"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
]
}
// Note: no permissions are allowed in Shared Modules
}
The import field is used by extensions and apps to declare that they depend on the resources from particular Shared Modules:
{
"version": "1.0",
"name": "My Importing Extension",
...
"import": [
{"id": "cccccccccccccccccccccccccccccccc"},
{"id": "dddddddddddddddddddddddddddddddd"
"minimum_version": "0.5" // optional
},
]
}
"

Sublime Text Config Q

(Running ST2 on Win7)
Just looking into ST2 as an ide for WebDev. I've introduced a few packages, but have got a bit lost in the configuration of them! I've a couple of problems.
Firstly I've got ST2 configured to open the browser on file save, but unfortunately it opens all files rather than just .html files. Ideally I'd like it to live refresh if the js is already in use, but in the worst case, just open .html files and ignore .js files
Secondly when it opens a .html file it opens it as a file rather than via SublimeServer which is running. I've followed this link and believe SublimeServer is running on the same port.
Here's the SublimeServer config:
{
"attempts": 5,
"autorun": true,
"interval": 500,
"mimetypes":
{
"": "application/octet-stream",
".c": "text/plain",
".h": "text/plain",
".py": "text/plain"
},
"port": 8000
}
and the proj config
{
"folders":
[
{
"path": "/E/Projects/MyProjects/My.Web/My.Web.App/My.Web.App.Designer"
}
],
"settings":
{
"sublime-view-in-browser":
{
"baseUrl": "http://localhost:8000/",
"basePath": "E:\\Projects\\MyProjects\\My.Web\\My.Web.App\\My.Web.App.Designer"
}
}
}
So where do I need to look in the config to modify this behaviour?
EDIT:
The packages I currently have installed are:
Bracket Highlighter
Browser Refresh
DocBlockr
Emmet
Git
Grunt
JSLint
Nodejs
Package Control
Side Bar
SublimeCodeIntel
SublimeLinter
View in Browser
Web Inspector
(and SublimeServer)
I pretty much got them all from Package Control.
As I newbie, I may need to pair some of these back.
Many thx IA
Simon