1
00:00:02,080 --> 00:00:07,960
Now for that to get started, attached to find a little starting project and there I already set up

2
00:00:07,950 --> 00:00:09,340
webpack for you,

3
00:00:09,340 --> 00:00:13,450
so we will use webpack to bundle our code. In webpack,

4
00:00:13,450 --> 00:00:21,760
we also use Babel to translate our code to older Javascript code that runs in older browsers as well,

5
00:00:21,760 --> 00:00:27,010
for that in the package.json file, I got a browsers list entry where you see that I target browsers

6
00:00:27,040 --> 00:00:30,590
which have at least a market share of .5%

7
00:00:30,820 --> 00:00:38,380
and in this folder you find a dist folder, there we got HTML files in the root folder and in the my place

8
00:00:38,440 --> 00:00:44,440
sub folder with some basic HTML code in there as you can tell, this is all prepared for you so that

9
00:00:44,470 --> 00:00:48,280
we don't have to write it here. In the assets folder in the dist folder,

10
00:00:48,280 --> 00:00:53,980
you find a styles folder with a couple of styles and these style files are already getting imported

11
00:00:53,980 --> 00:00:55,750
into HTML files as you can tell

12
00:00:56,400 --> 00:01:01,360
and we've got a script folder which is empty because we'll not write our scripts and put them in here,

13
00:01:01,420 --> 00:01:06,010
instead we will write our scripts here in the source folder where I have two empty scripts file for

14
00:01:06,010 --> 00:01:10,550
you to start with and webpack will then take these two script files,

15
00:01:10,570 --> 00:01:17,140
so we got two different entry points and build bundles based on these script files and place them in

16
00:01:17,140 --> 00:01:22,570
the dist assets scripts folder and that's where I'm also pointing at in my HTML files,

17
00:01:22,570 --> 00:01:27,690
so here I try to import these script files which will be generated there.

18
00:01:27,700 --> 00:01:33,130
So this is our starting setup and with that starting setup, we can start write some code here in the

19
00:01:33,130 --> 00:01:39,670
source folder in Javascript files and make sure that we build a nice application where in the end users

20
00:01:39,670 --> 00:01:46,570
are able to pick a location, either by entering an address or by autolocating themselves and then we

21
00:01:46,570 --> 00:01:53,350
want to display that location on a map, for that we'll use Google Maps and you'll see how to integrate

22
00:01:53,350 --> 00:01:58,690
that library into this project and with all of that, we'll then be able to create a link which can be

23
00:01:58,690 --> 00:02:04,510
shared, also with the clipboard API so that people don't have to manually use control c to copy the

24
00:02:04,510 --> 00:02:09,800
link and that link will load that other HTML page and display the place there.

25
00:02:09,850 --> 00:02:15,760
That is the goal and for that we'll dive into many concepts we saw and also a couple of new concepts.

26
00:02:16,350 --> 00:02:17,350
Now to get started,

27
00:02:17,350 --> 00:02:22,960
we should run this build dev script here which spins up the webpack dev server so you can open the

28
00:02:22,960 --> 00:02:28,270
terminal which is integrated into Visual Studio Code to have a terminal or a command prompt which is

29
00:02:28,330 --> 00:02:34,270
automatically navigated into that folder and then simply run npm run build: dev to spin up that

30
00:02:34,270 --> 00:02:35,380
development server

31
00:02:35,530 --> 00:02:40,570
and of course then as you learned it, keep that server running so that whenever you change something in

32
00:02:40,570 --> 00:02:47,180
your source Javascript files, it will automatically rebuild and reload the page. With it running,

33
00:02:47,190 --> 00:02:53,160
you can visit localhost:8080 here and this is what we start with, right now if I press these buttons

34
00:02:53,160 --> 00:02:55,470
of course, nothing will happen,

35
00:02:55,470 --> 00:03:00,720
indeed when we press find place we even reload the page and these are of course all things we'll work

36
00:03:00,720 --> 00:03:01,650
on. With that,

37
00:03:01,710 --> 00:03:03,590
let's get started writing some code.