How to Serve an Application with Grunt

Grunt is a JavaScript Task Runner, which can be used to automate tasks, that we have to perform frequently while building an application. For example, to uglifiy & minify code files. To check our code, we add a linting check or perform various custom tests, everytime we build/serve our application.

Another task we can use Grunt for is to serve our Front-End application(s). We can even use proxies to auto-redirect certain requests wherever required.

Installation

        npm install -g grunt-cli
        npm install grunt grunt-contrib-connect grunt-connect-proxy --save-dev
    

Set up your Gruntfile.js file, as follows:

        module.exports = function(grunt) {
            grunt.initConfig({
                connect: {
                    server: {
                        options: {
                            port: 9000,
                            hostname: "0.0.0.0",
                            livereload: true,
                            base: "./",
                            open: true,
                            middleware: function(connect, options, middlewares) {
                                middlewares.unshift(
                                    require("grunt-connect-proxy/lib/utils")
                                        .proxyRequest
                                );
                                return middlewares;
                            }
                        },
                        proxies: [
                            {
                                context: '/api',
                                host: 'localhost',
                                port: 3000,
                                https: false,
                                xforward: false
                            },
                            {
                                context: "/other-front-end",
                                host: "localhost",
                                port: 9001,
                                https: false,
                                xforward: false,
                                changeOrigin: true,
                                rewrite: {
                                    "^/other-front-end": ""
                                }
                            }
                        ]
                    }
                },
            });

            grunt.loadNpmTasks("grunt-contrib-connect");
            grunt.loadNpmTasks("grunt-connect-proxy");
            
            grunt.registerTask("serve", "configureProxies:server", "connect:server");
        }
    

The options used in the above example for configuring the grunt-let us-connect plugin are as follows:
1. port - The port number where the application will run.
2. hostname - If you wish to run the application only on your local system, you can pass the value as "localhost". But if you want the application served over your local network, you can enter the hostname as "0.0.0.0". This will make the application accessible over the local network. So if your local IP taddress is 192.168.1.4, and port number is 9000, then you can access the application using the following URL: http://192.168.1.4:9000.
3. livereload - Set it to true, if you want to automatically reload your server, whenever a file change is detected. It is supposed to be used with the grunt-contrib-watch plugin.
4. base - It is used to specify the root of your application, from where the files will be served.
5. open - This takes a boolean value, which if set to true, opens the application URL in the default browser on completion.

The proxies configuration, which is used by the grunt-connect-proxy plugin, can have the following options:
1. context - The string which will be used to identify a particular request. Like providing '/api' as the value, will mean, that this proxy will get applied to all requests that have the following URL: http://hostname:port/api.
2. host - The host where you wish to redirect the request.
3. port - The port number where you wish to redirect the request.
4. https - Set it to true for serving the application using the secure HTTPS protocol.
5. changeOrigin - This will be used in cases where to you wish to redirect the user to a different front-end being served on another URL.
6. rewrite - We can provide a regex here, to re-write the resulting URL. For example, lets say the URL entered is "http://localhost:9000/other-front-end/home", and we wish to redirect to "http://localhost:9001/home". Then we can pass the re-write logic as { "^/other-front-end": "" }. This will match the string "other-front-end" and replace it with ".

Once you have set up the configurations, just register your own custom tasks like we have registered the task "serve" in the example above. Now, all we need to do to serve our application is run the following command in our application's directory.

        grunt serve
    

That's it, now you have learned how to serve your front-end application using grunt. Thanks for reading this article. To learn more about this, please visit the following links:
1. grunt - https://gruntjs.com/
2. grunt-contrib-connect - https://github.com/gruntjs/grunt-contrib-connect
3. grunt-connect-proxy - https://github.com/drewzboto/grunt-connect-proxy