All Projects → esausilva → live-reload-vanilla-website-template

esausilva / live-reload-vanilla-website-template

Licence: MIT license
Template to build a website without a front-end framework, including transpilation of ES6+ JavaScript and Sass support

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
HTML
75241 projects

Projects that are alternatives of or similar to live-reload-vanilla-website-template

universal-hot-reload
Hot reload client and server webpack bundles for the ultimate development experience
Stars: ✭ 79 (+68.09%)
Mutual labels:  livereload, live-reload
Vscode Live Server
Launch a development local Server with live reload feature for static & dynamic pages.
Stars: ✭ 3,275 (+6868.09%)
Mutual labels:  livereload, live-reload
arelo
a simple auto reload (live reload) utility
Stars: ✭ 54 (+14.89%)
Mutual labels:  livereload, live-reload
Gosora
Gosora is an ultra-fast and secure forum software written in Go that balances usability with functionality.
Stars: ✭ 131 (+178.72%)
Mutual labels:  livereload
Kirby Webpack
💪 A Kirby CMS starter-kit with modern frontend tools
Stars: ✭ 150 (+219.15%)
Mutual labels:  livereload
Test-Bank
Interview preparation and practice problems
Stars: ✭ 43 (-8.51%)
Mutual labels:  webdevelopment
BackEnd-Squad
Back End Squad Roadmap
Stars: ✭ 24 (-48.94%)
Mutual labels:  webdevelopment
Apiproject
[https://www.sofineday.com], golang项目开发脚手架,集成最佳实践(gin+gorm+go-redis+mongo+cors+jwt+json日志库zap(支持日志收集到kafka或mongo)+消息队列kafka+微信支付宝支付gopay+api加密+api反向代理+go modules依赖管理+headless爬虫chromedp+makefile+二进制压缩+livereload热加载)
Stars: ✭ 124 (+163.83%)
Mutual labels:  livereload
Web-dev-mini-projects
The repository contains the list of awesome✨ & cool web development beginner-friendly✌️ projects!
Stars: ✭ 291 (+519.15%)
Mutual labels:  webdevelopment
magento-2-gulp
Gulp for Magento 2. It works with core Magento styles (less) and structure. Uses default theme configs from dev/tools/grunt/configs/local-themes.js.
Stars: ✭ 37 (-21.28%)
Mutual labels:  livereload
denoliver
A simple, dependency free static file server for Deno with possibly the worst name ever.
Stars: ✭ 94 (+100%)
Mutual labels:  live-reload
Modd
A flexible developer tool that runs processes and responds to filesystem changes
Stars: ✭ 2,030 (+4219.15%)
Mutual labels:  livereload
elemon
live-reload Electron application during development
Stars: ✭ 71 (+51.06%)
Mutual labels:  live-reload
Blazorlivereload
BlazorLiveReload
Stars: ✭ 143 (+204.26%)
Mutual labels:  livereload
Covidview
A complete COVID-19 tracker cum dashboard website made by me.
Stars: ✭ 24 (-48.94%)
Mutual labels:  webdevelopment
P5 Manager
A p5js template builder & sketches manager. Built for p5js enthusiasts.
Stars: ✭ 251 (+434.04%)
Mutual labels:  livereload
Tychus
Command line utility to live-reload your application.
Stars: ✭ 124 (+163.83%)
Mutual labels:  livereload
pribambase
Paint pixelart textures in real time in Blender with Aseprite.
Stars: ✭ 129 (+174.47%)
Mutual labels:  livereload
zkit
zKit, components for modern web.
Stars: ✭ 38 (-19.15%)
Mutual labels:  webdevelopment
node-docker
Guide for Writing Dockerfiles for Node.js Applications
Stars: ✭ 91 (+93.62%)
Mutual labels:  live-reload

live-reload-vanilla-website-template

Starter template to build a website without a front-end framework but making use of Webpack to support writing modern JavaScript (ES6+), including ES Modules and Sass.

Features

  • Live reload in development
  • Webpack
  • Sass compilation (and minification/autoprefixing in production)
  • ES6+ transpilation (and minification/uglyfication in production)
  • ES Modules

Usage

  • Install dependencies
yarn
  • Run development server
yarn dev

Will open your default browser to http://localhost:8080/public

Webpack will watch for changes in the ./src directory and output the bundled assets to ./public/assets. In parallel, the development server will watch for changes in the ./public directory and live reload the browser.

  • Build production bundles
yarn build

Will compile, minify and autoprefix Sass to CSS. Will Minify and uglify JavaScript and output the bundled assets to ./public/assets.

After building for production you can take the ./public directory and deploy it.

Tutorial

Visit my blog entry where I go step-by-step on how to build this template from scratch.

Giving Back

If you would like to support my work and the time I put into making tutorials, consider getting me a coffee by clicking on the image below. I would really appreciate it!

Buy Me A Coffee

-Esau Silva

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].