Aurelia bundling issue with virtual directory - iis
UPDATE
I found the source of the problem, but i still can't figure it out. Everything loads correctly if the site is http://mysite/vd1/vd2/ and not http://mysite/vd1/vd2 (the correct one has the trailing slash)
Original
I am attempting to publish my first aspnetcore aurelia-app to IIS in a virtual directory http://mysite/vd1/vd2 where vd2 (virtual directory2) is the home of the aurelia-app. However when the browser tries to load the first bundle, aurelia.js, it is looking in the http://mysite/vd1/dist instead of vd2, which returns a 404. I have tried to make the paths relative, but maybe I am missing something? Any help is appreciated and please let me know if more information is needed because i am having problems tracking down the problem.
Index.cshtml
<div aurelia-app="main">
<div class="splash">
<div class="message">#ViewBag.AppTitle</div>
<div class="fa fa-spinner fa-pulse fa-fw"></div>
</div>
<environment names="Development">
<script src="~/jspm_packages/npm/bluebird#3.4.1/js/browser/bluebird.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/jspm_packages/npm/bluebird#3.4.1/js/browser/bluebird.min.js"></script>
</environment>
<script src="~/jspm_packages/system.js"></script>
<script src="~/config.js"></script>
<script>
System.import("aurelia-bootstrapper");
</script>
</div>
bundle.js
var gulp = require('gulp');
var bundler = require('aurelia-bundler');
var bundles = require('../bundles.js');
var config = {
force: true,
baseURL: './wwwroot',
configPath: './wwwroot/config.js',
bundles: bundles.bundles
};
gulp.task('bundle', ['build'], function() {
return bundler.bundle(config);
});
gulp.task('unbundle', function() {
return bundler.unbundle(config);
});
bundles.js
module.exports = {
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": true,
"rev": false
}
},
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-dialog",
"aurelia-event-aggregator",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"aurelia-pal-browser",
"aurelia-validation",
"bootstrap",
"bootstrap/css/bootstrap.min.css!text",
"fetch",
"jquery",
"moment",
"jquery-ui",
"keymirror",
"toastr"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
};
config.js
System.config({
defaultJSExtensions: true,
transpiler: false,
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"aurelia-animator-css": "npm:aurelia-animator-css#1.0.0",
"aurelia-bootstrapper": "npm:aurelia-bootstrapper#1.0.0",
"aurelia-dialog": "npm:aurelia-dialog#1.0.0-beta.3.0.0",
"aurelia-event-aggregator": "npm:aurelia-event-aggregator#1.0.0",
"aurelia-fetch-client": "npm:aurelia-fetch-client#1.0.0",
...
},
bundles: {
"aurelia.js": [
"github:CodeSeven/toastr#2.1.3.js",
"github:CodeSeven/toastr#2.1.3/build/toastr.css!github:systemjs/plugin-css#0.1.31.js",
"github:CodeSeven/toastr#2.1.3/toastr.js",
"github:components/jquery#3.1.1.js",
"github:components/jquery#3.1.1/jquery.js",
"github:components/jqueryui#1.12.1.js",
"github:components/jqueryui#1.12.1/jquery-ui.js",
"github:github/fetch#1.0.0.js",
"github:github/fetch#1.0.0/fetch.js",
"github:twbs/bootstrap#3.3.7.js",
"github:twbs/bootstrap#3.3.7/css/bootstrap.min.css!github:systemjs/plugin-text#0.0.8.js",
"github:twbs/bootstrap#3.3.7/js/bootstrap.js",
"npm:aurelia-animator-css#1.0.0.js",
"npm:aurelia-animator-css#1.0.0/aurelia-animator-css.js",
"npm:aurelia-binding#1.0.9.js",
"npm:aurelia-binding#1.0.9/aurelia-binding.js",
"npm:aurelia-bootstrapper#1.0.0.js",
"npm:aurelia-bootstrapper#1.0.0/aurelia-bootstrapper.js",
"npm:aurelia-dependency-injection#1.2.0.js",
"npm:aurelia-dependency-injection#1.2.0/aurelia-dependency-injection.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/ai-dialog-body.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/ai-dialog-footer.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/ai-dialog-header.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/ai-dialog.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/attach-focus.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/aurelia-dialog.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/dialog-configuration.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/dialog-controller.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/dialog-options.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/dialog-renderer.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/dialog-result.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/dialog-service.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/lifecycle.js",
"npm:aurelia-dialog#1.0.0-beta.3.0.0/renderer.js",
"npm:aurelia-event-aggregator#1.0.0.js",
"npm:aurelia-event-aggregator#1.0.0/aurelia-event-aggregator.js",
"npm:aurelia-fetch-client#1.0.0.js",
"npm:aurelia-fetch-client#1.0.0/aurelia-fetch-client.js",
"npm:aurelia-framework#1.0.7.js",
"npm:aurelia-framework#1.0.7/aurelia-framework.js",
"npm:aurelia-history-browser#1.0.0.js",
"npm:aurelia-history-browser#1.0.0/aurelia-history-browser.js",
"npm:aurelia-history#1.0.0.js",
"npm:aurelia-history#1.0.0/aurelia-history.js",
"npm:aurelia-loader-default#1.0.0.js",
"npm:aurelia-loader-default#1.0.0/aurelia-loader-default.js",
"npm:aurelia-loader#1.0.0.js",
"npm:aurelia-loader#1.0.0/aurelia-loader.js",
"npm:aurelia-logging-console#1.0.0.js",
"npm:aurelia-logging-console#1.0.0/aurelia-logging-console.js",
"npm:aurelia-logging#1.1.0.js",
"npm:aurelia-logging#1.1.0/aurelia-logging.js",
"npm:aurelia-metadata#1.0.2.js",
"npm:aurelia-metadata#1.0.2/aurelia-metadata.js",
"npm:aurelia-pal-browser#1.0.0.js",
"npm:aurelia-pal-browser#1.0.0/aurelia-pal-browser.js",
"npm:aurelia-pal#1.0.0.js",
"npm:aurelia-pal#1.0.0/aurelia-pal.js",
"npm:aurelia-path#1.1.1.js",
"npm:aurelia-path#1.1.1/aurelia-path.js",
"npm:aurelia-polyfills#1.0.0.js",
"npm:aurelia-polyfills#1.0.0/aurelia-polyfills.js",
"npm:aurelia-route-recognizer#1.0.0.js",
"npm:aurelia-route-recognizer#1.0.0/aurelia-route-recognizer.js",
"npm:aurelia-router#1.0.2.js",
"npm:aurelia-router#1.0.2/aurelia-router.js",
"npm:aurelia-task-queue#1.1.0.js",
"npm:aurelia-task-queue#1.1.0/aurelia-task-queue.js",
"npm:aurelia-templating-binding#1.0.0.js",
"npm:aurelia-templating-binding#1.0.0/aurelia-templating-binding.js",
"npm:aurelia-templating-resources#1.0.0.js",
"npm:aurelia-templating-resources#1.0.0/abstract-repeater.js",
"npm:aurelia-templating-resources#1.0.0/analyze-view-factory.js",
"npm:aurelia-templating-resources#1.0.0/array-repeat-strategy.js",
"npm:aurelia-templating-resources#1.0.0/aurelia-hide-style.js",
"npm:aurelia-templating-resources#1.0.0/aurelia-templating-resources.js",
"npm:aurelia-templating-resources#1.0.0/binding-mode-behaviors.js",
"npm:aurelia-templating-resources#1.0.0/binding-signaler.js",
"npm:aurelia-templating-resources#1.0.0/compose.js",
"npm:aurelia-templating-resources#1.0.0/css-resource.js",
"npm:aurelia-templating-resources#1.0.0/debounce-binding-behavior.js",
"npm:aurelia-templating-resources#1.0.0/dynamic-element.js",
"npm:aurelia-templating-resources#1.0.0/focus.js",
"npm:aurelia-templating-resources#1.0.0/hide.js",
"npm:aurelia-templating-resources#1.0.0/html-resource-plugin.js",
"npm:aurelia-templating-resources#1.0.0/html-sanitizer.js",
"npm:aurelia-templating-resources#1.0.0/if.js",
"npm:aurelia-templating-resources#1.0.0/map-repeat-strategy.js",
"npm:aurelia-templating-resources#1.0.0/null-repeat-strategy.js",
"npm:aurelia-templating-resources#1.0.0/number-repeat-strategy.js",
"npm:aurelia-templating-resources#1.0.0/repeat-strategy-locator.js",
"npm:aurelia-templating-resources#1.0.0/repeat-utilities.js",
"npm:aurelia-templating-resources#1.0.0/repeat.js",
"npm:aurelia-templating-resources#1.0.0/replaceable.js",
"npm:aurelia-templating-resources#1.0.0/sanitize-html.js",
"npm:aurelia-templating-resources#1.0.0/set-repeat-strategy.js",
"npm:aurelia-templating-resources#1.0.0/show.js",
"npm:aurelia-templating-resources#1.0.0/signal-binding-behavior.js",
"npm:aurelia-templating-resources#1.0.0/throttle-binding-behavior.js",
"npm:aurelia-templating-resources#1.0.0/update-trigger-binding-behavior.js",
"npm:aurelia-templating-resources#1.0.0/with.js",
"npm:aurelia-templating-router#1.0.0.js",
"npm:aurelia-templating-router#1.0.0/aurelia-templating-router.js",
"npm:aurelia-templating-router#1.0.0/route-href.js",
"npm:aurelia-templating-router#1.0.0/route-loader.js",
"npm:aurelia-templating-router#1.0.0/router-view.js",
"npm:aurelia-templating#1.1.2.js",
"npm:aurelia-templating#1.1.2/aurelia-templating.js",
"npm:aurelia-validation#0.13.1.js",
"npm:aurelia-validation#0.13.1/aurelia-validation.js",
"npm:aurelia-validation#0.13.1/implementation/rules.js",
"npm:aurelia-validation#0.13.1/implementation/standard-validator.js",
"npm:aurelia-validation#0.13.1/implementation/util.js",
"npm:aurelia-validation#0.13.1/implementation/validation-messages.js",
"npm:aurelia-validation#0.13.1/implementation/validation-parser.js",
"npm:aurelia-validation#0.13.1/implementation/validation-rules.js",
"npm:aurelia-validation#0.13.1/property-info.js",
"npm:aurelia-validation#0.13.1/validate-binding-behavior-base.js",
"npm:aurelia-validation#0.13.1/validate-binding-behavior.js",
"npm:aurelia-validation#0.13.1/validate-trigger.js",
"npm:aurelia-validation#0.13.1/validation-controller-factory.js",
"npm:aurelia-validation#0.13.1/validation-controller.js",
"npm:aurelia-validation#0.13.1/validation-error.js",
"npm:aurelia-validation#0.13.1/validation-errors-custom-attribute.js",
"npm:aurelia-validation#0.13.1/validation-renderer-custom-attribute.js",
"npm:aurelia-validation#0.13.1/validator.js",
"npm:jquery#2.2.4.js",
"npm:jquery#2.2.4/dist/jquery.js",
"npm:keymirror#0.1.1.js",
"npm:keymirror#0.1.1/index.js",
"npm:moment#2.14.1.js",
"npm:moment#2.14.1/moment.js"
],
"app-build.js": [
"app.html!github:systemjs/plugin-text#0.0.8.js",
"app.js",
"assignments/assignment-store.js",
"assignments/handler-list.html!github:systemjs/plugin-text#0.0.8.js",
"assignments/handler-list.js",
"assignments/notes.html!github:systemjs/plugin-text#0.0.8.js",
"assignments/notes.js",
"assignments/priority-flags.html!github:systemjs/plugin-text#0.0.8.js",
"assignments/priority-flags.js",
"configuration/http-client.js",
"configuration/router.js",
"configuration/toastr.js",
"constants.js",
"core/attachment-service.js",
"core/http-interceptors.js",
"core/logger.js",
"core/resource-store.js",
"core/store.js",
"main.js",
"register.js",
"registration.html!github:systemjs/plugin-text#0.0.8.js",
"registration.js",
"requests/comment-store.js",
"requests/comments.html!github:systemjs/plugin-text#0.0.8.js",
"requests/comments.js",
"requests/new-request.html!github:systemjs/plugin-text#0.0.8.js",
"requests/new-request.js",
"requests/request-detail.html!github:systemjs/plugin-text#0.0.8.js",
"requests/request-detail.js",
"requests/request-list.html!github:systemjs/plugin-text#0.0.8.js",
"requests/request-list.js",
"requests/request-store.js",
"requests/request.html!github:systemjs/plugin-text#0.0.8.js",
"requests/request.js",
"requests/status-list.html!github:systemjs/plugin-text#0.0.8.js",
"requests/status-list.js",
"requests/view-list.html!github:systemjs/plugin-text#0.0.8.js",
"requests/view-list.js",
"resources/dialogs/validation-list.html!github:systemjs/plugin-text#0.0.8.js",
"resources/dialogs/validation-list.js",
"resources/elements/attachments.html!github:systemjs/plugin-text#0.0.8.js",
"resources/elements/badge-list.html!github:systemjs/plugin-text#0.0.8.js",
"resources/elements/badge-list.js",
"resources/elements/color-flag.html!github:systemjs/plugin-text#0.0.8.js",
"resources/elements/color-flag.js",
"resources/elements/date-picker.html!github:systemjs/plugin-text#0.0.8.js",
"resources/elements/date-picker.js",
"resources/elements/drop-menu.html!github:systemjs/plugin-text#0.0.8.js",
"resources/elements/menu-button.html!github:systemjs/plugin-text#0.0.8.js",
"resources/elements/menu-button.js",
"resources/elements/progress-bar.html!github:systemjs/plugin-text#0.0.8.js",
"resources/elements/progress-bar.js",
"resources/index.js",
"resources/value-converters/date-format.js",
"resources/value-converters/groupBy.js",
"resources/value-converters/sort.js",
"settings/app-level/app-settings.html!github:systemjs/plugin-text#0.0.8.js",
"settings/app-level/app-settings.js",
"settings/app-level/handlers.html!github:systemjs/plugin-text#0.0.8.js",
"settings/app-level/handlers.js",
"settings/app-level/new-handler.html!github:systemjs/plugin-text#0.0.8.js",
"settings/app-level/new-handler.js",
"settings/global-settings.html!github:systemjs/plugin-text#0.0.8.js",
"settings/index.js",
"settings/member-level/member-settings.html!github:systemjs/plugin-text#0.0.8.js",
"settings/member-level/member-settings.js",
"settings/member-settings.html!github:systemjs/plugin-text#0.0.8.js",
"settings/member-store.js",
"settings/settings-store.js",
"shell/handler-menu.html!github:systemjs/plugin-text#0.0.8.js",
"shell/handler-menu.js",
"shell/nav-bar.html!github:systemjs/plugin-text#0.0.8.js",
"shell/request-menu.html!github:systemjs/plugin-text#0.0.8.js",
"shell/request-menu.js",
"shell/search-bar-service.js",
"shell/search-bar.html!github:systemjs/plugin-text#0.0.8.js",
"shell/search-bar.js",
"shell/settings-menu.html!github:systemjs/plugin-text#0.0.8.js",
"shell/settings-menu.js",
"utils.js"
]
},
depCache: {
"app.js": [
"./configuration/http-client",
"./configuration/router",
"aurelia-framework",
"aurelia-event-aggregator",
"aurelia-router"
],
"assignments/assignment-store.js": [
"aurelia-framework",
"../core/resource-store"
],
"assignments/handler-list.js": [
"../settings/member-store",
"aurelia-framework"
],
"assignments/notes.js": [
"../settings/member-store",
"./assignment-store",
"aurelia-framework",
"jquery"
],
"assignments/priority-flags.js": [
"../settings/settings-store",
"aurelia-framework"
],
"configuration/http-client.js": [
"aurelia-fetch-client",
"aurelia-framework"
],
"configuration/router.js": [
"../settings/settings-store",
"aurelia-framework",
"aurelia-router"
],
"configuration/toastr.js": [
"toastr"
],
"constants.js": [
"keymirror"
],
"core/http-interceptors.js": [
"aurelia-validation",
"../core/logger",
"aurelia-framework"
],
"core/logger.js": [
"toastr"
],
"core/resource-store.js": [
"aurelia-fetch-client",
"aurelia-framework",
"fetch"
],
"core/store.js": [
"aurelia-event-aggregator",
"aurelia-framework"
],
"main.js": [
"./core/http-interceptors",
"aurelia-framework",
"./core/logger.js",
"bootstrap",
"./configuration/toastr"
],
"register.js": [
"./core/http-interceptors",
"bootstrap",
"./configuration/toastr"
],
"registration.js": [
"aurelia-framework",
"aurelia-event-aggregator",
"./constants",
"./configuration/http-client",
"./settings/settings-store",
"aurelia-pal"
],
"requests/comment-store.js": [
"../core/logger",
"../core/resource-store",
"aurelia-fetch-client",
"aurelia-framework"
],
"requests/comments.js": [
"./comment-store",
"../settings/member-store",
"aurelia-framework"
],
"requests/new-request.js": [
"aurelia-dialog",
"./request-store",
"aurelia-framework",
"aurelia-validation"
],
"requests/request-detail.js": [
"jquery",
"./request-store",
"aurelia-framework"
],
"requests/request-list.js": [
"./request-store",
"../shell/search-bar-service",
"../resources/dialogs/validation-list",
"aurelia-framework",
"aurelia-validation",
"aurelia-dialog",
"aurelia-event-aggregator",
"../constants"
],
"requests/request-store.js": [
"aurelia-framework",
"../core/resource-store",
"../core/attachment-service",
"aurelia-fetch-client",
"../core/logger",
"aurelia-event-aggregator",
"../core/store",
"../constants"
],
"requests/request.js": [
"aurelia-framework",
"moment"
],
"requests/status-list.js": [
"../settings/settings-store",
"../settings/member-store",
"aurelia-framework"
],
"requests/view-list.js": [
"shell/search-bar-service",
"../settings/member-store",
"aurelia-framework"
],
"resources/dialogs/validation-list.js": [
"aurelia-dialog",
"aurelia-framework",
"aurelia-validation"
],
"resources/elements/badge-list.js": [
"aurelia-framework"
],
"resources/elements/color-flag.js": [
"aurelia-framework"
],
"resources/elements/date-picker.js": [
"jquery",
"moment",
"aurelia-framework",
"jquery-ui"
],
"resources/elements/menu-button.js": [
"aurelia-framework"
],
"resources/elements/progress-bar.js": [
"aurelia-framework"
],
"resources/value-converters/date-format.js": [
"moment"
],
"resources/value-converters/sort.js": [
"../../utils.js",
"moment"
],
"settings/app-level/app-settings.js": [
"aurelia-framework",
"aurelia-event-aggregator",
"../../constants",
"../settings-store"
],
"settings/app-level/handlers.js": [
"../member-store",
"aurelia-framework"
],
"settings/app-level/new-handler.js": [
"aurelia-dialog",
"../member-store",
"aurelia-framework",
"aurelia-validation"
],
"settings/index.js": [
"./member-store",
"aurelia-framework"
],
"settings/member-level/member-settings.js": [
"aurelia-framework",
"../member-store"
],
"settings/member-store.js": [
"aurelia-fetch-client",
"aurelia-framework",
"../core/logger",
"../core/resource-store",
"../core/store",
"../constants",
"aurelia-event-aggregator"
],
"settings/settings-store.js": [
"../core/resource-store",
"aurelia-framework",
"aurelia-fetch-client",
"../core/logger",
"aurelia-event-aggregator",
"../core/store",
"../constants"
],
"shell/handler-menu.js": [
"aurelia-dialog",
"../settings/app-level/new-handler",
"../settings/member-store",
"aurelia-framework"
],
"shell/request-menu.js": [
"aurelia-dialog",
"../requests/new-request",
"aurelia-framework"
],
"shell/search-bar.js": [
"shell/search-bar-service",
"aurelia-framework"
],
"shell/settings-menu.js": [
"../settings/member-store",
"../settings/settings-store",
"aurelia-framework"
],
"utils.js": [
"moment"
]
}
});
Wonderful, I am glad it works!
Just for feature reference of someone else having the same issue:
Try adding this to the head of the HTML <base href="/vd1/vd2/"> that will resolve the issue.
Or add <base href="#Url.Content("~/")" /> to _Layout.cshtml to let asp.net generate this path for you.
Related
ESLint + Prettier formatOnSave does work but not Alt + Shift + F
I've created a separate repo with shared eslint config for different projects in my org:
module.exports = {
parser: '#typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'airbnb-base',
'plugin:#typescript-eslint/recommended',
'prettier',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:jest/recommended',
'plugin:prettier/recommended',
],
plugins: ['#typescript-eslint', 'jest', 'prettier'],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
env: {
node: true,
es6: true,
jest: true,
},
rules: {
'eol-last': ['error', 'always'],
'newline-before-return': 'error',
'import/extensions': 0,
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: false,
optionalDependencies: false,
peerDependencies: false,
},
],
'no-restricted-imports': [
'error',
{
patterns: [
{
group: ['.prisma/*'],
message: 'Use #prisma instead of .prisma',
},
],
},
],
'semi': 'error',
'comma-dangle': 'off',
'#typescript-eslint/comma-dangle': ['error', 'always-multiline'],
'indent': 'off',
'quotes': 'off',
'#typescript-eslint/quotes': [
'error',
'single',
{
allowTemplateLiterals: true,
},
],
'#typescript-eslint/no-shadow': ['error'],
'arrow-parens': ['error', 'always'],
'#typescript-eslint/indent': [
'error',
2,
{
/**
* This should stay here until https://github.com/typescript-eslint/typescript-eslint/issues/1824 is fixed
* as currently it forces you to add additional double-space indent to function arguments with decorators
*/
ignoredNodes: ['FunctionExpression'],
SwitchCase: 1,
},
],
'#typescript-eslint/no-non-null-assertion': 'off',
'#typescript-eslint/no-unused-vars': [
'warn',
{
argsIgnorePattern: '^_',
},
],
'spaced-comment': ['error', 'always'],
'no-multiple-empty-lines': [
'error',
{
max: 2,
maxEOF: 0,
},
],
'import/order': [
'error',
{
'groups': [['external', 'internal', 'builtin'], ['sibling', 'parent'], 'index', 'object'],
'pathGroupsExcludedImportTypes': ['builtin'],
'newlines-between': 'always',
'alphabetize': {
order: 'asc',
caseInsensitive: true,
},
},
],
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.ts', '.jsx', '.tsx'],
},
},
},
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'no-undef': 'off',
},
},
{
files: ['next.config.js'],
rules: {
'#typescript-eslint/no-var-requires': 'off',
},
},
],
};
Then I published this package to my private registry and installed it on the other repository where I used it to extend from in that repo's eslint config:
module.exports = {
extends: '#flaut-org/eslint-config',
ignorePatterns: ['.eslintrc.js'],
rules: {
'import/order': [
'error',
{
'groups': [['external', 'internal', 'builtin'], ['sibling', 'parent'], 'index', 'object'],
'pathGroups': [
{
pattern: '#nestjs/**',
group: 'external',
position: 'after',
},
],
'pathGroupsExcludedImportTypes': ['builtin'],
'newlines-between': 'always',
'alphabetize': {
order: 'asc',
caseInsensitive: true,
},
},
],
},
};
But for some reason autoformatting didn't work in VSCode. I've configured my default formatter to be Prettier - Code formatter and retried - didn't do the trick. Then I've added the following lines to my ./vscode/settings.json config:
{
"eslint.validate": [
"javascript",
"typescript"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
And VSCode actually started auto-formatting it on Ctrl + S, but Alt + Shift + F combination still doesn't work. I've checked both Prettier and ESLint logs and there were no errors and warnings whatsoever. What am I missing that does not allow me to use Alt + Shift + F combination ?
Jest tests crash when due to #babylon/core es6 syntax
I'm trying to load a 3d scene in react with babylonjs. And this works excellently in my React app but I am getting failed tests from tests that have previously been passing with the following errors. I have tried exempting babylon from transformations but I am still failing.
● Test suite failed to run
Jest encountered an unexpected token
SyntaxError: Unexpected token export
at compileFunction (<anonymous>)
4 | import styled, { withTheme } from 'styled-components'
5 | import { observer, inject } from 'mobx-react'
> 6 | import * as BABYLON from '#babylonjs/core'
| ^
7 | import { GLTFFileLoader } from '#babylonjs/loaders/glTF/glTFFileLoader'
8 | import '#babylonjs/loaders/glTF'
9 | import '#babylonjs/materials/custom'
Here is my webpack configuration file
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
rootMode: 'upward',
presets: [
'#babel/preset-env',
'#babel/react',
{
plugins: [
'#babel/plugin-proposal-class-properties',
],
},
],
},
},
],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
],
},
mode: 'development',
devtool: 'inline-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
devServer: {
contentBase: path.join(__dirname, 'public'),
hot: true,
port: 3000,
open: true,
historyApiFallback: true,
},
}
Here is my babel configuration.
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }],
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-transform-runtime",
[
"styled-components",
{ "ssr": false, "displayName": true, "preprocess": false }
]
],
"env": {
"production": {
"plugins": [
["react-remove-properties", { "properties": ["data-testid"] }]
]
},
"test": {
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
]
}
}
}
Here is my jest configuration
{
"setupFilesAfterEnv": ["jest-expect-message"],
"transformIgnorePatterns": ["/node_modules/(?!#babylonjs)"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.ts$": "ts-jest"
},
"globals": {
"NODE_ENV": "test"
}
}
I found since I was in a mono-repo structure, I had to change from .babelrc to babel.config.js as recommended in jest docs. This solved the issue of transforming the esNext syntax in the #babylonjs modules
For those who aren't using babel this can be achieved with vanilla ts-jest. Be warned, this can add up to a minute to the initial load time for your tests because jest has to transform the babylonjs library.
const config = {
...
//SLOW - transform javascript
preset: 'ts-jest/presets/js-with-ts-esm',
//SLOW - transform node modules
transformIgnorePatterns: []
}
``
Multiple mongoose pre save middleware
I'd like to use multiple pre-save mongoose Middleware for a single schema, is this possible?
Example:
var schema = new Schema(..);
schema.pre('save', function(next) {
// do stuff
next();
});
schema.pre('save', function(next) {
// do another thing
next();
});
INDEED i can. I inspected the schema object and found the following property: callQueue: [ [ 'pre', [Object] ], [ 'pre', [Object] ], [ 'pre', [Object] ], [ 'pre', [Object] ], [ 'pre', [Object] ], [ 'pre', [Object] ], [ 'pre', [Object] ] ],
karma-browserify coverage reports contain file include paths instead of source code
Using karma-browserify to do unit tests with Jasmine. The tests correctly run but the coverage reports show file include paths instead of source code. You can reproduce this by installing the following project and run 'gulp unit':
https://github.com/bshack/shackstack
Here is an example of the coverage report contents:
typeof require === "function" && require("/xxx/xxx/xxx/shackstack/app/media/script/service/utilities.js");
Here is my karma.config:
module.exports = function(karma) {
'use strict';
karma.set({
basePath: '',
frameworks: [
'jasmine',
'browserify'
],
files: [{
pattern: 'app/media/script/service/*.js',
included: true
},
{
pattern: 'app/media/test/spec/*Spec.js',
included: true
}],
reporters: [
'progress',
'coverage'
],
preprocessors: {
'app/media/script/service/*.js': [
'browserify',
'coverage'
],
'app/media/test/spec/*Spec.js': [
'browserify'
]
},
browsers: [
//'Chrome',
//'Firefox',
//'Safari',
'PhantomJS'
],
singleRun: false,
autoWatch: false,
// browserify configuration
browserify: {
debug: true,
transform: [
'brfs',
'browserify-shim'
]
},
coverageReporter: {
type: 'html',
dir: 'app/report/istanbul/',
subdir: '.'
},
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000
});
};
any thoughts?
Fixed, basically you don't use karma coverage as you would normally, instead you have to use istanbul as a browserify transform.
var istanbul = require('browserify-istanbul');
module.exports = function(karma) {
'use strict';
karma.set({
basePath: '',
frameworks: [
'jasmine',
'browserify'
],
files: [{
pattern: 'app/media/script/service/*.js'
},
{
pattern: 'app/media/test/spec/*Spec.js'
}],
reporters: [
'progress',
'coverage'
],
preprocessors: {
'app/media/script/service/*.js': [
'browserify'
],
'app/media/test/spec/*Spec.js': [
'browserify'
]
},
browsers: [
//'Chrome',
//'Firefox',
//'Safari',
'PhantomJS'
],
singleRun: false,
autoWatch: false,
browserify: {
debug: true,
transform: [
'brfs',
'browserify-shim',
istanbul({
ignore: ['**/node_modules/**']
})
]
},
coverageReporter: {
type: 'html',
dir: 'app/report/istanbul/',
subdir: '.'
},
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000
});
};
Error after optimizing using requirejs optimizer
I am getting following error
uncaught exception: Please include Backbone.ModelBinder.js before Backbone.CollectionBinder.js
after doing
node r.js -o build.js
My build.js file is
({
"mainConfigFile": 'js/main.js',
"name": "main",
"include": [
"lib/require/require-with-comments.js"
],
"exclude": [],
"optimize": "uglify2",
"out": "main-built.js",
"insertRequire": [
"js/main"
]
})
My require config is as follows
require.config({
// The shim config allows us to configure dependencies for
// scripts that do not call define() to register a module
urlArgs: "bust=" + (new Date()).getTime(),
shim: {
'underscore': {
exports: '_'
},
'bootstrap': {
deps: [
'jquery'
]
},
'backbone': {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}, 'handlebars': {
exports: 'Handlebars'
}, 'handlebarsview': {
deps: [
'backbone',
'handlebars'
],
exports: 'HandlebarsView'
}, 'highcharts': {
deps: [
'jquery'
],
exports: 'highcharts'
}
, 'collectionbinderview': {
deps: [
'backbone',
'jquery',
'underscore',
'modelbinderview'
]
}, 'purl' : {
deps : ['jquery']
}
, 'select2': {
deps: [
'jquery'
],
exports: 'select2'
}
, 'customSelect': {
deps: [
'jquery'
],
exports: 'customSelect'
}
, 'datepicker': {
deps: [
'jquery',
'momentjs'
],
exports: 'datepicker'
}
},
paths: {
jquery: 'lib/jquery/jquery.min',
bootstrap: 'lib/bootstrap/bootstrap',
underscore: 'lib/lodash/lodash.min',
backbone: 'lib/backbone/backbone',
text: 'lib/require/text',
handlebars: 'lib/view/hacked-handlebars-1.0.0',
handlebarsview: 'lib/view/backbone.handlebars',
collectionbinderview: 'lib/view/Backbone.CollectionBinder',
modelbinderview: 'lib/view/Backbone.ModelBinder',
highcharts: 'lib/charting/highcharts',
momentjs: 'lib/view/moment',
select2: 'lib/select2/select2',
customSelect: 'lib/customSelect/customSelect',
datepicker: 'lib/view/datepicker',
purl : 'lib/purl/purl'
}
});
Can anyone please tell me what wrong am I doing?
collectionbinderview: 'lib/view/Backbone.CollectionBinder', modelbinderview: 'lib/view/Backbone.ModelBinder', Try to switch them. Place ModelBinder before CollectionBinder.
This problem occurred because CollectionBinder executed as soon as it was loaded, whereas ModelBinder was an AMD and thus not yet defined. In short CollectionBinder was not an AMD library. I got above solution from following issue: https://github.com/theironcook/Backbone.ModelBinder/pull/111 and commit is https://github.com/rweng/Backbone.ModelBinder/commit/9e93e7c9236ccef71c87a3dc4023910f9ac03803