Aurelia-cli (alameda) au run as proxy


#1

I just removed webpack from my app - hooray!
Installed the alameda builder from aurelia-cli 1.0.0.beta13
Other than a couple of minor tweaks to requiring css and font-awesome it runs great - about a million time faster than webpack/aspnet core/hmr.

My only problem is that I would like au run to serve up the files from the server already running at https://5001 (dotnet run).

I copied and pasted the code I found at https://stackoverflow.com/questions/51182109/setup-to-develop-aurelia-using-systemjs-and-transpile-ts-files-on-browser/51182721#51182721,
installed connect-history-api-fallback and http-proxy-middleware, and the @types

However running au run gives this error:

C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\aurelia_project\tasks\run.ts:13
var backendProxy = http_proxy_middleware_1["default"]([
                                                     ^

TypeError: http_proxy_middleware_1.default is not a function
    at Object.<anonymous> (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\aurelia_project\tasks\run.ts:13:54)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.require.extensions..ts (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\lib\project.js:239:19)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at process.nextTick (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\lib\commands\gulp.js:28:43)
    at process._tickCallback (internal/process/next_tick.js:61:11)

#2

I found another way to do it with the original run.ts by using the browserSync.proxy

let serve = gulp.series(
  build,
  done => {
    browserSync({
      online: false,
      open: CLIOptions.hasFlag('open'),
      port: project.platform.port,
      logLevel: 'silent',
      proxy: {
        target: "https://localhost:5001",
      }
      // server: {
      //   baseDir: [project.platform.baseDir],
      //   middleware: [historyApiFallback(), function(req, res, next) {
      //     res.setHeader('Access-Control-Allow-Origin', '*');
      //     next();
      //   }]
      // }
    }, function (err, bs) {
      if (err) return done(err);
      let urls = bs.options.get('urls').toJS();
      log(`Application Available At: ${urls.local}`);
      log(`BrowserSync Available At: ${urls.ui}`);
      done();
    });
  }
);

and changing aurelia.json

  "platform": {
    "id": "aspnetcore",
    "displayName": "ASP.NET Core",
    "port": 9000,
    "index": "wwwroot/index.html",
    "baseDir": "./wwwroot",
    "baseUrl": "scripts",
    "output": "wwwroot/scripts"
  },

This works fine with the minor caveat that I get a not secure warning from Chrome - I guess it’s not picking up the developer certificate.


#3

First, the run.js I shared on stackoverflow is in exnext, you probably need to adjust the import to

import * as proxy from 'http-proxy-middleware';

Great the browser-sync internal proxy works for you.

I tried browser-sync proxy before, as you know, it cannot work together with server.baseDir. I guess you have all your static resources available at https://localhost:5001. I could not use it because my backend doesn’t see my front-end project folder.


#4

@jeremyholt Could you provide a little more info on what you did for CSS?

Figured it out. Path definitions for imports were all the issues.

As well, when I tried shifting my project over by moving my project src folder over it cannot find the resources folder or anything under it for attributes, value-converters, etc. Did you have to update the index or change something there as well? (using the standard .feature('resources') in main.ts)

Example of some of the errors I am getting:
ERROR [DependencyInclusion] Error: could not find “styles.css” in package css
WARN [PackageAnalyzer] The “font-awesome” package has no valid main file, fall back to index.js.
INFO [Bundler] Auto tracing package: 4.7.0 font-awesome
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of resources:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for “resources”
ERROR [Bundler] Unable to analyze resources
INFO [Bundler] Error: Unable to find package metadata (package.json) of resources
ERROR [Bundler] Failed to add Nodejs module resources/attributes/masked-numpad.css
INFO [Bundler] Error: Unable to find package metadata (package.json) of resources
<edit: never fails I find the fix for something after I post…some of the paths were just different and needed updating>


#5

Sorry for delay in replying, but I’ve just spent the last 5 days struggling to dockerize my app and publish it to Azure. In the end I gave up!!

<template>
  <require from="@fortawesome/fontawesome-pro/css/all.min.css"></require>
  <require from="bootstrap/dist/css/bootstrap.min.css"></require>
  <require from="izitoast/dist/css/iziToast.min.css"></require>

  <require from="./styles/rdash.css"></require>
  <require from="./styles/style.css"></require>
  <require from="./styles/print.css"></require>

  <div class="container">
    <nav-menu router.bind="router"></nav-menu>
    <div show.bind="busy.active > 0">
      <div class="spinner">
        <i class="fas fa-spin fa-spinner fa-3x"></i>
      </div>
      <div class="spinner-blocked"></div>
    </div>

    <router-view></router-view>

  </div>

</template>

Plus for FontAwesome

In your aurelia.json

    "copyFiles": {
      "node_modules/@fortawesome/fontawesome-pro/webfonts/*": "wwwroot/@fortawesome/fontawesome-pro/webfonts"
    },

#6

Thanks @jeremyholt!
Sorry to hear about your docker problems.


#7

Probably not the right place here for me to ask for help - but why one earth is it so bloody complicated???


#8

It is ironic :smile: docker was designed to simplify deployment…


#9

Yeah, yeah.

Killing myself trying to load a certificate into the container so that I can access my dB (ravenDB).
Googled and just arcane mumbo jumbo for Linux which I don’t know at all. Even had to look up what ls means!

Trying to get my user secrets from azure vault into the container…

Not understanding why the environmental variables in docker-compose were being ignored. Wasting hours before realising that the .env file is just that and not a file with a name.

I just gave up in the end …

I’m fairly persistent and will work through all kinds of options before coming here asking for help.

The problem with docker is I don’t even know what questions I should be asking.

Maybe it’s just me but there seems to be a snarky tone to answers on SO when the user is evidently a Windows user and clearly doesn’t know Linux.

And I used to complain about Aurelia documentation :smile:

Apologies for my rant…


#10

Running aurelia-cli beta13 - alameda

au run often hangs just after a compilation error in the code.

 error:
   { Error: Line 220: Unexpected token ;
       at ErrorHandler.constructError (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:5012:22)
       at ErrorHandler.createError (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:5028:27)
       at Parser.unexpectedTokenError (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:1985:39)
       at Parser.throwUnexpectedToken (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:1995:21)
       at Parser.parseIdentifierName (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:2831:19)
       at Parser.parseLeftHandSideExpressionAllowCall (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:2906:38)
       at Parser.inheritCoverGrammar (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:2285:37)
       at Parser.parseUpdateExpression (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:3004:26)
       at Parser.parseUnaryExpression (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:3048:26)
       at Parser.inheritCoverGrammar (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:2285:37)
     index: 12081,
     lineNumber: 220,
     description: 'Unexpected token ;' },
  duration: [ 0, 326185400 ],
  time: 1550218045686 }
[08:07:30] modules\costings\costings-edit.ts was changed
Watcher: Adding path src\modules\costings\costings-edit.ts to pending build changes...
Watcher: A build is already in progress, deferring change detection...
[08:07:36] modules\costings\costings-edit.ts was changed
Watcher: Adding path src\modules\costings\costings-edit.ts to pending build changes...
Watcher: A build is already in progress, deferring change detection...
[08:07:39] modules\costings\costings-edit.ts was changed
Watcher: Adding path src\modules\costings\costings-edit.ts to pending build changes...
Watcher: A build is already in progress, deferring change detection...
[08:07:40] modules\costings\costings-edit.ts was changed
Watcher: Adding path src\modules\costings\costings-edit.ts to pending build changes...
Watcher: A build is already in progress, deferring change detection...
[08:07:43] modules\costings\costings-edit.ts was changed

The compilation error is expected. However, is there some setting in the config files that will help avoid the A build is already in progress, deferring change detection ...?

I just need to Ctrl-C and restart ‘au run’

I guess when I was using Webpack with HMR I was getting the same problem - the page would take forever to update from changes to the code - which is why I switched over to alameda.


#11

The cli only sees code transpiled by ts.
Does ts accidentally generate intermittent invalid code in watch mode?

If you can find a way to reproduce it in a small repo, I might be able to peek the invalid js code.


#12

Yes - ts does generate invalid code in watch mode. Gulp generates a compilation failed message - which is of course exactly what I want - I want to be warned that my code won’t compile.

Most times, au run or au build --watch recovers itself, but sometimes I get the A build is already in progress, deferring change detection... message.

This used to happen with webpack as well - mostly when I was importing a new file import {xxx} from "myFiles" and I think alameda struggles with this sometimes.

I’m just guessing here but I think the sequence of events for au build --watch is

  1. Build the app
  2. Watch for changes
  3. Warn on ts compilation error
  4. Build app - I think that while its building the app, and there are still compilation errors it goes into “defer mode”.
  5. When the compilation errors are fixed, it should come out of “defer mode” and try to build again - but it doesn’t.

Maybe it needs some kind of timer to try to rebuild after it entered “defer mode”.

I would gladly suffer an extra couple of rebuilds if I could avoid this problem…

As to specific moments when this happens - I’m not 100% sure it’s exactly this but it could be something like.

I write the method:

public async activate(){
   this.loadBankList()
}

but I haven’t written ’loadBankList() yet - so I get a compilation error.

I now write

private async loadBankList(){
... do something
}

and TS compiles fine . Alameda is now in “defer mode”.

This is the stack trace just now

Finished 'writeBundles'
Application Available At: https://localhost:9000
BrowserSync Available At: http://localhost:3001
[12:45:12] modules\production\production-edit.ts was changed
Watcher: Adding path src\modules\production\production-edit.ts to pending build changes...
Watcher: Running transpile tasks on next build...
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'configureEnvironment'...
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
src\modules\production\production-edit.ts(128,49): error TS1003: Identifier expected.
TypeScript: 1 syntax error
TypeScript: emit succeeded (with errors)
[12:45:16] gulp-notify: [Error running Gulp] Error: TypeScript: Compilation failed
Finished 'buildTypeScript'
Starting 'writeBundles'...
INFO [Bundler] Tracing files ...
ERROR [BundledSource] Could not convert to AMD module, skipping C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\src\modules\production\production-edit.js
ERROR [BundledSource] Error was: SyntaxError: unknown: Unexpected token (209:74)

  207 |                             bank = this.banksList.find(function (c) { return c.id === _this.auth.payload.bankId; });
  208 |                             if (bank) {
> 209 |                                 this.bankImageUrl = bank.imageDataUrls[0].;
      |                                                                           ^
  210 |                             }
  211 |                             return [2 /*return*/];
  212 |                     }
ERROR [Bundler] Failed to do transforms
INFO [Bundler] Error: Line 209: Unexpected token ;
{ uid: 20,
  name: 'writeBundles',
  branch: false,
  error:
   { Error: Line 209: Unexpected token ;
       at ErrorHandler.constructError (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:5012:22)
       at ErrorHandler.createError (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:5028:27)
       at Parser.unexpectedTokenError (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:1985:39)
       at Parser.throwUnexpectedToken (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:1995:21)
       at Parser.parseIdentifierName (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:2831:19)
       at Parser.parseLeftHandSideExpressionAllowCall (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:2906:38)
       at Parser.inheritCoverGrammar (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:2285:37)
       at Parser.parseUpdateExpression (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:3004:26)
       at Parser.parseUnaryExpression (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:3048:26)
       at Parser.inheritCoverGrammar (C:\Visual Studio\FactoryCashFlow\FactoryCashFlow\node_modules\aurelia-cli\node_modules\esprima\dist\esprima.js:2285:37)
     index: 11460,
     lineNumber: 209,
     description: 'Unexpected token ;' },
  duration: [ 0, 580632599 ],
  time: 1550234717154 }
[12:45:17] modules\production\production-edit.ts was changed
Watcher: Adding path src\modules\production\production-edit.ts to pending build changes...
Watcher: A build is already in progress, deferring change detection...
[12:45:20] modules\users\users-edit.ts was changed
Watcher: Adding path src\modules\users\users-edit.ts to pending build changes...
Watcher: A build is already in progress, deferring change detection...

Of course the compilation errors are quite correct.
You can see as [12:45:17; that its reading in the newly edited production-edit.ts file, but its apparently trying to finish its previous build.

Maybe it should cancel any previous builds the moment it observes that a file has been edited and then start again?

Hey - I’m way way out of of comfort zone making comments to you about this :smile:


#13

Something is not right with gulp-typescript.

When gulp-babel fails, it doesn’t push invalid result through, it raise an exception.
Our setup use gulp-plumber to print the exception but avoid stopping gulp pipeline, which is what we need in watch mode.

With gulp-babel, cli bundler never sees an invalid transpiled js file.

But gulp-typescript seems not only raised an exception on code error, but also pushed an invalid vinyl file to next stage of gulp pipeline. That’s just wrong.

I will do some study on gulp-typescript when I got time. I hope to fix it at gulp-typescript (which is the right place for the fix), if not, I will improve cli bundler to tolerant invalid content. (maybe I will do both)


#14

Hi - is there any update on this?


#15

Nope. I am bit busy on my day job :frowning:

If you can create a github issue, it is enough to just contain a link to here, it can prevent me from forgetting it. Thx!


#16

OK - didn’t mean to be a nag :smile:

Issue at https://github.com/aurelia/cli/issues/1059