Assignment 0 - Setting up environment

Install required application

Install Node js

We will install Node.js® Long Term Support (LTS) version. If you already have Node.js® installed, make sure your version is 16.10 or higher.

Go to Node.js® website click here.
Click on LTS version.
Install node.

Install Editor

Install any one of these. If you prefer any other editor that is fine as well.

Install WebStorm IDE

We will use WebStorm as programming environment. Check if you qualify for free student License.

Brackets

Brackets editor is another good option.

Visual Studio Code

Visual Studio Code is good as well.

Setup project structure

Open your command line application Shall etc.

Create a directory named assignment-0

mkdir assignment-0

Go to directory assignment-0

cd assignment-0

Create a directory named src and go inside it.

mkdir src
cd src

Create a file index.html

touch index.html

Let us create our first website

Open assignment-0/src/index.html file you have just created in code editor.
Copy the following into it

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>My First App</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

Save the file and just simple double-click on the file. It should open this file in the browser. You should see something like this.

Change Hello, World!, save and reload. You should see change.

Make process automatic

Create a Nodejs project

The above method is not good enough. Let us make it better. Create a node package.

Make sure you are in assignment-0 directory and NOT IN assignment-0/src.

Run following command and keep hitting enter

npm init

Keep hitting enter till you see...

Enter again and you are done.

Now if you will see a file named package.json in assignment-0 directory. We will lean about it in the future. I will encourage you to read about it on npmjs site.

Install a development tool

We will use Parceljs tool for development.

Make sure you are in assignment-0 directory and NOT IN assignment-0/src. Run following command...

npm install parcel --save-dev

You will see that in your package.json file this section is added.

Add start command to `package.json` file

Add this line to your package.json file

    "start": "parcel src/index.html"

Now you package.json file should look like this.

{
  "name": "assignment-0",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.5.0"
  }
}

Let us run our application

Run following command while you are still in assignment-0 directory.

npm run start

In the browser type the following

http://localhost:1234

You should see

You are all set

Now if you will make any changes to assignment-0/src/index.html file, automatically page in the browser will change.

singh-pankaj-k / web-assignments Goto Github PK

web-assignments's Introduction

Assignment 0 - Setting up environment

Install required application

Install Node js

Install Editor

Install WebStorm IDE

Brackets

Visual Studio Code

Setup project structure

Let us create our first website

Make process automatic

Create a Nodejs project

Install a development tool

Add start command to package.json file

Let us run our application

You are all set

Well done

web-assignments's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Add start command to `package.json` file