Edit on GitHub
Report issue
Page history

Submitted by @{[ TutorialCtrl.tutorial.github_username ]} {[ TutorialCtrl.tutorial.date_published | date:'mediumDate' ]}

title: Webpack on App Engine Flexible Environment description: Learn how to bundle frontend assets for an Express.js app in the Google App Engine flexible environment. author: jmdobry tags: App Engine, Express.js, Node.js, Webpack date_published: 2017-02-16

This tutorial shows a sample Node.js app built with Express.js that uses Webpack to bundle frontend assets on deployment to the Google 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 Platform to get an overview of Node.js itself and learn ways to run Node.js apps on Google Cloud Platform.


  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 Google App Engine flexible environment.


This tutorial uses billable components of Google Cloud Platform, including:

  • Google 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 Google Cloud Platform Console.
  2. Enable billing for your project.
  3. Install the Google 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 or yarn:

      npm init


      yarn init
    2. Install dependencies with npm or yarn:

      npm install --save webpack express pug


      yarn add webpack express pug

      Note: Webpack must be listed in the dependencies of the package.json file, as by default devDependencies are not installed when the app is deployed to Google 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 places 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 or yarn:

    npm start


    yarn 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 Platform project ID.

See more by @{[ TutorialCtrl.tutorial.github_username ]} and more tagged {[ tag ]}{[ $last ? '' : ', ' ]}

Submit a Tutorial

Share step-by-step guides


Request a Tutorial

Ask for community help


GCP Tutorials

Tutorials published by GCP


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.