Write and run a LoopBack 4 "Hello World" project in JavaScript and TypeScript.
Page Contents

Prerequisites

Make sure you’ve installed Node.js, as explained in Installation.

Create a new project

With LoopBack 4 you can code in JavaScript or TypeScript. In either case, do the following:

  1. Create a new directory called lb4-hello-world and make it your current directory:
     $ mkdir lb4-hello-world
     $ cd lb4-hello-world
    
  2. Use npm to create a package.json file; follow the steps below.
  3. Install project dependencies typescript and @loopback/core; follow the steps below.

Use npm to create package.json

Regardless of whether you’re going to code in JavaScript or TypeScript, you need to create a package.json file. The easiest way to create a new one is with the following command:

$ npm init

The command will prompt you for values that it will use to fill out the pacakge.json properties. Press ENTER to accept the default for all of them, except:

  • For entry point enter app.js
  • For description enter Hello World for LoopBack 4.

You can also enter values for entries like git repository and keywords, but they are not required.

package name: (lb4-hello-world)
version: (1.0.0)
description: Hello World for LoopBack 4
entry point: app.js
test command:
git repository:
keywords:
author:
license: (ISC)

The file will then contain the following:

{
  "name": "lb4-hello-world",
  "version": "1.0.0",
  "description": "Hello World for LoopBack 4",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Install TypeScript as development dependency

To use LoopBack 4 in a project, make sure you’re in your project root (use the command cd <my-project-root>), then install TypeScript (version 2 or higher) as a development dependency:

$ npm i --save-dev typescript

Install LoopBack core package

All LoopBack 4 projects require at least LoopBack 4 core. Install it with the following command:

$ npm i --save @loopback/core

Now package.json should include these dependencies (you may see different version numbers):

...
"dependencies": {
  "@loopback/core": "^4.0.0-alpha.16"
},
"devDependencies": {
  "typescript": "^2.5.3"
}
...

Next steps

To continue, follow these procedures:

Try a JavaScript project

If you’re coding in JavaScript, follow these steps:

  1. Create app.js file.
  2. Run the project.

Create app.js

Create a file named app.js, and copy the following into it:

const Application = require('@loopback/core').Application;

const app = new Application();
app.bind('message').to('Hello world!');
app.get('message').then(value => {
  console.log(value);
});

Run the project

To run your project, enter this command:

node app.js

You should see “Hello world!” written to the console.

Try a TypeScript project

To try out a LoopBack 4 project in TypeScript, follow these steps:

  1. Create tsconfig.json file.
  2. Create index.ts file.
  3. Build the project.
  4. Run the project.

Create tsconfig.json file

A tsconfig.json file in a directory indicates that it contains a TypeScript project, and specifies project files and TypeScript compiler options. For more information, see the TypeScript documentation.

Create a new file called tsconfig.json in the project root directory.
Edit this file and copy/paste the following JSON into it, depending on the version of Node.js you’re using:

With Node 8.x:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "strict": true
  }
}

With Node 6.x:

{                                                                                              
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true
  }
}

Create index.ts

Create a file named index.ts and copy the following code into it:

import {Application} from '@loopback/core';

const app = new Application();
app.bind('message').to('Hello world!');
app.get('message').then(value => {
  console.log(value);
});

Build the project

To compile the TypeScript file to JavaScript, enter this command:

./node_modules/typescript/bin/tsc

This command compiles index.ts to JavaScript, creating index.js.

Run the project

Then run the generated index.js by entering this command:

node index.js

You should see “Hello world!” written to the console.

Optional: edit package.json

Add the commands to build and run the project to package.json:

...
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "./node_modules/typescript/bin/tsc",
  "start": "node index.js"
},
...

This enables you to:

  • Build the project with npm run-script build.
  • Run the project with npm run-script start.

Try a more complex TypeScript project

This example builds on the basic “Hello world” example with an Application and a RestServer that responds to all HTTP requests with the text “Hello World”.

Install Node type definitions package

Install the @types/node package as a dependency by entering this command:

npm i -s @types/node

This adds the @types/node package to the dependencies property of package.json.

Modify index.ts

Copy the following code into the index.ts file, replacing the entire contents of the file:

index.ts

import {Application} from '@loopback/core';
import {RestComponent, RestServer} from '@loopback/rest';

const app = new Application({
  components: [RestComponent],
});

(async function start() {
  // Grab the REST server instance
  const server = await app.getServer(RestServer);
  // Setup our handler!
  server.handler((sequence, request, response) => {
    sequence.send(response, 'Hello world!');
  });
  await app.start();
  console.log(`REST server listening on port ${server.getSync('rest.port')}`);
})();

Modify tsconfig.json

Edit tsconfig.json as follows:

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017", /* For Node.js v8, use "es2017"; for Node.js v6, use "es6" */
    "module": "commonjs",                     
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Build and run the project

Build the project by entering this command:

$ ./node_modules/typescript/bin/tsc

This command compiles the TypeScript in index.ts to JavaScript in index.js.

If you added the build command to package.json, you can use the command npm run-script build.

Run the project by entering this command:

$ node index.js

If you added the run command to package.json, you can use the command npm run-script start.

In another console window, enter this command:

$ curl http://localhost:3000/helloworld

Or, load http://localhost:3000/helloworld in your web browser.

You should see the Hello world! message.

Press Ctrl-C to stop the application.