Open Closed

Publish MVC project missing files #4241


0
julianr@missingpiece.com.au created

After building and testing the project on my local machine I tried to publish to AZURE

I am getting very strange UI behaviors

The flags are missing on register user Fonts are not correct The menu on the portal does not work When I sign in the browser shows the result in text view , does not redirect to the dashboard Customize the UI hides the menu

All this is perfect on local VS run

Is there some extra step I need to do deploy the project

thanks


9 Answer(s)
  • 0
    mdonogma created

    Running into similar issues with published version in release mode.

    None of the key nav menus respond to clicks in chrome browser

  • 0
    bbakermmc created

    Are you publishing from VS?

    I ran into some issues with the gulpfile see GitHub issues about it.

    But I can now build via VSTS and it publishes fine. You need to restore nugget packages restore/install npm packages build project run guilpfile to bundle/min js files (I had to make a new task to remove watch from the default build otherwise the build hung since watch keeps running.) then you can publish

  • 0
    ismcagdas created
    Support Team

    Hi,

    Thanks @BBakerMMC. You also need to run gulp with --dev parameter to minify your bundled script & css files. It is not done by default in development to be able to debug javascript codes.

  • 0
    julianr@missingpiece.com.au created

    Thanks @BBakerMMC Is it possible for you to share your VSTS Config. The differences from the default and also how to setup the GULP step

    thanks heapsJulian

  • 0
    ismcagdas created
    Support Team

    Hi @julianr@missingpiece.com.au,

    If you are still facing this problem, please contanct with <a href="mailto:info@aspnetzero.com">info@aspnetzero.com</a> and we will try to help you remotely.

  • 0
    bbakermmc created

    My steps are: Dotnet restore - Path to MVC Project NPM Install - Path to MVC Project Root folder (IE src/*.Web.MVC) Dotnet build - Path to MVC Project Gulp - Path to GulpFile.js in MVC Project (Using my vstsbuild gulp task) DotNet Publish - Path to MVC project (Zip, add name checked) Publish Artifact - Path to generated artifact

    My Modified GulpFile.

    /// <binding Clean='clean' />
    "use strict";
    
    var gulp = require("gulp"),
        async = require('async'),
        concat = require("gulp-concat"),
        cssmin = require("gulp-cssmin"),
        uglify = require("gulp-uglify"),
        merge = require("merge-stream"),
        rimraf = require("rimraf"),
        gutil = require('gulp-util'),
        cleanCSS = require('gulp-clean-css'),
        runSequence = require('run-sequence'),
        bundleconfig = require("./bundle.config.js");
    
    var regex = {
        css: /\.css$/,
        js: /\.js$/
    };
    
    gulp.task("min", ["min:js", "min:css"]);
    
    gulp.task("min:js", function () {
        var tasks = getBundles(regex.js).map(function (bundle) {
            var outputFileName = getOutputFileName(bundle.outputFileName);
            var outputFolder = getOutputFolder(bundle.outputFileName);
            console.log(outputFolder + " -- " + outputFileName);
            return gulp.src(bundle.inputFiles)
                .pipe(concat(outputFileName))
                .pipe(gulp.dest(outputFolder));
        });
    
        //if (gutil.env.prod) {
            var minifyTasks = getBundles(regex.js).map(function (bundle) {
                var outputFileName = getOutputFileName(bundle.outputFileName);
                var outputFolder = getOutputFolder(bundle.outputFileName);
    
                if (bundle.createMinified === false || outputFileName.endsWith('.min.js')) {
                    return null;
                }
                console.log(outputFolder + " -- " + outputFileName);
                var minifiedJsOutputFile = outputFileName.substr(0, outputFileName.lastIndexOf(".")) + ".min.js";
                return gulp.src(bundle.inputFiles)
                    .pipe(concat(minifiedJsOutputFile))
                    .pipe(uglify()).on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
                    .pipe(gulp.dest(outputFolder));
            });
    
            for (var i = 0; i < minifyTasks.length; i++) {
                if (minifyTasks[i] == null) {
                    continue;
                }
                tasks.push(minifyTasks[i]);
            }
        //}
    
        return merge(tasks);
    });
    
    gulp.task("min:css", function () {
        var tasks = getBundles(regex.css).map(function (bundle) {
            var outputFolder = getOutputFolder(bundle.outputFileName);
            var outputFileName = getOutputFileName(bundle.outputFileName);
    
            return gulp.src(bundle.inputFiles)
                .pipe(cleanCSS({
                    level: 0, // no optimization on css file
                    rebaseTo: outputFolder
                }))
                .pipe(concat(outputFileName))
                .pipe(gulp.dest(outputFolder));
        });
    
        //if (gutil.env.prod) {
            var minifyTasks = getBundles(regex.css).map(function (bundle) {
                var outputFolder = getOutputFolder(bundle.outputFileName);
                var outputFileName = getOutputFileName(bundle.outputFileName);
    
                if (bundle.createMinified === false || outputFileName.endsWith('.min.css')) {
                    return null;
                }
    
                var minifiedCssOutputFile = outputFileName.substr(0, outputFileName.lastIndexOf(".")) + ".min.css";
                return gulp.src(bundle.inputFiles)
                    .pipe(cleanCSS({
                        rebaseTo: outputFolder,
                        level: 1 // default optimization on css file
                    }))
                    .pipe(concat(minifiedCssOutputFile))
                    .pipe(gulp.dest(outputFolder));
            });
    
            for (var i = 0; i < minifyTasks.length; i++) {
                if (minifyTasks[i] == null) {
                    continue;
                }
    
                tasks.push(minifyTasks[i]);
            }
        //}
    
        return merge(tasks);
    });
    
    gulp.task("clean_bundles", function (cb) {
        async.parallel(bundleconfig.bundles.map(function (bundle) {
            return function (done) {
                if (bundle.outputFileName.match(/[^/]+(css|js)$/)) {
                    rimraf(bundle.outputFileName, done);
                } else {
                    rimraf(bundle.outputFileName + '/*', done);
                }
            }
        }), cb);
    });
    
    gulp.task("watch", function () {
        getBundles(regex.js).forEach(function (bundle) {
            gulp.watch(bundle.inputFiles, ["min:js"]);
        });
    
        getBundles(regex.css).forEach(function (bundle) {
            gulp.watch(bundle.inputFiles, ["min:css"]);
        });
    
        gulp.watch('./bundle.config.js', function () {
            runSequence(['min:css', 'min:js']);
        });
    });
    
    gulp.task('copy:node_modules', function () {
        rimraf.sync(bundleconfig.libsFolder + '/**/*', { force: true });
        var tasks = [];
    
        for (var mapping in bundleconfig.mappings) {
            if (bundleconfig.mappings.hasOwnProperty(mapping)) {
                var destination = bundleconfig.libsFolder + '/' + bundleconfig.mappings[mapping];
                if (mapping.match(/[^/]+(css|js)$/)) {
                    tasks.push(
                        gulp.src(mapping).pipe(gulp.dest(destination))
                    );
                } else {
                    tasks.push(
                        gulp.src(mapping + '/**/*').pipe(gulp.dest(destination))
                    );
                }
            }
        }
    
        return merge(tasks);
    });
    
    gulp.task('default', ['copy:node_modules'], function () {
        runSequence('watch', ['min:css', 'min:js']);
    });
    
    function getBundles(regexPattern) {
        return bundleconfig.bundles.filter(function (bundle) {
            return regexPattern.test(bundle.outputFileName);
        });
    }
    
    function getOutputFileName(fullFilePath) {
        var lastIndexOfSlash = fullFilePath.lastIndexOf('/');
        return fullFilePath.substr(lastIndexOfSlash, fullFilePath.length - lastIndexOfSlash);
    }
    
    function getOutputFolder(fullFilePath) {
        var lastIndexOfSlash = fullFilePath.lastIndexOf('/');
        return fullFilePath.substr(0, lastIndexOfSlash);
    }
    
  • 0
    julianr@missingpiece.com.au created

    @BBakerMMC

    thanks but I still can't get all the files bundled - everything else is working in the CI build...

    can you please share the "Using my vstsbuild gulp task" or are you calling the default task?

  • 0
    bbakermmc created

    I must of grabbed an old gulpfile.

    Just add this. Also in my previous post I commented out the "//if (gutil.env.prod) {" if you dont do this you need to pass "prod" as an additional param in the VSTS gulp config. (I personally like having the min files every time this run and I didnt know of a way for the built in task runner to run with it so I just commented it out)

    gulp.task('vstsbuild', ['copy:node_modules'], function () {
        runSequence(['min:css', 'min:js']);
    });
    
  • 0
    julianr@missingpiece.com.au created

    @BBakerMMC

    Working perfectly - thanks for all your help!

    cheers

    Julian