Base solution for your next web application
Open Closed

Deployment - when to run npm run create-bundles - V13.4 #12238

User avatar
0
pliaspzero created

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!

Go to accepted answer
7 Answer(s)
  • User Avatar
    0
    pliaspzero created

    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

  • User Avatar
    0
    pliaspzero created

    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();

    }

  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi

    Here, you can use the "npm run create-dynamic-bundles" command to create bundles in Angular codes under the *.Host project in Single Solution along with the Angular project. In a project that is not a Single Solution, you need to create a bundle separately. For Angular, you need to use the "npm create-dynamic-bundles" command under the angular folder, and for the Host project, you need to use the "npm run create-bundles" command under the *.Host project.

    As for the order, after installing the node packages, you can create bundle packages for publication, then use the "npm run publish" command to publish.

  • User Avatar
    0
    pliaspzero created

    Hi, we did that - but still same problem:

  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi

    Can you share the "scripts" section of the package.json file under the *.Host project with us?

  • User Avatar
    0
    pliaspzero created

    "scripts": {

    "ng": "ng",

"publish": "gulp build && ng build --configuration production",

"lint": "eslint -c .eslintrc.js --ext .ts src",

"post-publish": "shx mv ./wwwroot/dist/* ./wwwroot/",

"publish-k8s": "gulp build && ng build --configuration k8s --verbose",

"start": "ng serve --host 0.0.0.0 --port 4200",

"hmr": "gulp buildDev && ng serve --host 0.0.0.0 --port 4200 --hmr",

"test": "gulp buildDev && ng test",

"create-dynamic-bundles": "gulp buildDev",

"nswag": "cd nswag/ && refresh.bat"

    },

  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi

    Can you change the path of the relevant files in bundles.json as stated on the right? At the same time, a single command is sufficient when creating bundles for .Host and Angular in merged projects. "npm run create-dynamic-bundles".

     {
   "output": "wwwroot/view-resources/Views/Ui/Login.min.css",
   "input": [
     "wwwroot/view-resources/Views/Ui/Login.css"
   ]
 },
 {
   "output": "wwwroot/view-resources/Views/Ui/Index.min.css",
   "input": [
     "wwwroot/view-resources/Views/Ui/Index.css"
   ]
 },
 {
   "output": "wwwroot/view-resources/Views/Authorize/Authorize.min.css",
   "input": [
     "wwwroot/view-resources/Views/Authorize/Authorize.css"
   ]
 },
 {
   "output": "wwwroot/view-resources/Views/Error/Index.min.css",
   "input": [
     "wwwroot/view-resources/Views/Error/Index.css"
   ]
 }
Assignee
No one
Labels
None yet