Option B - Use Frontend-Starter Github Repositoryįirst, git clone the frontend-starter branch of the repository on Github. npm i -D webpack html-loader node-sass sass-loader css-loader style-loader url-loader babel-loader babili-webpack-plugin http-serverĪnd that's it, with the dependencies installed you should be good to go. If you are resuming from your existing backend project, you'll just need to install a few new NPM dependencies. To setup the project, you can either resume from the same project directory where you completed part one, or you can clone the frontend starter repo to start fresh with the complete backend application. But seriously, try part one, it's pretty fun.

If you stubbornly refuse to learn about the Node.js backend powering this application, I'll provide an API URL that you can use instead of your running the backend on your own machine. I'll be writing this tutorial with the assumption that anyone reading it has already completed the first part - Build An Interactive Game of Thrones Map (Part I) - Node.js, PostGIS, and Redis. Part 0 - Project Setup 0.0 - Install Dependencies The application will be built using vanilla Javascript (no frameworks), but we will still organize the codebase into seperate UI components (with seperate HTML, CSS, and JS files) for maximal clarity and seperation-of-concerns.

We will be using Leaflet.js to render the map, Fuse.js to power the location search, and Sass for our styling, all wrapped in a custom Webpack build system. We will also be going over the basics of wiring up a simple Webpack build system, along with covering some guidelines for creating frameworkless Javascript components.įor a preview of the final result, check out the webapp here. Using the techniques that we'll cover for this example webapp, you will have a foundation to build any sort of interactive web-based map, from 'A Day in the Life of an NYC Taxi Cab' to a completely open-source version of Google Maps. Our webapp is built on top of the backend application that we completeted in part I of the tutorial - Build An Interactive Game of Thrones Map (Part I) - Node.js, PostGIS, and Redis In this installment, we'll be building a web application to display from from our 'Game of Thrones' API on an interactive map. Welcome to part II of the tutorial series 'Build An Interactive Game of Thrones Map'. The Exciting World of Digital Cartography

How to make game of thrones font