0% found this document useful (0 votes)

24 views5 pages

5 Getting Started With Live Coding

This document provides an overview of the key concepts and software needed to get started with live coding web pages, including: 1. A code editor, web server, and browser are the basic components for web development. Node.js will be used as the web server. 2. Installing Node.js and the Node Package Manager (NPM) allows developers to easily install additional packages needed for development. 3. The live-server package will be installed to enable live updates in the browser as code changes without needing to manually refresh pages.

Uploaded by

bilalhassan44.ibs

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

24 views5 pages

5 Getting Started With Live Coding

Uploaded by

bilalhassan44.ibs

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 5

Getting Started with Live Coding!

In this lesson, we will commence our journey of coding live web pages together.
Let's begin!

WE'LL COVER THE FOLLOWING

• Key software components for web development

• A code editor:
• A web server
• Installing and using Node.js
• A concise overview of Node Package Manager (NPM)
• Preparing for live coding

Key software components for web development

#
We usually need three software components to get started with web
development.

These components are:

1. a code editor
2. a web server
3. a browser

Luckily, we at Educative provide our learners with embedded coding

environments to make learning a breeze, without the hassle of setting up your
coding environment.

We will, however, go over the basics of why the above software components
are necessary.
A code editor: #

To edit the code, you can use an integrated

development environment such as Webstorm, Visual
Studio, Eclipse, or even utilize a simple code editor
such as Sublime Text, TextMate, Notepad++, or
whatever you prefer.

In our case, we provide you two coding editors:

1. RunJS widget: this allows for static coding of apps that run on HTML,
CSS, and JavaScript.
2. Live Coding Widget: this will allow for live coding with browser support.
Our app will be hosted on Educative’s preassigned host, this should look
something like the following under the Live Coding widget:

Your app can be found at: https://x6jr4kg.educative.run

A web server #

You need a webserver to host sample pages. You

can choose from a broad range of web servers,
including Apache, Node.js, and IIS.

Apache and Node.js are supported on all major

platforms, while IIS (and its little brother, IIS
Express) runs only on Windows.

In this course, we use Node.js because it is very easy to install, configure, and
use. With a very simple preparation step it allows live coding; as you modify
the source files, the changes are immediately reflected in the browser.

Helpful Tip

In this lesson, you will learn how to get started with Node.js, our live web
server.
Installing and using Node.js #

As mentioned, we will use Node.js as a web

server. Node.js can be obtained via the
appropriate setup kit for your platform from
http://nodejs.org/download.

Installing Node.js is very easy and takes only a

few minutes. But first, let’s see what this is all
about.

A concise overview of Node Package Manager

(NPM) #

📜Note: If you already have experiences with Node.js and npm, you can
skip this short section.

Node.js installs its own package management

tool, nmp (Node Package Manager).

The main role of this utility is to manage those

Node.js packages and components your app or
development process depend on.

The npm tool can install packages from a repository to your machine. These
packages can be installed globally, where all Node apps can access them, or
locally, to only your project. You can save the references to the installed
packages into a package.json file that can be used by your npm later to
update or install missing components.

Each exercise folder contains two important files.

The package.json defines the start command that, as its name suggests,
launches the web server and displays your page in the browser. The
index.html file is the page that is rendered in the browser.
All exercises use a copy of the very same package.json file. In the root folder,
you can find a package.json file to copy and use in your own exercise
projects.

Preparing for live coding #

In this course, you will be able to edit the sample code and observe the
changes in the browser immediately without restarting the web server or
manually refreshing the browser page.

This magic is brought to you by the live-server package. In the terminal

prompt below, run this command line:

npm install live-server -g

This instruction starts the Node Package Manager that downloads the live-
server package and all its dependencies from the web and installs it globally.

Terminal