This tutorial will teach you how to build your first, basic API and how to connect it with your Front End.
Tools and technologies we will use for this task include:
- Package Manager (NPM)
- Web Framework for Node (Express)
- NextGen JS syntax (ECMAScript6)
Step #1: Set up your project
Make sure you are in your home directory:
|
1 |
cd ~ |
Create a new directory for this exercise:
|
1 2 |
mkdir api-demo cd api-demo |
Create a JS file called api.js with the following contents:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
'use strict'; const express = require('express'); const app = express(); // Enable CORS app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); // Show homepage app.get('/', (req, res, next) => { res.send('Hello World.'); }); // Show our results app.get('/fruits', (req, res, next) => { let list = { apples: 1, bananas: 5, oranges: 10 } res.json(list); }); // Catch 404 and forward to error handler app.use((req, res, next) => { res.status(404); res.type('txt').send('Error 404 - Not Found'); next(new Error('Not Found')); }); // Start the app app.listen(8081, () => { console.log('Listening on port 8081'); }); |
Notice how this code introduces new ES6 syntax elements, such as arrow functions, const and let.
Create a config file for NPM called package.json with the following contents:
|
1 2 3 4 5 6 7 8 |
{ "name": "api-demo", "version": "0.0.1", "private": true, "scripts": { "start": "NODE_ENV=development PORT=8081 nodemon ./api.js" } } |
Step #2: Install Express & Nodemon utility
Install Express (Node web framework) and Nodemon utility that automatically restarts server on changes:
|
1 |
npm install express nodemon --save-dev |
Step #3: First run
Run the following command from the command line to start your dev server:
|
1 |
npm start |
Open your browser at http://127.0.0.1:8081. It should be displaying “Hello World”
Open http://127.0.0.1:8081/fruits. It should be displaying a list of results.
Open http://127.0.0.1:8081/abc. It should be displaying “Error 404 – Not Found” as this page doesn’t exist.
Congratulations! You’ve just set up your first API.
Step #4: Connect API with Front End
Keep your API server running and open your Front End Demo project from the previous tutorial.
While you are in your Front End Demo project directory install jQuery in it:
|
1 |
npm install jquery --save-dev |
Try editing your webpack.config.js file. Add plugins block:
|
1 2 3 4 5 6 |
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] |
the full file should now be looking like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
'use strict'; var webpack = require('webpack'); module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, devServer: { contentBase: './', hot: true, inline: true, progress: true, stats: 'errors-only' }, module: { loaders: [ { test: /\.(scss|sass)$/, loaders: ["style", "css", "sass"] } ] }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] }; |
…and save the file.
Edit your entry.js file. File contents should now be looking as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
require("./style.sass"); $.get("http://127.0.0.1:8081/fruits", function(data) { var list = ''; $.each(data, function(key, value) { list += ` <ul> <li>${key} : {value}</li> </ul> `; }); $("body").html(` <ul>${list}</ul> `); }); |
Save and run the Client App server:
|
1 |
npm start |
You should have both API and Client App servers running at this point.
Go directly to your browser. Open your browser at http://127.0.0.1:8080. It should be displaying:
- apples : 1
- bananas : 5
- oranges : 10
You just learned how to create your first API and how to connect it to your Front End App.
