Updating Your Web Service

This section of the guide shows how to write and deploy updates to your existing App Engine services. To learn more about the Node.js runtime and how it works, see Node.js Runtime Environment.

Before you begin

  1. Create a Google Cloud Platform project with an App Engine app.
  2. Deploy a Node.js web server on App Engine.

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

Add the following Express handler to your server.js file to show the form:

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

When a user browses to /submit, they will see the form.

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 GCP Console:

    View versions

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

After deploying, your new form is accessible at https://YOUR_PROJECT_ID.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 GCP 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 GCP Console.

Was this page helpful? Let us know how we did:

Send feedback about...

App Engine standard environment for Node.js docs