1
00:00:00,000 --> 00:00:03,000
So in order for this meals grid component

2
00:00:03,000 --> 00:00:06,000
to be useful and in order to see something

3
00:00:06,000 --> 00:00:09,000
on the screen here, we need meals.

4
00:00:09,000 --> 00:00:11,000
And for that I wanna set up a basic database

5
00:00:11,000 --> 00:00:14,000
that will store some dummy meals

6
00:00:14,000 --> 00:00:18,000
and that will later also store meals shared by users.

7
00:00:18,000 --> 00:00:21,000
And for that, I'll stop my development server here

8
00:00:21,000 --> 00:00:23,000
with Ctrl + C,

9
00:00:23,000 --> 00:00:27,000
and I'll install a new dependency with NPM install.

10
00:00:27,000 --> 00:00:32,000
And that dependency is the better-sql light three package.

11
00:00:34,000 --> 00:00:37,000
And this is a package that will allow us to work

12
00:00:37,000 --> 00:00:39,000
with a SQL light database.

13
00:00:40,000 --> 00:00:42,000
And I'll use a SQL light database here

14
00:00:42,000 --> 00:00:45,000
because it's an amazing SQL database

15
00:00:45,000 --> 00:00:48,000
that can be used locally without setting up any extra

16
00:00:48,000 --> 00:00:52,000
database server or any other complex setup needed.

17
00:00:54,000 --> 00:00:56,000
Now, in order to create a database

18
00:00:56,000 --> 00:00:59,000
and populate it with some dummy data,

19
00:00:59,000 --> 00:01:02,000
I prepared an initdb.js file,

20
00:01:02,000 --> 00:01:05,000
which you find attached to this lecture,

21
00:01:05,000 --> 00:01:07,000
and you should store that file simply

22
00:01:07,000 --> 00:01:09,000
in your root project directory.

23
00:01:10,000 --> 00:01:14,000
This file uses the package we just installed

24
00:01:14,000 --> 00:01:18,000
to create a new database file if it doesn't exist yet

25
00:01:18,000 --> 00:01:21,000
otherwise it'll use the existing one.

26
00:01:21,000 --> 00:01:24,000
And it then contains a bunch of dummy meals data

27
00:01:24,000 --> 00:01:26,000
so that we have some meals to get started,

28
00:01:27,000 --> 00:01:30,000
which are then written into that database

29
00:01:30,000 --> 00:01:32,000
that happens down here.

30
00:01:32,000 --> 00:01:36,000
First, a new table is created if it doesn't exist yet,

31
00:01:36,000 --> 00:01:39,000
and the columns of that table are configured

32
00:01:39,000 --> 00:01:41,000
so that every meal has an ID,

33
00:01:41,000 --> 00:01:43,000
which is created automatically.

34
00:01:43,000 --> 00:01:46,000
Every meal has a unique slug.

35
00:01:46,000 --> 00:01:48,000
Every meal has a title, an image,

36
00:01:48,000 --> 00:01:51,000
though that will be the path to an image,

37
00:01:51,000 --> 00:01:53,000
not the file itself.

38
00:01:53,000 --> 00:01:56,000
And then also a summary instructions,

39
00:01:56,000 --> 00:02:00,000
the name of the creator and the email of the creator.

40
00:02:00,000 --> 00:02:03,000
And that's all data I have here in that dummy data.

41
00:02:03,000 --> 00:02:06,000
And that's all data will later collect

42
00:02:06,000 --> 00:02:08,000
from the website visitors.

43
00:02:09,000 --> 00:02:11,000
And then with that table created,

44
00:02:11,000 --> 00:02:14,000
I have this init data function, which is then executed

45
00:02:14,000 --> 00:02:17,000
to write some data into that database.

46
00:02:18,000 --> 00:02:22,000
I'm simply writing all those dummy meals into the database.

47
00:02:22,000 --> 00:02:25,000
And this prepare function, which you see here,

48
00:02:25,000 --> 00:02:28,000
is provided by that better SQL light free package.

49
00:02:30,000 --> 00:02:33,000
So that's how I'm preparing the database.

50
00:02:33,000 --> 00:02:38,000
And with that done, once you run this initdb.js file,

51
00:02:38,000 --> 00:02:39,000
you should have some meals available.

52
00:02:40,000 --> 00:02:43,000
So here in my root project folder,

53
00:02:43,000 --> 00:02:47,000
I'll execute this initdb.js file with node

54
00:02:47,000 --> 00:02:49,000
and it should work.

55
00:02:49,000 --> 00:02:53,000
And you should have such a meals DB file thereafter.

56
00:02:53,000 --> 00:02:56,000
That is that SQL Light database that we'll use now.

57
00:02:57,000 --> 00:03:01,000
Now with that done, we can go back to our meals page

58
00:03:01,000 --> 00:03:04,000
and start loading meals from that database.

59
00:03:04,000 --> 00:03:09,000
And the question now, of course, is how we do that?