Run Grunt.js on Google Cloud Platform

> Grunt
The JavaScript Task Runner.

It's easy to get started developing Grunt.js apps running on Google Cloud Platform. And because the apps you create will be running on the same infrastructure that powers all of Google's products, you can be confident that they will scale to serve all of your users, whether there are a few or millions of them.

This tutorial gets you going fast by deploying a simple Grunt.js app. This tutorial assumes that you are familiar with Node.js programming and that you have already Prepared Your Environment for Node.js Development.

Before you begin

Check off each step as you complete it.

  1. check_box_outline_blank check_box Create a project in the Google Cloud Platform Console.
    If you haven't already created a project, create one now. Projects enable you to manage all Google Cloud Platform resources for your app, including deployment, access control, billing, and services.
    1. Open the Cloud Platform Console.
    2. In the drop-down menu at the top, select Create a project.
    3. Click Show advanced options. Under App Engine location, select a United States location.
    4. Give your project a name.
    5. Make a note of the project ID, which might be different from the project name. The project ID is used in commands and in configurations.
  2. check_box_outline_blank check_box Enable billing for your project, and sign up for a free trial.

    If you haven't already enabled billing for your project, enable billing now, and sign up for a free trial. Enabling billing allows the application to consume billable resources such as running instances and storing data. During your free trial period, you won't be billed for any services.

  3. check_box_outline_blank check_box Install the Google Cloud SDK.

    If you haven't already installed the Google Cloud SDK, install and initialize the Google Cloud SDK now. The SDK contains tools and libraries that enable you to create and manage resources on Google Cloud Platform.

Download and run the app

A simple Hello World app written in Node.js and using Grunt.js is available to help you quickly get a feel for deploying an app to Cloud Platform. After you've completed the prerequisites, you can download and deploy the Grunt.js sample app. The following sections guide you through getting the Grunt.js app up and running.

You can view the deployed app here.

Clone the Grunt.js app

The code for the Grunt.js sample app is in the GoogleCloudPlatform/nodejs-docs-samples repository on GitHub. If you haven't already, copy the repository to your local machine:

git clone https://github.com/GoogleCloudPlatform/nodejs-docs-samples.git

Go to the directory that contains the sample code:

cd nodejs-docs-samples
The Grunt.js sample app is in the appengine folder:

cd appengine/grunt

Alternatively, you can download the sample as a zip and extract it.

Run the app on your local computer

  1. Install dependencies:

    npm install
    
  2. Run the start script:

    npm start
    
  3. In your web browser, enter this address:

    http://localhost:8080
    

You can see the Hello World message from the sample app displayed in the page. This page is delivered by the Grunt.js web server running on your computer.

When you're ready to move forward, press Ctrl+C to stop the local web server.

Grunt.js code review

The Gruntfile.js file contains the Grunt.js task configuration.

The following code shows the configuration for the jshint and cssmin tasks.

grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.registerTask('build', ['jshint', 'cssmin']);

The following code shows how to load the plugins and register the build task.

jshint: {
  files: ['Gruntfile.js', 'src/**/*.js'],
  options: {
    jshintrc: './.jshintrc',
    globals: {
      jQuery: true
    }
  }
},
cssmin: {
  minify: {
    src: 'src/public/stylesheets/style.css',
    dest: 'src/public/stylesheets/style.min.css'
  }
},

To run the build task in your terminal:

  1. Install grunt-cli. Enter the following command:

    npm install -g grunt-cli
    
  2. Now you can run the build task:

    grunt build
    

The app.js file contains the JavaScript code to create an Grunt.js app which can respond to requests. The bin/www file contains the JavaScript code to make the Grunt.js app start listening on a port.

The following code responds to requests from web clients by displaying the 'Hello World' message .

router.get('/', (req, res) => {
  res.render('index', {
    title: 'Hello World! Express.js + Grunt.js on Google App Engine.'
  });
});

The following code starts a web server on port 8080. The App Engine flexible environment uses this port by default.

/**
 * Module dependencies.
 */
const app = require('../app');
const debug = require('debug')('express:server');
const http = require('http');

/**
 * Get port from environment and store in Express.
 */
const port = normalizePort(process.env.PORT || 8080);
app.set('port', port);

/**
 * Create HTTP server.
 */

const server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

Running Grunt.js on Google Cloud Platform

The following diagram shows the process of deploying the app on Cloud Platform.

Hello World app deployment process and structure

The App Engine flexible environment runs your application in containers that can automatically scale to handle your application's load. Behind the scenes, this architecture uses both Compute Engine and Docker. To learn more, see App Engine flexible environment.

Deploy the app to Google Cloud Platform

Enter this command to deploy the sample:

gcloud app deploy

Wait for the message that notifies you that the app update has completed.

See the app run in the cloud

In your web browser, enter this address:

https://<your-project-id>.appspot.com

This time, the page that displays the Hello World message is delivered by a web server running in the App Engine flexible environment.

If you update your app, you can deploy the updated version by entering the same command you used to deploy the app the first time. The new deployment creates a new version of your app and promotes it to the default version. The older versions of your app remain, as do their associated VM instances. Be aware that all of these app versions and VM instances are billable resources. For information about deleting or stopping your VM instances, see Cleaning up.

For convenience, you can use an npm script to run the gcloud command. Add these lines to your package.json file:


"scripts": {
  "start": "node ./src/bin/www",
  "postinstall": "grunt build",
  "deploy": "gcloud app deploy --project "
}

Now you can run this command to deploy your application:

npm run deploy

The npm install command will be executed for you automatically during deployment. The postinstall script specified in the "scripts" section of the package.json file causes the grunt build command to be executed after the npm install command succeeds. Because the deployment does not already have grunt-cli installed, the example postinstall hook uses the grunt-cli binary that was installed as a dependency of the app.

Configuration

Every app that runs in the App Engine flexible environment requires an app.yaml file to describe its deployment configuration.

runtime: nodejs
env: flex

This minimal app.yaml file sets the runtime to nodejs with the flexible environment. There are many other configuration values you can specify in app.yaml that allow you to customize resources, scaling, and other settings. For details about the configuration settings for the flexible environment, see App Engine flexible environment.

Bookshelf app logo

Grunt.js documentation

Grunt.js has documentation to help you get started.

Cleaning up

If you're done with the tutorials and want to clean up resources that you've allocated, see Cleaning Up.

Monitor your resources on the go

Get the Google Cloud Console app to help you manage your projects.

Send feedback about...