Visual Studio Code Simple Web Server

by

With this extension you can create a simple http server and preview your html.

  1. Visual Studio Code Simple Web Server Settings
  2. Visual Studio Code Web Ide

Visual Studio Code Simple Web Server Settings

  • Visual Studio Code vs. Visual Studio: How to choose Deciding between Visual Studio Code and Visual Studio may depend as much on your work style as on the language support and features you need.
  • It is the start of a New Year and you have decided to try Visual Studio Code, good resolution! One of the things you will find the most surprising, is that unlike its big brother Visual Studio which has IIS Express, VS Code does not come with a built-in web server.

Create a HTTP server and edit your website while your Website will reload, either in your Browser or in Visual Studio Code, both works too!Other people can join you aswell, when your TCP port is forwarded, and you give your friends your external IP address.

How To Use

Press F1 and run the commands

Press SHIFT+COMMAND (or Windows)+X or just click on the extension icon of visual studio code. Search for the extension and press install. Here I am listing down the top 15 best visual studio code extensions for web development. The choices of the extension are my personal opinion.

'Simple HTTP Server: Create HTTP Server'After a HTTP Server has been created, and you can open the Website in Visual Studio Code or in your Browser, both works too!When editing the files they will refresh when you save the file, if other people are on your website too, it'll refresh for them aswell!

When starting a HTTP Server without a single file make sure you are in the current directory with the main file, by default it is the 'index.html' file.If this file is in the root directory of your current project you can start the HTTP Server without any problems.

SimpleLive server visual studio code

'Simple HTTP Server: Create HTTP Server With Current File'This will be always the same function as the normal create HTTP Server. The difference is that you do not have to navigate into a folder.You can launch a single file with this command with no futher requrements.

Visual Studio Code Web Ide

When starting a HTTP server with a single file make sure that the current file is saved on your computer, it can't be a Untitled file in Visual Studio Code.So just save it on your computer and it'll work!

'shs.serverPort' This is the port that the HTTP server will be running on, and the port you need to use to access your website.

'shs.serverHost' This is the host that the HTTP server will be running on, it'll be like '0.0.0.0', '127.0.0.0' and so on, if set to '0.0.0.0' other people can view your website too, given that they know your external IP address and your TCP port is forwarded.

'shs.mainFile' This is the main file for the HTTP server, for example the 'index.html' if is differently the HTTP server will serve that as the main file.

This is a example of the Visual Studio Code HTML Preview.

Simple

This is a example of the Browser HTML Preview.

License

See Repository

Host / serve current workspace (or subfolder) with PHP.

Getting started

There are multiple ways of running PHP server:

  • CTRL + SHIFT + P and searching for PHP Server: Serve project command
  • Clicking on vscode's editor button (icon on the top-right corner)
  • Right-clicking on vscode's editor when a .php or an .html is open.

To stop the server, the PHP Server: Stop project command can be executed likewise.

Commands

All commands can be executed by pressing CTRL + SHIFT + P and typing the name of the command.

CommandNotes
PHP Server: Serve project
PHP Server: Stop project
PHP Server: Reload serverStops the running server and starts it again.
PHP Server: Open file in browserQuickly opens the URL of the active file in the browser. If the server is not running, this command will fail.

Settings

SettingDefaultNotes
phpserver.autoOpenOnReloadtrueEnable/disable automatic opening of server's URL in the browser after server has been reloaded.
phpserver.browsernullApp used to open the server URL. If empty, it will use the default browser.
You can put any browser name here as long as it's installed in your machine (e.g. google-chrome, firefox, chromium-browser...)
phpserver.iplocalhostServer's ip/hostname (e.g. localhost, 0.0.0.0...)
phpserver.phpConfigPathnullPath to php.ini file. If empty, the extension uses the default path.
phpserver.phpPathnullPath to PHP executable. If empty, the extension will try to get the path from the $PATH environment variable.
phpserver.port3000Server's port number.
phpserver.relativePath'.'Path relative to project. This is useful when you want to serve a different folder than the one from current workspace.
phpserver.routernullPath to custom router script that will be used by PHP server. Example.
If a custom router script is used on a Windows machine, there will be no console output unless a logger like this is included in the script.

Requirements

  • PHP needs to be installed in order to be able to use this extension.

Author