Node.js 12 is now generally available.

Updating Your Web Service

Region ID

The REGION_ID is an abbreviated code that Google assigns based on the region you select when you create your app. The code does not correspond to a country or province, even though some region IDs may appear similar to commonly used country and province codes. Including REGION_ID.r in App Engine URLs is optional for existing apps and will soon be required for all new apps.

To ensure a smooth transition, we are slowly updating App Engine to use region IDs. If we haven't updated your Google Cloud project yet, you won't see a region ID for your app. Since the ID is optional for existing apps, you don't need to update URLs or make other changes once the region ID is available for your existing apps.

Learn more about region IDs.

This section of the guide shows how to write, test, and deploy updates to the example web service you deployed in the previous section, Deploying Your Web Service.

Before you begin

If you haven't already completed the previous sections in this "Building an App" guide, do the following:

  1. Create a Google Cloud project with an App Engine app.
  2. Write a simple nodejs web service.
  3. Deploy the web service on App Engine.

Updating the example web service

The following sections update the example web service with a form and a handler that responds when a user submits the form.

Creating a form for user input

To let a user submit data to your server, use an HTML form.

  1. In your my-nodejs-service folder, create a folder named views to store your HTML files.

  2. In the views folder, create a file named form.html and add the following code:

    <!DOCTYPE html>
    <html>
      <head>
        <title>My App Engine App</title>
      </head>
      <body>
        <h2>Create a new post</h2>
        <form method="POST" action="/submit">
          <div>
            <input type="text" name="name" placeholder="Name">
          </div>
          <div>
            <textarea name="message" placeholder="Message"></textarea>
          </div>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </body>
    </html>

This simple form allows a user to enter a name and message to send to the server. It sends the data via an HTTP POST request to /submit, as specified by the method and action attributes on the <form> element.

At this point, you should have a file structure like the following:

my-nodejs-service/
  views/
    form.html
  app.yaml
  package.json
  server.js

Displaying the form

  1. Add the following line to the top of your server.js file to import the path module:

    const path = require(`path`);
    
  2. Add the following Express handler to show the form when a user browses to /submit:

    app.get('/submit', (req, res) => {
      res.sendFile(path.join(__dirname, '/views/form.html'));
    });

Creating a handler for submitted data

When a user submits a message to the server, a POST request with the data is sent to /submit. To read the data from the body of the request, use the body-parser module from NPM and create a new request handler.

  1. From your my-nodejs-service folder, add body-parser as a dependency by running the following command:

    npm install body-parser
    
  2. At the beginning of your server.js file, import body-parser by adding the following:

    const bodyParser = require('body-parser');
    
  3. Set your Express app to use body-parser by adding the line:

    app.use(bodyParser.urlencoded({ extended: true }));
  4. Add a POST handler to your server.js file to read the data:

    app.post('/submit', (req, res) => {
      console.log({
        name: req.body.name,
        message: req.body.message
      });
      res.send('Thanks for your message!');
    });

This sample handler logs the user's name and message to the console, but you could also perform operations on the data or store it in a database.

Testing the form locally

Test your new form locally before deploying your changes.

  1. Start your Node.js server:

    npm start
    
  2. View your form at http://localhost:8080/submit.

    Submit a message with the form. You should see your name and message appear in your terminal.

Deploying your changes

When you deploy an update, a new version of your default service is created and traffic is automatically routed to the latest version. To deploy:

  1. From your my-nodejs-service folder, run the following command:

    gcloud app deploy
    

    This is the same command you learned in Deploying Your Web Service.

  2. Confirm that a new version is listed in the Cloud Console:

    View versions

    You should see two versions corresponding to the previous and current deployment.

After deploying, your new form is accessible at https://PROJECT_ID.REGION_ID.r.appspot.com/submit. Use it to submit a message or two!

If you do not need the previous version anymore, you can delete it from the versions page in the Cloud Console.

Next steps

Now that your app has a form for users to submit data, learn how to view your application’s logs in the Cloud Console.