Angular, React, and Vue sample.

[IEvangelist]

A sample that shows how to use .NET Aspire with Angular, React, and Vue.

.NET Aspire dashboard

Angular app

React app

Vue app

[OwenCross289]

When checking out this commit, I followed the readme, ran npm install for all 3 of the JS projects. When running the Aspire AppHost project, the Angular app fails to start: it gets a NaN as a port, with this logged.

> [email protected] start
> ng serve --port %PORT%
Node.js version v21.1.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.
/Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/rxjs/dist/cjs/internal/util/reportUnhandledError.js:13
            throw err;
            ^
RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received type number (NaN).
    at validatePort (node:internal/validators:424:11)
    at Server.listen (node:net:2000:5)
    at /Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/@angular-devkit/build-angular/src/utils/check-port.js:55:14
    at new Promise (<anonymous>)
    at checkPort (/Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/@angular-devkit/build-angular/src/utils/check-port.js:27:12)
    at initialize (/Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/@angular-devkit/build-angular/src/builders/dev-server/builder.js:112:63) {
  code: 'ERR_SOCKET_BAD_PORT'
}
Node.js v21.1.0

Set up:
Aspire preview 2 workload installed.
Running through dotnet run in AppHost proj
MacOs: 14.2.1
Node: v21.1.0
npm ng --version: 10.2.3

Sorry if I am being too early on this

[IEvangelist]

When checking out this commit, I followed the readme, ran npm install for all 3 of the JS projects. When running the Aspire AppHost project, the Angular app fails to start: it gets a NaN as a port, with this logged.

> [email protected] start
> ng serve --port %PORT%
Node.js version v21.1.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.
/Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/rxjs/dist/cjs/internal/util/reportUnhandledError.js:13
            throw err;
            ^
RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received type number (NaN).
    at validatePort (node:internal/validators:424:11)
    at Server.listen (node:net:2000:5)
    at /Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/@angular-devkit/build-angular/src/utils/check-port.js:55:14
    at new Promise (<anonymous>)
    at checkPort (/Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/@angular-devkit/build-angular/src/utils/check-port.js:27:12)
    at initialize (/Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/@angular-devkit/build-angular/src/builders/dev-server/builder.js:112:63) {
  code: 'ERR_SOCKET_BAD_PORT'
}
Node.js v21.1.0

Set up: Aspire preview 2 workload installed. Running through dotnet run in AppHost proj MacOs: 14.2.1 Node: v21.1.0 npm ng --version: 10.2.3

Sorry if I am being too early on this

Ah, I think that might be an issue with Windows. I passed the port to the ng serve --port switch using %PORT%, if you're not on Windows that won't work... Try changing that to ng serve --port $PORT instead.

[OwenCross289]

When checking out this commit, I followed the readme, ran npm install for all 3 of the JS projects. When running the Aspire AppHost project, the Angular app fails to start: it gets a NaN as a port, with this logged.

[email protected] start

ng serve --port %PORT%

Node.js version v21.1.0 detected.

Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.

/Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/rxjs/dist/cjs/internal/util/reportUnhandledError.js:13

        throw err;

        ^

RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received type number (NaN).

at validatePort (node:internal/validators:424:11)

at Server.listen (node:net:2000:5)

at /Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/@angular-devkit/build-angular/src/utils/check-port.js:55:14

at new Promise (<anonymous>)

at checkPort (/Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/@angular-devkit/build-angular/src/utils/check-port.js:27:12)

at initialize (/Users/owen/Developer/aspire-samples/samples/AspireWithJavaScript/AspireJavaScript.Angular/node_modules/@angular-devkit/build-angular/src/builders/dev-server/builder.js:112:63) {

code: 'ERR_SOCKET_BAD_PORT'

}

Node.js v21.1.0

Set up: Aspire preview 2 workload installed. Running through dotnet run in AppHost proj MacOs: 14.2.1 Node: v21.1.0 npm ng --version: 10.2.3

Sorry if I am being too early on this

Ah, I think that might be an issue with Windows. I passed the port to the ng serve --port switch using %PORT%, if you're not on Windows that won't work... Try changing that to ng serve --port $PORT instead.

That, fixed it! Thanks!

[IEvangelist]

Hey @OwenCross289 - I fixed the issue by using run-script-os, thanks for catching this!

[mitchdenny]

LGTM. I do wonder whether we could make these projects show up in VS via the esproj project types.

[IEvangelist]

LGTM. I do wonder whether we could make these projects show up in VS via the esproj project types.

Yeah, that would be really cool!