Quick start guide (Node.js)

Documentation

Quick start guide (Node.js)

Creating your project
Making a backend change in Express
Viewing your change
Making a frontend change
Local setup
Next steps

Get started with Spring Boot on Jumpydoll in 5 minutes. This guide will walk you through creating a new project, making your first change, and deploying the change.

Javascript is a programming language that was designed for websites to run in the web browser. However, Node.js lets you run Javascript code without a browser, letting developers use the same programming language for both a website code and the server code. In this guide, you'll learn how to create a new Node.js backend API using Express.js, and add frontend Javascript to call the API.

Creating your project

Make sure you have a Jumpydoll account and have the Jumpydoll Github app installed on all repositories on your account.

To create your project:

Log into Jumpydoll and go to the application create page (https://jumpydoll.com/applications/create).
Type in Express web service as the project name
Type in A sample Express.js web service in the project description and click Next
Select the Node.js/Express.js template
Click "Create my project"

After creating the app, you will be redirected to the project management page. On this page, you can see the code repository, build status, and application configuration. When you create a project, Jumpydoll creates a new GitHub repository in your account containing the initial Java code. When you make a change to this GitHub repository, your code will automatically build and deploy to our servers. Let's try making a change now.

Making a backend change in Express

Before making the first change, let's view the initial version of the application. Click on the "URL" link at the top of the page. Here you can see the home page of the initial template.

For your first change, you'll be making a simple "Hello world" REST API. An API or Application Programming Interface is an interface that is built for applications to programmatically interact with a resource. When you want to perform complex operations (reading/writing data to a database), it's best to build a backend that performs all of these functions. By building an API in your backend, you can simplify the development of the user interface or frontend. Your frontend can make calls to the backend to do the real work, and the frontend remains simple because it uses the API, which is designed for code to call it. REST APIs are one design pattern for web APIs, where requests are sent to specific URLs to perform actions.

You can start your first change right in the browser. Navigate to the manage page of your app. From here, you can click on the "Code" button, and click on "Code in the browser" to start writing code using GitHub's browser editor.

First, open the app.js file. This file contains the Node.js code that runs on the server backend. It creates an Express.js router, which can accept incoming HTTP requests and run Javascript code to create a response. Right now, it just listens to requests to the /hello path and returns Hello World!.

const router = express.Router()

...

router.get('/hello', (req, res) => {
  res.send(`Hello World!`);
});

...

In const router = express.Router(), the existing code creates an Express router and saves it into the router variable.
Then, by calling router.get('/hello', ...), it tells the router to accept requests with the /hello path. When it receives a request to the '/hello' endpoint, it will call the function passed in.
(req, res) => { ... } is the anonymous function that is called on the request.
res.send(`Hello World!`) tells the server to send a response containing "Hello World!"

If you open your app in your browser and add /hello to the end, you should see a page consisting of only "Hello World!".

Let's update the existing '/hello' route. Delete the res.send(`Hello World!`) with the following.

router.get('/hello', (req, res) => {
	let name = "World";
	if (req.query.name) {
		name = req.query.name;
	}
	res.send(`Hello ${name}!`);
});

This function checks if a name was passed in with the query string, and if so, it will respond with Hello ${name} instead of always responding with Hello World!. Your new file should look like this:

app.js

const config = require('./config');
const express = require('express');
const app = express();
const router = express.Router()
const basePath = config.basePath;

router.get('/hello', (req, res) => {
  let name = 'World';
  if (req.query.name) {
    name = req.query.name;
  }
  res.send(`Hello ${name}!`);
});

router.use(express.static('public'))

// Add basePath as prefix to all routes in the router
app.use(basePath, router);

const port = parseInt(process.env.PORT) || 3000;
app.listen(port, () => {
  console.log(`helloworld: listening on port ${port}`);
});

This is all you need for your first API. To push the changes, go to the "Version control" tab on the sidebar. Click the plus icons next to the app.js files so it is committed in the next version. Add a commit message of "Update hello world API" and press the checkmark to commit. This creates a new commit which is automatically pushed to GitHub to start building.

Viewing your change

Back on the manage page of your app, you should see your new change start building. Once the build has finished, refresh and you should see the config version update in the "Deployment" section. Click the "Visit App" button to see your changes. The main page will stay the same, but if you navigate to https://[user].app.jumpydoll.com/express-web-service/hello, you will see your new API.

Replace /hello with /hello?name=User and you will see the response change. This is one way to pass a dynamic argument into the API.

Making a frontend change

Now that you have created an API, you can add code to the frontend website to call the API and accept the response to display a change on the website.

Open the online code editor again and open the public/index.html file. This page has the HTML code that defines the layout of the website. We will add a text button for a user to enter their name and a submit button that calls the API we made and shows the greeting.

Under the <h2> tag, add the following lines:

<div id="greeting">
    Enter your name:
    <input id="name-input"></input>
    <button id="submit-button">
        Submit
    </button>
</div>

This creates a div tag, which acts as a container for the text box and button. The input tag creates a text box and the button tag defines the button. With this HTML, the user can enter their name and click the Submit button, but the button won't do anything, so lets add code to let the button call the API.

In the public directory, create a new file called index.js. This file will store the Javascript code that runs in the users browser and controls elements on the webpage. In this file, paste the following Javascript code:

public/index.js

async function onSubmit() {
  const value = document.getElementById('name-input').value;
  const response = await fetch('/express-web-service/hello?name=' + value);
  const greeting = await response.text();
  document.getElementById('greeting').innerText=greeting
}

This creates a function called onSubmit. When called, it finds the text box by the ID we defined in the HTML, and it retrieves the value of the text box. It then sents and HTTP request to the API using fetch. The fetch API is an asynchronous call, meaning it runs in the background, without interrupting other Javascript code from running. Otherwise, it would stop all other code from running while the call is being processed. To use asynchronous functions, we made the entire onSubmit function asynchronous, and then added an await statement before the fetch API. The code will then make the request and will wait until it has received a response, letting other code run while it is waiting.

After it receives the response and extracts the text body, it then displays the greeting on the page. It finds the div container that we created with id greeting. We then replace the existing contents of the container with the response from the greeting.

Next, you'll need to update index.html again to include this javascript file and call the onSubmit function. n the head section, add a script tag like the following

<script src="index.js"></script>

which imports the index.js file you created as Javascript code. Then call the onSubmit button by changing the opening <button> tag to

<button id="submit-button" onClick="onSubmit()">

Your finished index.html should look like the following:

index.html

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
        <script src="index.js"></script>
        <title>Jumpydoll Express.js app</title>
    </head>
    <body>
        <div class="container">
            <h2 class="text-center mt-2">Welcome to your new Express app</h2>
            <div id="greeting">
                Enter your name:
                <input id="name-input"></input>
                <button id="submit-button" onClick="onSubmit()">
                    Submit
                </button>
            </div>

            To start building, check out our quick start guide below:
            <ul>
                <li>
                    <a href="https://jumpydoll.com/docs/quickstart/nodejs" target="_blank" rel="noreferrer noopener">
                        Quick start guide
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>

Push these new changes again by going to the "Version control" tab on the sidebar. Click the plus icons next to the index.html and index.js files. Set the commit message as "Add greeting frontend" and press the checkmark to commit. Just like last time, you should see your new change start building. Once the build has finished, click the "Visit App" button to see your changes. There will now be a text box and button. Enter the name into the text box and click on "Submit". You should see the greeting that is created in the backend. You have now completed and deployed a simple full-stack website that includes backend and frontend components.

Local setup

This guide uses the GitHub browser IDE to help you get started without any local setup. As you develop more complex applications, you'll want to be able to use your choice of IDE and test your code locally. To start developing locally, you'll need an IDE and git.

This tutorial used the web version of VSCode to get you started. You can get more features for Javascript development if you use the desktop version of VSCode. You can also code in any other IDE or text editor of your choice.

VSCode: https://code.visualstudio.com/

You will use git to pull your code and push any changes you make. Git is an open-source version control system. It helps you track different versions of your work and makes it easy for multiple collaborators to merge their work. Many IDEs (including VSCode) have Git support built-in, so you don't need to install anything extra. Follow your IDE's instructions for cloning a repository and creating/pushing commits. You can also install Git to your terminal or use GitHub Desktop if you prefer a standalone solution.

Documentation