Start a dev server
Serve a local directory of static assets - using one-line solutions and no scripts
The first solution uses an IDE extension, while the rest involve using the command-line (intended for macOS and Linux, but they will hopefully work on Windows too).
Table of contents
Install a live server extension for your IDE.
Most web developers tend to use VS Code, so I'll cover that.
- Choose one of these, go to the page, and click "Install" there.
- Open your repo in VS Code.
- Start the server.
- In the bottom right of the IDE, click the "Go live" button to start (or stop) the server.
- Or open the command-prompt pop-up in the IDE and find one of:
- "Live Server: Open with live server"
- "Live Preview: Start server"
- Open your browser (this should launch automatically). For Live Preview, you can skip this step and use the preview pane in VS Code.
- This works on any OS.
- No environment set up needed. No need for installing or learning to CLI commands for runtimes (Node or Python), or any packages (like from NPM).
- Includes hot-reloading - the browser will refresh to reload a page if you change a file. The Live Preview one even reloads on every change you type, without having to save.
- Open a file like
index.htmlbefore starting the server to get the browser to open there. Or you will get a folder view of your directory, which is also fine.
- You might want to install a browser debugger extension for Chrome or Firefox so you can get your debugging in your IDE to work as usual.
- This only works on port
5500and requires to use VS Code as your IDE and have it open. The alternatives below can be run in a terminal anywhere by anyone (without VS Code installed), as long as they have the correct dependencies.
- If your
index.htmlpage and assets are at the root of your repo, this works great. But this does not work properly if you have assets in a subdirectory because that extension will serve from the root. e.g. If your homepage is in
public/index.html, then the browser will open at
http://127.0.0.1:5500/public/index.html, then looking for
/styles.csswill fail. But, you can change the root - a way around this is to open your serving directory as a new window in VS Code. e.g.
code publicand then start the server in that window.
- This only works on port
Install Python 3 - follow gist.
The Python CLI and the Python standard library are light and easy. No need to install a package or write a script!
Approaches to choose from using the
- Start in the current directory on port 8000 by default - view on
$ python3 -m http.server
- Specify a port and restrict to localhost for security.
$ python3 -m http.server 8080 --bind 127.0.0.1
- Start in a subdirectory, such as
docshere. The brackets makes the commands run in a subshell, so that you remain in same directory as before when the command is stopped.
$ (cd docs && python3 -m http.server)
I like to alias the command like this:
alias pserver='python3 -m http.server'
Then run it:
There are many ways to do this.
Some popular options:
$ npx serve
$ npx sirv
Here are a couple of NPM packages you can choose from.
$ php -S 127.0.0.1:8000
$ php -S localhost:8080 -t .
$ ruby -run -e httpd . -p 8080
These lists are more detailed and cover other solutions: