Sign inSign up

weaponsforge/livereload-basic

By weaponsforge

•Updated about 1 month ago

Static website development environment with live reload. Uses Gulp + Browser-Sync + optional Sass

Image
Developer tools
Web servers
1

1.7K

weaponsforge/livereload-basic repository overview

⁠livereload-basic

A lightweight local development environment for plain HTML, CSS, and JavaScript websites with live reload and Sass support.

Its development static hosting and file-serving architecture are closer to traditional static web servers. Uses Gulp and Browser-Sync

This image is only for local development purposes.

An alternate localhost static development environment using Webpack, also with live-reload, is available at
https://hub.docker.com/r/weaponsforge/livereload-webpack⁠

Are you using VSCode and want to do live reload but do not want to run livereload-basic using Docker?
Live Server⁠ might be the tool for you. Check it out from from the Visual Studio Marketplace.

GitHub Repository
https://github.com/weaponsforge/livereload-basic⁠

Live Preview (Sample Website)
https://weaponsforge.github.io/livereload-basic/⁠

⁠🚀 Usage

  1. Pull the "latest" local development image.
    docker pull weaponsforge/livereload-basic

  2. Set up local static website development files following the basic project structure. It requires having the static website development HTML, CSS, JavaScript, and optional Sass files inside a FILE_DIRECTORY directory in the host machine. This example uses a FILE_DIRECTORY named "/public", which contains at least:

    ├─ my-website-project
│   ├─ .env             # optional
│   ├─ public
│   ├─── index.html
│   ├─── main.css       # optional
│   ├─── styles.scss    # optional
│   ├─── ...

    💡 INFO: To watch file changes for other files besides HTML, CSS, JavaScript and Sass, create a .env file in the parent directory of FILE_DIRECTORY, containing comma-separated values of additional file extensions to watch in the EXTRA_WATCHLIST variable eg., EXTRA_WATCHLIST=jpg,png,svg. See Installation - # 3⁠ for more information.

  3. Run the development image.
    Navigate to the website project directory (for example, "my-website-project") using a terminal, then run:

    # On Linux OS
docker run --rm -p 3000:3000 -v $(pwd)/FILE_DIRECTORY:/opt/app/public weaponsforge/livereload-basic

# On Windows OS (Command Prompt)
docker run --rm -p 3000:3000 -v %cd%\FILE_DIRECTORY:/opt/app/public -e USE_POLLING=true weaponsforge/livereload-basic

    TIPS:

    • Replace FILE_DIRECTORY ("public") with other local directories containing HTML, CSS, and JavaScript files as needed.
    • To use other port bindings aside from the default 3000:
      • Add a PORT environment variable in the command eg., -e PORT=3003
      • Replace -p 3000:3000 with the PORT environment variable eg., -p 3003:3003.

    Alternate command (with `.env` file) 
    # On Linux OS (Bash)
docker run --rm -p 3000:3000 -v $(pwd)/FILE_DIRECTORY:/opt/app/public --env-file ./.env -e USE_POLLING=true weaponsforge/livereload-basic

    Alternate (no .env file with EXTRA_WATCHLIST)

    # On Linux OS (Bash)
docker run --rm -p 3000:3000 -v $(pwd)/FILE_DIRECTORY:/opt/app/public -e USE_POLLING=true -e EXTRA_WATCHLIST=png,jpg weaponsforge/livereload-basic

  4. Load the localhost website at

    • Default port: http://localhost:3000
    • When using other ports: http://localhost:<NEW_PORT>

  5. Edit the local files inside the "/public" directory. Observe their live updates in the localhost web browser.


⁠⚡Using Sass

  1. (Optional) create .scss files in the "/public" directory.

  2. Include the CSS filename of the .scss file you created in the <head> section of index.html.

    <!-- CSS file generated from style.scss -->
<link href="style.css" rel="stylesheet" type="text/css">

    See B. Editing SASS Files (.scss)⁠ for more information.

  3. Proceed to run and edit SCSS files from Usage - step #3⁠

Tag summary

Content type

Image

Digest

sha256:8c3d9adfa…

Size

74.4 MB

Last updated

about 1 month ago

docker pull weaponsforge/livereload-basic