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. For apps created after February 2020, REGION_ID.r is included in App Engine URLs. For existing apps created before this date, the region ID is optional in the URL.

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:

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.

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

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

Add the following line to the top of your server.js file to import the path module:
```
const path = require(`path`);
```

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 Express urlencoded middleware and create a new request handler.

Set your app to use Express urlencoded middleware:

// This middleware is available in Express v4.16.0 onwards
app.use(express.urlencoded({extended: true}));

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.

Start your Node.js server:
```
npm start
```
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:

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.
Confirm that a new version is listed in the Google 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 Google 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 Google Cloud console.