Live Reload Sublime, Chrome, Anything - Fast and easy with Live-Server
Key Takeaways
Live-server is a utility that enables live reloading of HTML, CSS, and JavaScript files, allowing for fast and easy development with Sublime, Chrome, and other tools. It can be installed as an npm module and used to serve up files from any folder, with automatic live reload and folder view capabilities.
Full Transcript
so one utility I've been using a lot recently is live server it's for when you want to quickly just kind of sketch out an idea and you want live reload capacity really fast you just basically from any folder type live server and it's going to automatically serve up index.html so if I go over here's that folder that I'm on right now my awesome site I can go my awesomer site and there you go and also the CSS live reloads and of course every background needs to be pink we all know that there you go and so it's just a really nice way to get live reload working and um what you can also do if I go up a level in live server then it'll serve up uh the folder view of whatever I'm working on and then anything I click into it will automatically serve up the index.html so live server been using it it's an npm module which means you need no JS installed and I also noticed that you should uh you should be able to go npm install uh - glive server but for whatever reason that's not been working for the last week uh so you have to install it manually for those of you guys you've never installed an npm module manually uh you just clone the repo I'll clone it here into live server um and then you just go npm install uh dasg and that's going to install the repo as the node module and so now you have Global access as long as you did the- g flag you can go live server um and it's automatically going to serve up wherever you are so uh there you go hope you enjoy that quick little tip and uh enjoy live server
Original Description
With Live-server (https://github.com/tapio/live-server), you can serve up html files with live reloading instantly! Simply type live-server from any folder and it will spin up a local node.js server with live-reload and automatically open the folder your in, or an index.html file if you have one.
-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
https://www.youtube.com/watch?v=fgOO9YUFlGI
-~-~~-~~~-~~-~-
Playlist
Uploads from LearnCode.academy · LearnCode.academy · 44 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
▶
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript
LearnCode.academy
Web Development Tutorial for Beginners (#2) - Basic CSS - How to build a website with HTML & CSS
LearnCode.academy
How to create CSS Layouts - Web Development Tutorial for Beginners (#3) - with HTML & CSS
LearnCode.academy
Bootstrap Tutorial For Beginners - Responsive Design with Bootstrap 3 - Responsive HTML, CSS
LearnCode.academy
Angularjs Tutorial for Beginners - learn Angular.js using UI-Router
LearnCode.academy
CSS Tutorial - Web Development Tutorial for Beginners (#5)
LearnCode.academy
Node.js tutorial for beginners - an introduction to Node.js with Express.js
LearnCode.academy
Github Tutorial For Beginners - Github Basics for Mac or Windows & Source Control Basics
LearnCode.academy
Javascript Tutorial - Programming Tutorial for Beginners Pt 1
LearnCode.academy
Javascript Tutorial - jQuery Tutorial for Beginners Pt 2
LearnCode.academy
AngularJS Directives Tutorial - Part 1 - Demystifying Angular Directives
LearnCode.academy
WATCH THIS IF YOU WANT TO BECOME A WEB DEVELOPER! - Web Development Career advice
LearnCode.academy
YEOMAN TUTORIAL - Master Front-End Workflow with Yeoman, Grunt and Bower
LearnCode.academy
BOWER! - Streamline Web Workflow with Bower Package Manager
LearnCode.academy
Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools
LearnCode.academy
GITHUB ATOM - Why Atom.io will be your favorite Text Editor!
LearnCode.academy
GITHUB PULL REQUEST, Branching, Merging & Team Workflow
LearnCode.academy
Pimp that Terminal - Add shortcuts and functions to your .bash_profile to simplify routine tasks
LearnCode.academy
jQuery Tutorial #3 - Writing Smarter, Better Code - jQuery Tutorial for Beginners
LearnCode.academy
jQuery Tutorial #2 - Event Binding - jQuery Tutorial for Beginners
LearnCode.academy
jQuery Tutorial #1 - jQuery Tutorial for Beginners
LearnCode.academy
Node.js MongoDB Tutorial using Mongoose
LearnCode.academy
Node.js tutorial for beginners 2014 - an introduction to Node.js with Express.js
LearnCode.academy
WEB DEVELOPMENT - SECRETS TO STARTING A CAREER in the Web Development Industry
LearnCode.academy
jQuery Tutorial #4 - DOM Traversal with jQuery
LearnCode.academy
jQuery Tutorial #5 - Building a jQuery Tab Panel Widget
LearnCode.academy
jQuery Tutorial #6 - Building a jQuery Image Slider
LearnCode.academy
jQuery Ajax Tutorial #1 - Using AJAX & API's (jQuery Tutorial #7)
LearnCode.academy
jQuery Ajax Tutorial #2 - Posting data to backend (jQuery tutorial #8)
LearnCode.academy
jQuery Ajax Tutorial #3 - Delegating Events & Mustache.js Templating (jQuery tutorial #9)
LearnCode.academy
jQuery Ajax Tutorial #4 - "Edit" modes & Better Mustache.js Templating (jQuery tutorial #9)
LearnCode.academy
How to put your website online - how to FTP to a domain & upload files to a webhost
LearnCode.academy
Basic Terminal Usage - Cheat Sheet to make the command line EASY
LearnCode.academy
SSH Tutorial - Basic server administration with SSH
LearnCode.academy
Vagrant Tutorial - Running a VM For Your Local Development Environment
LearnCode.academy
Sublime Text Favorite Packages and Workflow
LearnCode.academy
What Makes Javascript Weird...and AWESOME - Pt 1
LearnCode.academy
Javascript is Event-Driven - What makes Javascript Weird...and Awesome Pt 2
LearnCode.academy
Javascript Closures Tutorial - What makes Javascript Weird...and Awesome Pt 3
LearnCode.academy
FREE REST API - Practice Developing Javascript AJAX Apps with this API
LearnCode.academy
Javascript Scope Tutorial - What Makes Javascript Weird...and Awesome Pt 4
LearnCode.academy
Javascript Context Tutorial - What makes Javascript Weird...and Awesome Pt5
LearnCode.academy
Nginx Tutorial - Proxy to Express Application, Load Balancer, Static Cache Files
LearnCode.academy
Live Reload Sublime, Chrome, Anything - Fast and easy with Live-Server
LearnCode.academy
Are you bad, good, better or best with Async JS? JS Tutorial: Callbacks, Promises, Generators
LearnCode.academy
Javascript Generators - THEY CHANGE EVERYTHING - ES6 Generators Harmony Generators
LearnCode.academy
Web Development Advice - Interview with Dev Tips
LearnCode.academy
How the Internet Works for Developers - Pt 2 - Servers & Scaling
LearnCode.academy
How the Internet Works for Developers - Pt 1 - Overview & Frontend
LearnCode.academy
HAPROXY vs NGINX - 10,000 requests while killing servers
LearnCode.academy
Node.js Cluster - Boost Node App Performance & Stability with Clustering
LearnCode.academy
Web Dev Training with Treehouse
LearnCode.academy
What is Node.js Exactly? - a beginners introduction to Nodejs
LearnCode.academy
How to deploy node.js applications #1 - spin up a server
LearnCode.academy
Deploying node.js applications #2 - provision server & setup flightplan
LearnCode.academy
Deploying Node.js Applications - Deploy Node the right way - as an Upstart Service
LearnCode.academy
Mobile Web Design - Coding Workflow For Mobile Websites
LearnCode.academy
WHY YOU NEED A BUILD SYSTEM LIKE GRUNT, GULP, BRUNCH FOR YOUR WEBSITE
LearnCode.academy
GRUNT TUTORIAL - Grunt makes your web development better!
LearnCode.academy
STOP USING FTP! - How to Deploy with Flightplan over SSH
LearnCode.academy
More on: Frontend Performance
View skill →Related Reads
📰
📰
📰
📰
Frontend Engineers Are Quietly Becoming the New Overhead.
Medium · AI
Building an Interactive Fashion Hero with HTML, CSS & GSAP
Dev.to AI
Out-of-Order HTML Streaming Moves from JS Frameworks into the Browser
InfoQ AI/ML
From One Dev to a Team of Eight: The Frontend Architecture Decisions That Didn’t Age Well
Medium · JavaScript
🎓
Tutor Explanation
DeepCamp AI