Quickstart
A quick dive into getting started with Lore
A quick dive into getting started with Lore
To emulate a real application, this Quickstart will be using json-server to provide a mock API, which is included by default in all new projects. You can learn more about the reasons why here.
You can view the finished code for this step by checking out branch
setup.4of the completed project.
For this Quickstart we need two API endpoints; one to retrieve tweets and one to retrieve users.
We can accomplish this by adding data to the db.json file at the root of your project. This file is used by json-server as the database, and also serves as a blueprint to describe what endpoints should exist.
Paste this data into db.json:
{
"users": [
{
"id": 1,
"nickname": "ayla",
"avatar": "https://cloud.githubusercontent.com/assets/2637399/19027069/a356e82a-88e1-11e6-87d8-e3e74f55c069.png"
},
{
"id": 2,
"nickname": "crono",
"avatar": "https://cloud.githubusercontent.com/assets/2637399/19027070/a3659c76-88e1-11e6-8434-5d66c70956c7.png"
},
{
"id": 3,
"nickname": "frog",
"avatar": "https://cloud.githubusercontent.com/assets/2637399/19027071/a36ef028-88e1-11e6-9756-5e35b6fed834.png"
},
{
"id": 4,
"nickname": "lucca",
"avatar": "https://cloud.githubusercontent.com/assets/2637399/19027072/a36f0c7a-88e1-11e6-931e-7f67fe01367b.png"
},
{
"id": 5,
"nickname": "magus",
"avatar": "https://cloud.githubusercontent.com/assets/2637399/19027073/a36f67f6-88e1-11e6-9168-7687083cb994.png"
},
{
"id": 6,
"nickname": "marle",
"avatar": "https://cloud.githubusercontent.com/assets/2637399/19027074/a37105c0-88e1-11e6-9645-3e1af37671f7.png"
},
{
"id": 7,
"nickname": "robo",
"avatar": "https://cloud.githubusercontent.com/assets/2637399/19027075/a3719e2c-88e1-11e6-9abe-5186abc4b04d.png"
}
],
"tweets": [
{
"id": 1,
"userId": 1,
"text": "Ayla fight while alive! Win and live. Lose and die. Rule of life. No change rule.",
"createdAt": "2018-04-24T04:03:25.546Z"
},
{
"id": 2,
"userId": 2,
"text": "What ARE you two doing? I thought you said something about a nice little slideshow?",
"createdAt": "2018-04-24T04:03:25.546Z"
},
{
"id": 3,
"userId": 3,
"text": "Ma'am, you're mistaken, I'm not a pet, I'm a Knight and master swordsman.",
"createdAt": "2018-04-24T04:03:25.546Z"
},
{
"id": 4,
"userId": 4,
"text": "Nothing can beat science!",
"createdAt": "2018-04-24T04:03:25.546Z"
},
{
"id": 5,
"userId": 5,
"text": "I never imagined that we would settle our score in this dusty old era. Come, let us finish this charade!",
"createdAt": "2018-04-24T04:03:25.546Z"
},
{
"id": 6,
"userId": 6,
"text": "Crono!! We can't keep sponging off my dad! Go and get a job!!",
"createdAt": "2018-04-24T04:03:25.546Z"
},
{
"id": 7,
"userId": 7,
"text": "Something is written in archaic script. I will translate... R...o...i...h...c...l...e...m? Roihclem? System error! I reversed it! It says \"Melchior!\".",
"createdAt": "2018-04-24T04:03:25.546Z"
}
]
}
Next start the mock server with this command:
$ npm run server
Once it boots up, you should see output that looks like this:
{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:1337/users
http://localhost:1337/tweets
Home
http://localhost:1337
The output above tells us that the API server is available at http://localhost:1337 and that we can obtain the list of users from /users and the list of tweets from /tweets.
If you want to change the port
json-serverruns on, you can learn how to do that here.However, if you plan on following along with this Quickstart, it is strongly recommended that you do not change the port, as later steps will assume it's running on port 1337.
Next we're going to lay out the application.