Base solution for your next web application

Activities of "pliaspzero"

and one more question -for production deployment - function build(done) { should be used - not function buildDev(done) {

correct?

function build(done) { production = true;

fillScriptBundles();
fillStyleBundles();

var scriptTasks = createScriptBundles();
var styleTasks = createStyleBundles();

var stream = merge(scriptTasks.concat(styleTasks));

return !stream.isEmpty() ? stream : done();

}

function buildDev(done) { fillScriptBundles(); fillStyleBundles();

var scriptTasks = createScriptBundles();
var styleTasks = createStyleBundles();

console.log('Dynamic bundles are being created.');

var stream = merge(scriptTasks.concat(styleTasks));

return !stream.isEmpty() ? stream : done();

}

by the way get :

C:...e.Web.Host>npm run create-bundles npm error Missing script: "create-bundles" npm error npm error To see a list of scripts, run: npm error npm run npm error A complete log of this run can be found in: i\AppData\Local\npm-cache_logs\2024-11-14T12_26_49_894Z-debug-0.log

Dok Ref: https://docs.aspnetzero.com/aspnet-core-angular/latest/Deployment-Angular

I’m seeking clarification on the exact steps and order for deploying an ASPZERO V13.4 application that uses Angular and ASP.NET Core. Based on the documentation, here’s my current understanding of the deployment steps and their respective directories:

Run yarn in the Angular project root directory to install dependencies.
Run npm run create-bundles in the Web.Host project directory to bundle and minify JS and CSS files using gulp.
Run npm run publish in the Angular project root directory to build the Angular application.

Could you confirm if the above steps are correct and if they represent the intended flow for creating a production-ready deployment? Specifically, I’d like to ensure that:

The create-bundles command should indeed be run in the Web.Host project directory, and
The publish command should be run after create-bundles.

Any additional insights on this would be appreciated to confirm this setup is correct.

Thank you for your help!

Plus - how looks the configuration - like this - assuming ServerRootAddress runs under port 8080 ? "ServerRootAddress": "http://localhost:8080/", "ClientRootAddress": "https://client.mycompany.com/", "CorsOrigins": "http://*.mycompany.com,http://localhost:4200,http://localhost:8100,http://localhost:44342,http://localhost:8101,http://localhost:50538,http://localhost:61782",

?

Ok- there are no Code changes needed?

Hi,

how is it possible to Deployment of Angular app and ASPNET Core V13.4 in one website - we want to create release which contains angualr app and ASPNET Core and deploy it to LINUX based container image.

Thanks

could it be like this?

To use HTTP within the cluster while keeping external access over HTTPS, you can make the following changes without applying extensive code modifications (as suggested in the ASPZERO blog post):

  1. Changes in appsettings.json:

    ServerRootAddress: Change the backend URL for internal communication to http://localhost:8080 (instead of https://myExternalDomain-api.com ClientRootAddress: Keep this URL as https://myExternalDomain.com to ensure external access over HTTPS. CorsOrigins: Update CORS to allow the Angular app to access the backend over http://localhost:8080 for internal communication.

Example for appsettings.json:

{ "ServerRootAddress": "http://localhost:8080", // Internal HTTP communication "ClientRootAddress": "https://myExternalDomain.com", // External HTTPS communication "CorsOrigins": "http://localhost:8080", // CORS for internal communication "SwaggerEndPoint": "/swagger/v1/swagger.json" }

  1. Docker Configuration:

Ensure that the ASPNETCORE_URLS=http://+:8080 environment variable is set in the Docker container (either in the Dockerfile or docker-compose.yml) so the backend listens on HTTP inside the container. 3. CORS Configuration:

Configure CORS in the backend to allow requests from the Angular app, even though it communicates over HTTP.

In Summary:

Internally within the cluster: HTTP (e.g., http://localhost:8080)
Externally: HTTPS (e.g., https://myExternalDomain.com)

thanks - locks quite a big change is coding... Could it be a solution to deploy Angular App and aspnet code in one image container? or some other hints?

Hello ASPZERO Team,

We are implementing your solution with Angular as the frontend and ASP.NET Core as the backend, running within a Red Hat OpenShift (RHOS) cluster. We aim to simplify our setup by using HTTP (ASPNETCORE_URLS=http://+:8080) only for internal communications within the RHOS namespace, while retaining HTTPS for external access. Questions:

HTTP-Only Configuration for Internal Traffic:
Is it possible to configure the ASP.NET Core backend to use HTTP only for internal (namespace-level) traffic in the RHOS cluster? If so, could you provide guidance or recommendations on setting this up without affecting the security of external HTTPS access?

CORS Configuration with Internal HTTP:
Given that HTTP will be used internally, do you have recommended settings for Cross-Origin Resource Sharing (CORS) to allow secure communication between the Angular frontend and the ASP.NET Core backend? We want to ensure CORS is correctly configured to support internal HTTP requests while keeping external traffic secure via HTTPS.

Any example configurations or best practices would be highly appreciated to help us configure internal HTTP communication effectively.

V13.4:

Dear ASP.NET Zero Support Team,

I hope this message finds you well. We are currently using the ASP.NET Zero framework with Angular as our front-end and ASP.NET Core for our backend.

We are looking to implement a feature in our application that allows users to access specific components through the menu and directly via URL, while toggling the visibility of the menu. Here’s a brief overview of our requirements, including examples:

Menu Navigation: When a user navigates to https://<myApp>/app/area1/dispositions, the component is displayed with the menu visible.

Direct Access Without Menu: We want to allow users to access the same component directly via https://<myApp>/dispositions, where the menu is hidden, providing a cleaner view of the component.

Expand/Collapse Functionality:
    Each menu item should have an expand icon (using Font Awesome) that, when clicked, takes the user to the component's URL without the menu.
    Inside the component, there should be a collapse icon that, when clicked, navigates back to the original URL with the menu displayed.

We would greatly appreciate any guidance, best practices, or examples you could provide to help us set up this functionality effectively. Your support is invaluable to us as we continue to develop our application.

Showing 1 to 10 of 118 entries