download the forkify starter files.

Install Node

download node via command line or an executable/dmg file from Node’s website.

check if node is installed correctly:

node -v

Go into the forkify folder and you’ll see folders:
– dist
– src

This is where our source files are.

Go ahead and make this into a project: npm init

Go ahead and fill it in. The output should look something like this:


bogon:starter$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See npm help json for definitive documentation on these fields
and exactly what they do.

Use npm install afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (starter) forkify
version: (1.0.0)
description: forkify project
entry point: (index.js)
test command:
git repository:
keywords:
author: ricky t
license: (ISC)
About to write to /Users/*****/Desktop/complete-javascript-course/9-forkify/starter/package.json:

{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "ricky t",
"license": "ISC"
}

Is this OK? (yes) yes

Once you’re done, go back to the directory, and you’ll see a package.json.

Now let’s install webpack: npm install webpack –save-dev

It will save webpack as a development dependency. Now go back and look at your packpage.json, you’ll see that webpack has been added.

Your packpage.json should look something like this:

Now let’s install jQuery: npm install jquery –save

It will save jQuery not as a dev dependency, but as dependency.
You can also uninstall jQuery like so: npm uninstall jQuery –save

Let’s install local web server: npm install live-server –global

If you get an error, make sure you use ‘sudo’ to give permission:

sudo npm install live-server –global

when you install globally, you can run it anywhere by typing:
live-server

In main directory, create file webpack.config.js:

The entry point is where we want to start running the project. Create a file: /src/js/index.js

Basically, we have a value/component in test.js, and we export it to index.js.

Create file: /src/js/test.js

The output means that after we package all of our js files together, we want to export the resulting file into ‘dist/js’ with the name ‘bundle.js’.

This bundle.js will have all of our code, which can be easily run in the browser. It literally packs everything for the web to run. If you were to look inside the bundle.js file, you’ll see our js code of test and index.

Install webpack client: npm install webpack-cli –save-dev

Another thing you should look at is change your package.json when you run the scripts. Make sure we’re running the webpack conversion using development or production.

Your package.json should look like this:

Now, when you go: npm dev run, webpack should convert our web files into a bundle.js.


Built at: 12/15/2019 6:23:26 PM
Asset Size Chunks Chunk Names
bundle.js 1020 bytes 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/js/index.js + 1 modules 143 bytes {0} [built]
| ./src/js/index.js 92 bytes [built]
| ./src/js/test.js 51 bytes [built]


However, we need to put this bundle into an html file so we can see it:

create index.html in distr/

Then in index.html, type ‘!’, then press ‘tab’.

you’ll get the typical html template. Then in body tag, put:

your index.html should look like this:

Open the index html file dist/index.html and when you see the html load, it will also load the bundle.js file. You’ll see the test.js and index.js print out the results.Make sure your web server is running by typing live-server.

Development Server

Let’s install this so we don’t have to run webpack manually everytime.

package.json

webpack.config.js

now run:

npm run start

you’ll get a browser up and running with the code. Now, when you make changes to your code, you will get live compiling of the files. You don’t need to go to your terminal and run “npm run dev” every single time. Every save you make will automatically compile and rerun the server.

That you can go straight to the webpage to see the updates.

Now we try to run it with the given css from the css folder

remove index.html in distr/js

make sure to install html-webpack-plugin:

webpack.config.js

we alter our webpack.config.js like so:

however, u won’t see it because it’s not saving it on disk.
It simply injects the script.

If you want to save it to disk, run:

npm run dev

At this point, your files should look something like this:

forkify_lesson_7

Installing Babel

lesson8 – source

Babel is a JS compiler, in order to use next generation JS.

npm install babel-core babel-preset-env babel-loader –save-dev

check out package.json file to make sure you’ve installed.

Loaders allow us to import all different kind of files and process them. Convert es6 to es5. Or convert less to sass.

We need to babel loader to do the conversion.
There are certain rules to do these loading. So in our webpack.config.js, we need to define rules. It is an array.