Edit on GitHub
Report issue
Page history

Webpack on App Engine flexible environment

Author(s): @jmdobry ,   Published: 2017-02-16

Contributed by Google employees.

This tutorial shows a sample Node.js app built with Express.js that uses Webpack to bundle frontend assets on deployment to the App Engine flexible environment.

Webpack is a module bundler. Webpack takes modules with dependencies and generates static assets representing those modules.

This tutorial gets you going fast by deploying a simple Webpack.js app. This tutorial assumes that you are familiar with Node.js programming and that you have installed Node.js.

You can check out Node.js and Google Cloud to get an overview of Node.js itself and learn ways to run Node.js apps on Google Cloud.


  1. Create a Node.js app that uses Webpack to bundle the app's frontend assets.
  2. Run the Node.js app locally.
  3. Deploy the Node.js app to App Engine flexible environment.


This tutorial uses billable components of Google Cloud, including the following:

  • App Engine flexible environment

Use the pricing calculator to generate a cost estimate based on your projected usage.

Before you begin

  1. Create a project in the Cloud Console.
  2. Enable billing for your project.
  3. Install the Cloud SDK.

Preparing the app

  1. Download the sample server.js file.
  2. Prepare the package.json file:

    1. Create a package.json file with npm:

      npm init
    2. Install dependencies with npm:

      npm install --save webpack express pug

      Webpack must be listed in the dependencies of the package.json file because by default devDependencies are not installed when the app is deployed to App Engine.

    3. Add the following scripts section to the package.json file:

      "scripts": {
        "bundle": "webpack --config webpack.config.js",
        "prestart": "npm run bundle"

      The bundle script will run Webpack and bundle the app's frontend assets. The prestart script is automatically executed before the start script. Note that the default start script is node server.js.

      Make sure that your package.json file is valid JSON.

  3. Create a webpack.config.js file with the following contents:

    'use strict';
    module.exports = {
      entry: './public/app.js',
      output: {
        filename: './dist/bundle.js'

    The bundled assets will be placed in a directory named dist.

  4. Prepare the frontend assets:

    1. Create a new directory named public:

      mkdir public
    2. Create a file in the public directory named app.js with the following contents:

      'use strict';
      import foo from './foo';
      document.getElementById('module-name').innerText = foo.name;
    3. Create a file in the public directory named foo.js with the following contents:

      'use strict';
      export default {
        name: 'foo'

    app.js imports and uses foo.js, but these files will be bundled and deployed as one file.

  5. Prepare the app's views:

    1. Create a new directory named views:

      mkdir views
    2. Download the sample index.pug file into the views directory.

At this point your directory structure should look like this:

  • public/
    • app.js
    • foo.js
  • views/
    • index.pug
  • package.json
  • server.js
  • webpack.config.js

Running the app

  1. Start the app with npm:

    npm start

    The prestart and bundle scripts will be executed automatically, bundling the frontend assets before the app starts.

  2. Visit http://localhost:8080 to see the running app.

  3. Press Control+C to stop the app.

Deploying the app

  1. Create an app.yaml file with the following contents:

    runtime: nodejs
    env: flex
  2. Run the following command to deploy your app:

    gcloud app deploy
  3. Visit http://[YOUR_PROJECT_ID].appspot.com to see the deployed app.

    Replace [YOUR_PROJECT_ID] with your Google Cloud project ID.

Submit a tutorial

Share step-by-step guides

Submit a tutorial

Request a tutorial

Ask for community help

Submit a request

View tutorials

Search Google Cloud tutorials

View tutorials

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.