How remove port number ":80" when serving localhost using grunt-contrib-connect

Question

When I serve my project using grunt-contrib-connect, I need it to run using https, and in the browser the root path needs to be: https://localhost/

I am not familiar with how to set this up using the proxy option in grunt-contrib-connect.

My grunt.initConfig setup is:

connect: {
            server: {
              options: {
                port: 80,
                base: 'dist',
                protocol: 'https',
                livereload: true,
                keepalive: true,
                debug: true,
                hostname: 'localhost',
                open: true
              }
            }
        },
    ```

This serves the project to https://localhost:80/

I will finish setting up livereload once this is working correctly.

Thanks for your help.

score 0 · Answer 1 · answered Nov 26 '19 at 08:09

For https without a port number in the address bar, port needs to be set to 443, and for livereload you must have simple, self-generated certificates created - they can reside in the project folder as they are in no way connected with security.

The connect/watch setup in my gruntfile is:

grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');

    // Project configuration.
    grunt.initConfig({
        //live server
        connect: {
            server: {
              options: {
                port: 443,
                base: 'dist', //the folder my compiled web files are generated in
                protocol: 'https',
                livereload: true,
                debug: true, //show me what is being served, helpful for debugging
                hostname: 'localhost',
                open: true //auto-open browser tab - remove if annoying
              }
            }
        },

        //watch for changes and recompile / reload
        watch: {
            dev: {
                options: {
                    livereload: {
                        port: 35729,
                        key: grunt.file.read('livereload.key'),
                        cert: grunt.file.read('livereload.crt')
                        // you can pass in any other options you'd like to the https server, as listed here: http://nodejs.org/api/tls.html#tls_tls_createserver_options_secureconnectionlistener
                    }
                },
                files: [   // Files to livereload on
                    "js/**/*.*",
                    "less/admin/*.less",
                    "./*.html",
                    "./Gruntfile.js",
                    "snippets/*.*"
                ],
                tasks: [
                    'dev' //the task to run after a change is detected
                ]
            }
        },
.....

This guide helped me create the certificates: https://www.gilluminate.com/2014/06/10/livereload-ssl-https-grunt-watch/

The :9000 detail did not work for me, I left the livereload port at 35729, and once the server was up and running hit this in a new tab to authorise access to the script using self-generated certificates: https://localhost:35729/livereload.js?snipver=1

I hope this helps someone ;)

How remove port number ":80" when serving localhost using grunt-contrib-connect

1 Answers1