Using IP2Location for Divert Traffic in a Next.js Website

In this Next.js and IP2Location tutorial, you'll learn how to Divert Traffic Using IP2Location in a Next.js Website. How to set up a Node-based site that redirects traffic based on a visitor's country, and how to block anonymous Tor traffic. How to build a site that can redirect users to relevant landing pages based on the country they’re browsing from

In a world where online commerce has become the norm, we need to build websites that are faster, user friendly and more secure than ever. In this article, you’ll learn how to set up a Node.js powered website that’s capable of directing traffic to relevant landing pages based on a visitor’s country. You’ll also learn how to block anonymous traffic (e.g. Tor) in order to eliminate risks coming from such networks.

In order to implement these features, we’ll be using the IP2Proxy web service provided by IP2Location, a Geo IP solutions provider. The web service is a REST API that accepts an IP address and responds with geolocation data in JSON format.

Here are some of the fields that we’ll receive:

• countryName
• cityName
• isProxy
• proxyType
• etc.

We’ll use Next.js to build a website containing the following landing pages:

• Home Page: API fetching and redirection will trigger from this page
• Landing Page: supported countries will see the product page in their local currency
• Unavailable Page: other countries will see this page with an option to join a waiting list
• Abuse Page: visitors using Tor networks will be taken to this page

Now that you’re aware of the project plan, let’s see what you need to get started.

Prerequisites

On your machine, I would highly recommend the following:

• Latest LTS version of Node.js (v12)
• Yarn

An older version of Node.js will do, but the most recent LTS (long-term support) version contains performance and debugging improvements in the area of async code, which we’ll be dealing with. Yarn isn’t necessary, but you’ll benefit from its faster performance if you use it.

As mentioned earlier, we’ll be using Next.js to build our website. If you’re new to it, you can follow their official interactive tutorial to quickly get up to speed.

IP2Location + Next.js Project Walkthrough

Project Setup

To set up the project, simply launch the terminal and navigate to your workspace. Execute the following command:

npx create-next-app

Feel free to give your app any name. I’ve called mine next-ip2location-example. After installation is complete, navigate to the project’s root and execute yarn dev. This will launch the Node.js dev server. If you open your browser and navigate to localhost:3000, you should see a page with the header “Welcome to Next.js”. This should confirm that we have a working app that runs without errors. Stop the app and install the following dependencies:

yarn add yarn add next-compose-plugins dotenv-load next-env @zeit/next-css bulma isomorphic-unfetch

We’ll be using Bulma CSS framework to add out-of-the-box styling for our site. Since we’ll be connecting to an API service, we’ll set up an .env file to store our API key. Do note that this file should not be stored in a repository. Next create the file next.config.js. at the root of the project and add the following code:

const withPlugins = require('next-compose-plugins')
const css = require('@zeit/next-css')
const nextEnv = require('next-env')
const dotenvLoad = require('dotenv-load')

dotenvLoad()

module.exports = withPlugins([
    nextEnv(),
    [css]
])

The above configuration allows our application to read the .env file and load values. Do note that the keys will need to have the prefix NEXT_SERVER_ in order to be loaded in the server environment. Visit the next-env package page for more information. We’ll set the API key in the next section. The above configuration also gives our Next.js app the capability to pre-process CSS code via the zeit/next-css package. This will allow us to use Bulma CSS framework in our application. Do note we’ll need import Bulma CSS code into our Next.js application. I’ll soon show you where to do this.

Obtaining API Key for the I2Proxy Web Service

As mentioned earlier, we’ll need to convert a visitor’s IP address into information we can use to redirect or block traffic. Simply head to the following link and sign up for a free trial key:

• IP2Proxy Detection Web Service

Once you sign up, you’ll receive the free API key via email. Create an .env file and place it at the root of your project folder. Copy your API key to the file as follows:

NEXT_SERVER_IP2PROXY_API=<place API key here>

This free key will give you 1,000 free credits. At a minimum, we’ll need the following fields for our application to function:

• countryName
• proxyType

If you look at the pricing section on the IP2Proxy page, you’ll note that the PX2 package will give us the required response. This means each query will costs us two credits. Below is a sample of how the URL should be constructed:

• http://api.ip2proxy.com/?ip=8.8.8.8&key=demo&package=PX2

You can also submit the URL query without the IP. The service will use the IP address of the machine that sent the request. We can also use the PX8 package to get all the available fields such as isp and domain in the top-most package of the IP2Proxy Detection Web Service.

• http://api.ip2proxy.com/?key=demo&package=PX8

In the next section, we’ll build a simple state management system for storing the proxy data which will be shared among all site pages.

Building Context API in Next.js

Create the file context/proxy-context and insert the following code:

import React, {
    useState,
    useEffect,
    useRef,
    createContext
} from 'react'

export const ProxyContext = createContext()

export const ProxyContextProvider = (props) => {
    const initialState = {
        ipAddress: '0.0.0.0',
        countryName: 'Nowhere',
        isProxy: false,
        proxyType: ''
    }

    // Declare shareable proxy state
    const [proxy, setProxy] = useState(initialState)
    const prev = useRef()

    // Read and Write Proxy State to Local Storage
    useEffect(() => {
        if (proxy.countryName == 'Nowhere') {
            const localState = JSON.parse(localStorage.getItem('ip2proxy'))
            if (localState) {
                console.info('reading local storage')
                prev.current = localState.ipAddress
                setProxy(localState)
            }
        } else if (prev.current !== proxy.ipAddress) {
            console.info('writing local storage')
            localStorage.setItem('ip2proxy', JSON.stringify(proxy))
        }
    }, [proxy])

    return(
        <ProxyContext.Provider value={[ipLocation, setProxy]}>
            {props.children}
        </ProxyContext.Provider>
    )
}

Basically, we’re declaring a sharable state called proxy that will store data retrieved from the IP2Proxy web service. The API fetch query will be implemented in pages/index.js. The information will be used to redirect visitors to the relevant pages. If the visitor tries to refresh the page, the saved state will be lost. To prevent this from happening, we’re going to use the useEffect() hook to persist state in the browser’s local storage. When a user refreshes a particular landing page, the proxy state will be retrieved from the local storage, so there’s no need to perform the query again. Here’s a quick sneak peek of Chrome’s local storage in action:

Tip: In case you run into problems further down this tutorial, clearing local storage can help resolve some issues.

Displaying Proxy Information

Create the file components/proxy-view.js and add the following code:

import React, { useContext } from 'react'
import { ProxyContext } from '../context/proxy-context'

const style = {
    padding: 12
}

const ProxyView = () => {
    const [proxy] = useContext(ProxyContext)
    const { ipAddress, countryName, isProxy, proxyType } = proxy

    return (
        <div className="box center" style={style}>
            <div className="content">
                <ul>
                    <li>IP Address : {ipAddress} </li>
                    <li>Country : {countryName} </li>
                    <li>Proxy : {isProxy} </li>
                    <li>Proxy Type: {proxyType} </li>
                </ul>
            </div>
        </div>
    )
}

export default ProxyView

This is simply a display component that we’ll place at the end of each page. We’re only creating this to confirm that our fetch logic and application’s state is working as expected. You should note that the line const [proxy] = useContext(ProxyContext) won’t run until we’ve declared our Context Provider at the root of our application. Let’s do that now in the next section.

Implementing Context API Provider in Next.js App

Create the file pages/_app.js and add the following code:

import React from 'react'
import App from 'next/app'
import 'bulma/css/bulma.css'
import { ProxyContextProvider } from '../context/proxy-context'

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props

    return (
      <ProxyContextProvider>
        <Component {...pageProps} />
      </ProxyContextProvider>
    )
  }
}

The _app.js file is the root component of our Next.js application where we can share global state with the rest of the site pages and child components. Note that this is also where we’re importing CSS for the Bulma framework we installed earlier. With that set up, let’s now build a layout that we’ll use for all our site pages.

Constructing a Layout Template

Create the folder layout at the root of your project. Let’s move the file components/nav.js to layout/nav.js. Replace the current code with this:

import React from 'react'
import Link from 'next/link'

const Nav = () => (
  <nav className="navbar" role="navigation" aria-label="main navigation">
    <div className="navbar-brand">
      <a href="/" className="navbar-item"><strong>Product Store</strong></a>
    </div>
    <div className="navbar-menu">
      <a className="navbar-item" href="/">Home</a>
      <Link href='/landing'>
        <a className="navbar-item">Landing</a>
      </Link>
      <Link href='/unavailable'>
        <a className="navbar-item">Unavailable</a>
      </Link>
      <Link href='/abuse'>
        <a className="navbar-item">Abuse</a>
      </Link>
    </div>
  </nav>
)

export default Nav

Note that this is an incomplete navigation menu, as it’s meant to be fully responsive. Please look into the Navbar documentation to add support for tablet and mobile screens.

I’d also like to point out that the Home link doesn’t use the Link component. I did this intentionally so that when a user clicks on it, it will trigger a server GET request. The rest of the links will only perform client-side navigation.

Next up, create the file layout/layout.js and add the following code:

import Head from 'next/head'
import Nav from './nav'
import ProxyView from '../components/proxy-view'

const Layout = (props) => (
  <div>
    <Head>
      <title>IP2Location Example</title>
      <link rel='icon' href='/favicon.ico' />
    </Head>
    <Nav />
    <section className="section">
      <div className="container">
        {props.children}
        <ProxyView />
      </div>
    </section>
  </div>
)

export default Layout

Now that we have the Layout defined, let’s start to build our site pages, starting with the home page.

Building our Home Page

This is where we’ll perform our API fetch query for the IP2Proxy web service. We’ll save the response received in our ProxyContext state. First, we’ll quickly build just the UI. Open the file pages/index.js and replace the existing code with the following:

import Head from 'next/head'
import Layout from '../layout/layout'

const Home = () => {
  return (
    <Layout>
      <Head>
        <title>Home</title>
      </Head>

      <section className="hero is-light">
        <div className="hero-body">
          <div className="container">
            <h1 className="title">Home</h1>
            <h2 className="subtitle">Checking availability in your country...</h2>
          </div>
        </div>
      </section>
    </Layout>
  )
}

export default Home

Now is a good time to launch the Next.js dev server using the command yarn dev or npm run dev. You should get the following output:

Notice that the ProxyView component is displaying the initial values we set up in the ProxyContextProvider. In the next section, we’ll perform a fetch action and update these values.

Performing a Fetch Query on the IP2Proxy Web Service

In this section, we’ll write an asynchronous function to perform the API fetch query. We’ll do this inside the getInitialProps function. The results will be passed down to the Home component where they’ll be saved to the proxy global state via the ProxyContext. In addition, we’ll use the built-in error page to render errors caught by our code. First, let’s define the getInitialProps function by updating the code in pages/index.js:

import fetch from 'isomorphic-unfetch'

//const Home...{}

Home.getInitialProps = async ({ req }) => {  
  if (req) { // This code'll run in server mode
    const api_key = process.env.NEXT_SERVER_IP2PROXY_API || 'demo'
    const ipAddress = req.headers['x-forwarded-for'] || req.connection.remoteAddress
    const localAddresses = ['::1', '127.0.0.1', 'localhost']
    // Construct IP2Proxy web service URL
    let proxyUrl = `https://api.ip2proxy.com/?key=${api_key}&package=PX2`
     // If ipAddress is not localhost, add it to the URL as a parameter
    if (!localAddresses.includes(ipAddress))
      proxyUrl = proxyUrl.concat(`&ip=${ipAddress}`)
    try {
      const response = await fetch(proxyUrl)
      const json = await response.json()
      console.log(json)
      if (json.response != 'OK')
        return { errorCode: 500, errorMessage: json.response }
      const { isProxy, proxyType, countryName } = json
      const newProxy = { ipAddress, isProxy, proxyType, countryName }
      return{ newProxy }
    } catch (error) {
      return { errorCode: error.code, errorMessage: error.message.replace(api_key, 'demo') }
    }
  }
  return { newProxy: null } // This line will run in client mode
}

export default Home

Next, let’s update our Home component:

import React, {
  useContext,
  useEffect,
} from 'react'
import Error from 'next/error'
import { ProxyContext } from '../context/proxy-context'

const Home = ({newProxy, errorCode, errorMessage}) => {

  // Display error messages
  if (errorCode) {
    return <Error statusCode={errorCode} title={errorMessage} />
  }

  // Save new proxy state
  const [proxy, setProxy] = useContext(ProxyContext)  
  useEffect(() => {
    let ignore = false
    if(newProxy && !ignore) {
      setProxy(newProxy)
    }
     return () => { ignore = true; }
  }, [newProxy])

  // return (...
}

After you’ve saved the changes, refresh the page. You should now see the fields in ProxyView component update. Take note of the output displayed in the terminal:

{
  response: 'OK',
  countryCode: 'KE',
  countryName: 'Kenya',
  proxyType: '-',
  isProxy: 'NO'
}

The above information should reflect the country you’re in. The next step is to redirect, but let’s first build our missing landing pages.

Building Landing Pages

The landing pages are quite simple to build, as they have minimal logic. Use the navigation menu to confirm each page is rendering properly once you’ve added the code below for each of the files:

pages/landing.js:

import React, { useContext } from 'react'
import Head from 'next/head'
import Layout from '../layout/layout'
import { ProxyContext } from '../context/proxy-context'

const Landing = () => {
    let localPrice = 25000 // Kenyan Shilling
    let exchangeRate = 0;
    let currencySymbol = ''
    const [proxy] = useContext(ProxyContext)
    const { countryName } = proxy

    switch (countryName) {
        case 'Kenya':
            exchangeRate = 1;
            currencySymbol = 'KShs.'
            break;
        case 'United Kingdom':
            currencySymbol = '£'
            exchangeRate = 0.0076;
            break;
        default:
            break;
    }
    // Format localPrice to currency format
    localPrice = (localPrice * exchangeRate).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '><,')

    return (
        <Layout>
            <Head>
                <title>Landing</title>
            </Head>

            <section className="hero is-warning">
                <div className="hero-body">
                    <div className="container">
                        <h1 className="title">Landing Page</h1>
                        <h2 className="subtitle">Product is available in {countryName}!</h2>
                        <button className="button is-link"><strong>Order Now</strong>  -  {currencySymbol} {localPrice} </button>
                    </div>
                </div>
            </section>
        </Layout>
    )
}

export default Landing

pages/unavailable.js:

import React, { useContext } from 'react'
import Head from 'next/head'
import Layout from '../layout/layout'
import { ProxyContext } from '../context/proxy-context'

const Unavailable = () => {
    const [proxy] = useContext(ProxyContext)
    const { countryName } = proxy

    return (
        <Layout>
            <Head>
                <title>Unavailable</title>
            </Head>

            <section className="hero is-dark">
                <div className="hero-body">
                    <div className="container">
                        <h1 className="title">Sorry. Product is not available in <strong>{countryName}</strong> </h1>
                        <h2 className="subtitle">Click to join waiting list</h2>
                        <button className="button is-link">Subscribe to Alert Notification</button>
                    </div>
                </div>
            </section>
        </Layout>
    )
}

export default Unavailable

pages/abuse.js:

import React from 'react'
import Head from 'next/head'
import Layout from '../layout/layout'

const Abuse = () => (
    <Layout>
        <Head>
            <title>Abuse</title>
        </Head>

        <section className="hero is-danger">
            <div className="hero-body">
                <div className="container">
                    <h1 className="title">Sorry! TOR Visitors not allowed</h1>
                    <h2 className="subtitle">As much as we respect individual privacy, we would rather protect ourselves from users abusing privacy networks </h2>
                </div>
            </div>
        </section>
    </Layout>
)

export default Abuse

Now that we’ve implemented all our landing pages, we need to redirect to them automatically. Head over to the next section.

Diverting Traffic to Relevant Landing Pages

To perform redirection in Next.js, we’ll need to use the useRouter hook from the next/router package in order to access the router component. We’ll use the function router.replace() to perform the redirection. There are two different redirection actions we need to define:

1. The first redirection is for blocking Tor traffic and diverting to the “abuse” page.
2. The second redirection is for diverting traffic to either the “landing” or the “unavailable” pages.

Open pages/index.js and add the following code:

import { useRouter } from 'next/router'

const Home = ({newProxy, errorCode, errorMessage}) => {
  //...

  // Declare router
  const router = useRouter();

  // Redirect if Proxy Type is TOR
  useEffect(() => {
    if (proxy.proxyType == 'TOR') {
      router.replace('/abuse')
    }
  }, [proxy])

  // Redirect based on visitor's country
  const { countryName } = proxy
  useEffect(() => {
    if (countryName != 'Nowhere' && newProxy.proxyType !== 'TOR') {
      redirectPage(router, countryName)
    }
  }, [proxy]);

  //...
}

const redirectPage = (router, countryName) => {
  let redirectPage;
  switch (countryName) {
    case 'Kenya': // Replace with your country's name
      redirectPage = '/landing'
      break
    case 'United Kingdom':
      redirectPage = '/landing'
      break
    default:
      redirectPage = '/unavailable'
  }
  router.replace(redirectPage)
}

In the redirectPage function, replace “Kenya” with the name of your country. You can add more countries if you like. However, for testing purposes, we need to restrict the number of countries, since there’s a limit to the number of countries supported by a proxy service. Speaking of testing, we need to deploy our application first.

Tip: If you’d like to manually test without deploying, simply assign the ipAddress constant with an IP address from another country. You can also test TOR IP addresses by grabbing one from this list of Tor IPs.

Deploying our Next.js Application

The simplest and fastest way to deploy our Next.js application to a production server is using Zeit’s serverless deployment platform. All you have to do to get started is to install their Now CLI. You’ll only need to verify your email address to use the free service.

If we were to deploy our application now, it would run as expected. However, it will hit the 20 free credit limit, as we’ve designed our app to use the demo key if we haven’t specified an API key. To upload our key now, simply execute the following command:

now secrets add NEXT_SERVER_IP2PROXY_API <ip2proxy api key>

You can learn more about managing environment variables and secrets on the Zeit dashboard here. With that defined, deploying our application is as simple as executing the following command:

now --prod

The command will automatically run the build process, then deploy it to Zeit’s servers. The whole process should run under a minute. The production server URL will be automatically copied to your clipboard. Simply open a new tab on your browser and paste the URL. You should see something similar to below:

Testing the Site with Free Proxy Services

To confirm that our application can redirect based on the country of origin, we’re going to use a free proxy service to emulate different locations. Simply input your application’s public URL and pick a server, or leave it at random.

In my case, the countries Kenya and United Kingdom will direct to the landing page.

Any other country will redirect to the “unavailable” page.

Testing the Site with Tor Browser

Let’s now see if our website can block traffic originating from Tor networks. Simply visit the Tor website and install the Tor browser for your platform. Here’s a screenshot of what the website should look like:

Tip: In case you experience difficulty installing Tor on you computer, you may find it easier installing and running Tor browser on your Android or IOS device.

Local Database Option

Before we end this article, I’d like to mention that IP2Location offers database versions of their web services. It comes in the form of a CSV file which can be imported into any database system you prefer. Instead of querying the remote web service, you can build your own local web service using the database, which should result in a faster response. Do note that when you purchase a database, it gets updated on a daily basis. Hence, you’ll need to automate the process of downloading and importing new data to your local database on a daily basis.

Are you wondering how we’re going to deploy a database in a serverless architecture? It’s quite simple. Deploy your database to a cloud service such as MongoDb or FaunaDb. However, deploying your database on a different server negates the benefits of having a local database. My recommendation is to use Docker containers to package and deploy your application and database within the same server or data center to gain the speed benefits.

Summary

I hope you now have the confidence to build a site that can redirect users to relevant landing pages based on the country they’re browsing from. With the information provided by IP2Location services, you can take your website a few steps further by:

• offering different coupons or offers to different geographic locations
• implementing credit card fraud detection by comparing a visitor’s location with the actual cardholder’s geographic address.

If you look over at IP2Location web service, you’ll notice that it offers a different set of geolocation fields you can use in your application. If you’d like to combine both the IP2Location and IP2Proxy web services in one application, you can look at this project I built earlier that will show you how it’s done.

Originally published by Michael Wanyoike at https://www.sitepoint.com

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

Decision Making in programming is similar to decision making in real life. In programming also we face some situations where we want a certain block of code to be executed when some condition is fulfilled.
A programming language uses control statements to control the flow of execution of the program based on certain conditions. These are used to cause the flow of execution to advance and branch based on changes to the state of a program.

JavaScript’s conditional statements:

• if
• if-else
• nested-if
• if-else-if

These statements allow you to control the flow of your program’s execution based upon conditions known only during run time.

• if: if statement is the most simple decision making statement. It is used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.
  Syntax:

if(condition) 
{
   // Statements to execute if
   // condition is true
}

Here, condition after evaluation will be either true or false. if statement accepts boolean values – if the value is true then it will execute the block of statements under it.
If we do not provide the curly braces ‘{‘ and ‘}’ after if( condition ) then by default if statement will consider the immediate one statement to be inside its block. For example,

if(condition)
   statement1;
   statement2;

// Here if the condition is true, if block 
// will consider only statement1 to be inside 
// its block.

Flow chart:

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If statement 

var i = 10; 

if (i > 15) 
document.write("10 is less than 15"); 

// This statement will be executed 
// as if considers one statement by default 
document.write("I am Not in if"); 

< /script> 

Output:

I am Not in if

• if-else: The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t. But what if we want to do something else if the condition is false. Here comes the else statement. We can use the else statement with if statement to execute a block of code when the condition is false.
  Syntax:

if (condition)
{
    // Executes this block if
    // condition is true
}
else
{
    // Executes this block if
    // condition is false
}

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If-else statement 

var i = 10; 

if (i < 15) 
document.write("10 is less than 15"); 
else
document.write("I am Not in if"); 

< /script> 

Output:

i is smaller than 15

• nested-if A nested if is an if statement that is the target of another if or else. Nested if statements means an if statement inside an if statement. Yes, JavaScript allows us to nest if statements within if statements. i.e, we can place an if statement inside another if statement.
  Syntax:

if (condition1) 
{
   // Executes when condition1 is true
   if (condition2) 
   {
      // Executes when condition2 is true
   }
}

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate nested-if statement 

var i = 10; 

if (i == 10) { 

// First if statement 
if (i < 15) 
	document.write("i is smaller than 15"); 

// Nested - if statement 
// Will only be executed if statement above 
// it is true 
if (i < 12) 
	document.write("i is smaller than 12 too"); 
else
	document.write("i is greater than 15"); 
} 
< /script> 

Output:

i is smaller than 15
i is smaller than 12 too

• if-else-if ladder Here, a user can decide among multiple options.The if statements are executed from the top down. As soon as one of the conditions controlling the if is true, the statement associated with that if is executed, and the rest of the ladder is bypassed. If none of the conditions is true, then the final else statement will be executed.

if (condition)
    statement;
else if (condition)
    statement;
.
.
else
    statement;

Example:

<script type = "text/javaScript"> 
// JavaScript program to illustrate nested-if statement 

var i = 20; 

if (i == 10) 
document.wrte("i is 10"); 
else if (i == 15) 
document.wrte("i is 15"); 
else if (i == 20) 
document.wrte("i is 20"); 
else
document.wrte("i is not present"); 
< /script> 

Output:

i is 20

Tutorial showing how to use the Intl JS API in NodeJS (i18n). We'll install a module to unlock the Intl API languages for Node and test out RelativeTimeFormat to translate and localise relative times in JavaScript.

Tutorial showing how to use the Intl JS API in NodeJS (i18n). We'll install a module to unlock the Intl API languages for Node and test out RelativeTimeFormat to translate and localise relative times in JavaScript. I'll tell you how to get started with the built-in internationalization library in JS for Node 12 and higher. We'll change the locale to see how the translation works and test different BCP 47 language tags.

Internationalization is a difficult undertaking but using the Intl API is an easy way to get started, it's great to see this new API in the JS language and available for use. Soon, you'll be able to have confidence using it in the browser as modern browsers support the major Intl features. Have a look at the browser compatibility charts to see which browsers and versions of node are supported.

Use Intl.RelativeTimeFormat for language-sensitive relative time formatting.
#javascript #nodejs #webdevelopment

MDN Documentation:

https://developer.mozilla.org/en-US/d...

Full ICU NPM package:

https://www.npmjs.com/package/full-icu

This JavaScript tutorial explains how to build a powerful Virtual Machine in JavaScript. A flexible, extensible, register-based virtual machine. Support for signed, unsigned and floating point operations. A call stack. Interrupt capabilities. Ability to do memory mapping for IO. An assembly language with macro and module support. A higher level, C like language. We'll use and expand the library from the parser combinators from scratch series. And finally, to be able to take the whole thing into the browser and exend it to create a sort of fantasy console - an emulator for a machine that never existed

16-Bit Virtual Machine in JavaScript 001

In this episode we begin implementing a 16-bit virtual machine from scratch in JavaScript. The concepts of computation are introduced, along with the basics of assembly language and machine code.

Memory Access and Branching (16-Bit VM in JavaScript 002)

In this video we establish the core instruction set of the VM, give the VM the capabilities to read and write to main memory, and also to make decisions about how the program should proceed with branching instructions.

What is the Stack and why do we need it? (16-Bit VM in JavaScript 003)

In this episode we understand what a stack is, how it can be implemented on the lowest level, and how it can then be harnessed to allow the Virtual Machine to run subroutines without losing state.

Implementing Stack Mechanics (16-Bit VM in JavaScript 004)

In this episode, we create an implementation for the stack mechanisms that were described in the last episode.

What is Memory Mapped I/O? (16-Bit VM in JavaScript 005)

This this episode we implement memory mapped I/O, where the address space is utilised as common bus for components to communicate.