|
1 | 1 | # Setup |
2 | | ->#### The Common Misconceptions |
3 | | ->Neither the browser add-on nor the VS Code extension will host a server for: `PHP`, `ASP.NET` or `NodeJS`. It will give you the *reloading function*, so you do not need to refresh the page every time you save. |
| 2 | +#### The Common Misconceptions |
| 3 | +Neither the browser add-on nor the VS Code extension will host a server for: `PHP`, `.NET` or `NodeJS`. It will give you the *reloading function*, so you do not need to refresh the page every time you save. |
| 4 | + |
| 5 | +In other words. If you just want the reload function when you work with `.html` files, then you do not need this extension at all. |
4 | 6 |
|
5 | 7 | <br> |
6 | 8 |
|
7 | 9 | ***Need Help? [Watch Video Tutorial](https://www.youtube.com/watch?v=54wcX1G2GH8)*** |
8 | 10 |
|
9 | | -<br><hr> |
10 | | - |
11 | | -## There are two ways to setup `Live Server Web Extension`. |
| 11 | +<br><br> |
12 | 12 |
|
13 | | -1. [Direct Setup](#direct-setup) (Easy) |
14 | | -2. [Proxy Setup](#proxy-setup) (Advanced) |
15 | | - |
16 | | -<br><hr> |
| 13 | +# Direct Setup<sup><sub><sup>`Easy`</sup></sub></sup> | Proxy Setup<sup><sub><sup>`Advanced`</sup></sub></sup> |
17 | 14 |
|
18 | | -## Direct Setup |
| 15 | +### Direct Setup |
19 | 16 |
|
20 | | -1. Install [VS Code](https://code.visualstudio.com/download) from Microsoft (code editor). |
21 | | -2. Install VS Code [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) (extension). |
| 17 | +1. Install [VS Code](https://code.visualstudio.com/download) from Microsoft. <sup>(code editor)</sup> |
| 18 | +2. Install VS Code [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). <sup>(extension to code editor)</sup> |
22 | 19 | 3. Install the browser add-on; [Chrome](https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/live-server-web-extension/). |
23 | | -4. Install and run a server on your machine |
24 | | - + [PHP](http://php.net/downloads.php) (just the preprocessor) |
25 | | - + [XAMPP](https://www.apachefriends.org/index.html) (cross-platform) |
26 | | - + [MAMP](https://www.mamp.info/en/downloads/) (mac) |
27 | | - + [WAMP](http://www.wampserver.com/en/) (windows) |
| 20 | +4. Install and run a server on your machine: [Servers and Frameworks](#servers-and-frameworks) |
28 | 21 | 5. Enter the neccesary fields (screenshot below) |
29 | | - + **Actual Server Address:** is the address where your server is located and the port. |
30 | | - + **Live Server Address:** is the address where your VS code extension is running. |
31 | | -6. Push the Go Live-button in your editor. |
| 22 | + 1. **Actual Server Address:** is the address where your server is located and the port. |
| 23 | + 2. **Live Server Address:** is the address where your VS code extension is running. |
| 24 | +6. Push the `Go Live`-button in your editor's statusbar. |
32 | 25 | 7. Visit the `Actual Server Address` |
33 | 26 |
|
34 | | - |
| 27 | + |
35 | 28 |
|
36 | 29 | <br><hr> |
37 | 30 |
|
38 | | -## Proxy Setup |
| 31 | +### Proxy Setup |
| 32 | +1. Install [VS Code](https://code.visualstudio.com/download) from Microsoft. <sup>(code editor)</sup> |
| 33 | +2. Install VS Code [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). <sup>(extension to code editor)</sup> |
| 34 | +3. Install the browser add-on; [Chrome](https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/live-server-web-extension/). |
| 35 | +4. Install and run a server on your machine: [Servers and Frameworks](#servers-and-frameworks) |
| 36 | +5. Enter the neccesary values (code block below) |
| 37 | + 1. **Proxy Address:** is the folder you want proxy from. The path is relative to the workspace. |
| 38 | + 2. **Live Server Address:** is the address where your VS code extension is running. |
| 39 | +6. Push the `Go Live`-button in your editor's statusbar. |
| 40 | + |
| 41 | +*`.vscode/settings.json`* |
| 42 | +```js |
| 43 | +{ |
| 44 | + // Mainly for static files |
| 45 | + "liveServer.settings.useWebExt": true, |
39 | 46 |
|
40 | | -* Install the extension on your browser. |
41 | | -* Install [`VSCode`](https://code.visualstudio.com/download) Editor & [`Live Server`](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) Extension. |
42 | | -* Confiure Live Server settings (`.vscode/settings.json`) as follows : |
| 47 | + // This means that you change your real URL (current PHP url) |
| 48 | + // to another URL (which Live Sever starts). |
| 49 | + "liveServer.settings.proxy": { |
| 50 | + "enable": true, |
| 51 | + "baseUri": "/", // i. Workspace folder. |
| 52 | + "proxyUri": "http://localhost:80/workspace" // ii. Actual Server Address. |
| 53 | + }, |
| 54 | +} |
43 | 55 |
|
44 | | - ```js |
45 | | - //.vscode/settings.json |
| 56 | +``` |
| 57 | +>**Note:** You need to stay on the new host that will be provided by Live Server. |
46 | 58 |
|
47 | | - { |
48 | | - // Mainly for static files |
49 | | - "liveServer.settings.useWebExt": true, |
| 59 | +<br><br><hr> |
50 | 60 |
|
51 | | - /* |
52 | | - If you have dynamic pages (PHP), you have to setup proxy - it's pretty easy. |
| 61 | +# Servers and Frameworks |
53 | 62 |
|
54 | | - In easy word, it means you're shifting your real url (actual PHP url) |
55 | | - to another url (which LiveSever will start). |
56 | | - */ |
57 | | - "liveServer.settings.proxy": { |
58 | | - "enable": true, //switch on :) |
59 | | - "baseUri": "/", //from where you want to proxy (live server). |
60 | | - "proxyUri": "http://127.0.0.1:80" //the actual server url (NOT live server). |
61 | | - }, |
62 | | - } |
63 | 63 |
|
64 | | - ``` |
65 | | - * ...And you're done! Just Open Live Server _`(ctrl+shift+p > "Open Live Server")`_ and don't forget to turn on live reload from your browser. |
66 | | - * Note: You have stay on the new url that will be given by Live Server. |
| 64 | +### PHP |
| 65 | ++ [PHP](http://php.net/downloads.php) <sup><sub>`just the preprocessor`</sub></sup> |
| 66 | ++ [XAMPP](https://www.apachefriends.org/index.html) <sup><sub>`cross-platform`</sub></sup> |
| 67 | ++ [MAMP](https://www.mamp.info/en/downloads/) <sup><sub>`mac`</sub></sup> |
| 68 | ++ [WAMP](http://www.wampserver.com/en/) <sup><sub>`windows`</sub></sup> |
67 | 69 |
|
68 | | -<!-- <br> |
69 | 70 |
|
70 | | -# All available VS Code settings |
71 | | -```json |
72 | | -{ |
73 | | - "liveServer.settings.AdvanceCustomBrowserCmdLine": null, |
74 | | - "liveServer.settings.ChromeDebuggingAttachment": false, |
75 | | - "liveServer.settings.CustomBrowser": "null", |
76 | | - "liveServer.settings.donotShowInfoMsg": false, |
77 | | - "liveServer.settings.donotVerifyTags": false, |
78 | | - "liveServer.settings.host": "127.0.0.1", |
79 | | - "liveServer.settings.https": { |
80 | | - "enable": false, |
81 | | - "cert": "", |
82 | | - "key": "", |
83 | | - "passphrase": "" |
84 | | - }, |
85 | | - "liveServer.settings.ignoreFiles": [ |
86 | | - ".vscode/**", |
87 | | - "**/*.scss", |
88 | | - "**/*.sass" |
89 | | - ], |
90 | | - "liveServer.settings.NoBrowser": false, |
91 | | - "liveServer.settings.port": 5500, |
92 | | - "liveServer.settings.proxy": { |
93 | | - "enable": false, |
94 | | - "baseUri": "/", |
95 | | - "proxyUri": "http://127.0.0.1:80" |
96 | | - }, |
97 | | - "liveServer.settings.root": "/", |
98 | | - "liveServer.settings.useWebExt": false |
99 | | -} |
100 | | -``` --> |
| 71 | +### NodeJS |
| 72 | ++ [ExpressJS](https://expressjs.com/en/starter/installing.html) <sup><sub>`cross-platform`</sub></sup> |
| 73 | + |
| 74 | + |
| 75 | +### .Net |
| 76 | ++ [DotNet Core](https://www.microsoft.com/net/learn/get-started/windows) <sup><sub>`cross-platform`</sub></sup> |
| 77 | ++ [IIS](https://www.iis.net/) <sup><sub>`windows`</sub></sup> |
0 commit comments