Installing components
To develop our real-world project, we need to install a few components and set up our first layout.
These are all the components you need to download:
Since we just work on the client side in the first chapters, we can mock data in the client and will not need a server side for now. So we can choose any place in our computer to start our project. I recommend you use the environment you usually employ to do your projects.
To start, we create a folder called ko-cart and then create three folders and a file inside it:
- In the
cssfolder, we will put all our css. - In the
jsfolder, we will put all our JavaScript. - In the
fontsfolder, we will put all the font files needed by the Twitter Bootstrap framework. - Create an
index.htmlfile.
Now you should set up your files the same way as shown in the following screenshot:
The initial folder structure
Then we should set the content of the index.html file. Remember to set all the links to the files we will need using the <script> and <link> tags:
<!DOCTYPE html> <html> <head> <title>KO Shopping Cart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <script type="text/javascript" src="js/vendors/jquery.min.js"> </script> <script type="text/javascript" src="js/vendors/bootstrap.min.js"> </script> <script type="text/javascript" src="js/vendors/knockout.debug.js"> </script> </body> </html>
With these lines of code, we have all we need to start our application.
