https://github.com/esausilva/live-reload-vanilla-website-template

Template to build a website without a front-end framework, including transpilation of ES6+ JavaScript and Sass support
https://github.com/esausilva/live-reload-vanilla-website-template

javascript live-reload livereload sass webdevelopment webpack

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/esausilva/live-reload-vanilla-website-template
• Owner: esausilva
• License: mit
• Created: 2018-08-25T20:41:57.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-31T02:35:26.000Z (almost 2 years ago)
• Last Synced: 2024-04-26T20:21:37.230Z (9 months ago)
• Topics: javascript, live-reload, livereload, sass, webdevelopment, webpack
• Language: JavaScript
• Homepage: https://esausilva.com/2018/09/17/build-a-website-with-modern-tooling-and-no-frameworks/
• Size: 1.52 MB
• Stars: 51
• Watchers: 3
• Forks: 20
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://esausilva.com/2018/09/17/build-a-website-with-modern-tooling-and-no-frameworks/) 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](https://www.buymeacoffee.com/assets/img/custom_images/black_img.png)](https://www.buymeacoffee.com/esausilva)

-Esau Silva