Using a Local Server in an Angular Project (Part 1)

Part 1 of a series where we create a basic local server of dummy data and feed it to our Angular application. Estimated reading time:4 min

Why would we need this?

One "real-life" scenario that could occur; lack of an API endpoint that could be called - maybe it's still in development - but waiting for that to finish before getting it into the front-end side of the application isn't an option.

Let's Get Started!

I've set up a branch on a repo here with a basic out-of-the-box Angular application, with Angular Material installed for styling. Normally I would do my own, but we're not focusing on that here, so happy to lean on a framework for this one.

Installing from NPM/Yarn

We're going to install the json-server package from npm using the npm install -g json-server command, or yarn add json-server if you use Yarn. Installing this through npm gave me the latest version, which is set as ^0.16.3 at this time of writing.

Setting up the JSON

The Getting Started section on NPM seems to hint at making a db.json file in the root of our project, but we're going to seperate it out into it's own server folder. I've cobbled together a quick bit of JSON to structure something here;

{
  "albums": [
    {
      "id": 1,
      "title": "The Fragile",
      "band": "Nine Inch Nails",
      "genre": "Industrial Metal",
      "rating": "5/5"
    },
    {
      "id": 2,
      "title": "Kid A",
      "band": "Radiohead",
      "genre": "Alternative Rock",
      "rating": "4/5"
    },
    {
      "id": 3,
      "title": "White Pony",
      "band": "Deftones",
      "genre": "Alternative Metal",
      "rating": "4/5"
    }
  ]
}

Starting the Server

Now we've got our dummy JSON at server/db.json, we can add a command into the package.json file to start the server up. This command should be "server": "json-server --watch server/db.json", but the server text can be changed to whatever is considered appropriate.

After running this command, we can access the data in our server at http://localhost:3004/albums!

On from this, I've tended to change the command further based on what Lukas Ruebbelke has setup in his Angular course. This meant creating a new command that starts both the local Angular application and the local server by adding "server:all": "concurrently \"npm run server\" \"ng serve\"" to the package json. Do not replace the original server command. This runs both scripts one after another, using the Concurrently npm package.

As it's Part 1, actually getting the data into an Angular application will be involved in the next post. But this was a good start into how it can be setup at the beginning stages.

Resources

Hopefully this was helpful, but if you would like to know more about this, you might want to take a look at these links;