Skip to content

Commit 6a7619d

Browse files
Mikael-SundstromMikael-Sundstrom
committed
Update documentation
1 parent 9dffca5 commit 6a7619d

File tree

6 files changed

+198
-83
lines changed

6 files changed

+198
-83
lines changed

‎.vscode/settings.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
{
2+
"markdown.preview.fontSize": 13,
3+
"[markdown]": {
4+
"editor.fontSize": 14,
5+
"editor.wordWrap": "off",
6+
"files.trimTrailingWhitespace": false
7+
},
28
// "liveServer.settings.proxy": {
39
// "enable": true,
410
// "baseUri": "/",
511
// "proxyUri": "http://127.0.0.1:80"
612
// }
7-
}
13+
}

‎README.md‎

Lines changed: 19 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,29 @@
11
# Live Server - Web Extension
2+
>**HELP! NEEDS A GOOD DOCUMENTATION [#4](https://github.com/ritwickdey/live-server-web-extension/issues/4)**
23
3-
<hr>
4+
## Brief Description
5+
This browser add-on is an extension for a developer tool in VS Code editor ([Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)). With this add-on installed, along with the VS Code extension, it gives you a functionality to automatically update your website on save; for other files than just `.htm` and `.html`.
46

5-
***Need Help? [Watch Video Tutorial](https://www.youtube.com/watch?v=54wcX1G2GH8)***
7+
So, more specifically, with this add-on, live reload will also work with the following server-side files like: `PHP`, `Node.js` and `ASP.NET`.
68

9+
<br><hr>
710

8-
***[HELP! NEEDS A GOOD DOCUMENTATION [#4](https://github.com/ritwickdey/live-server-web-extension/issues/4)]***
11+
## Documentation
12+
***[About.md](./docs/About.md)***
13+
***[Setup.md](./docs/Setup.md)***
14+
***[FAQ.md](./docs/FAQ.md)***
915

10-
<hr>
16+
**Firefox** : <small>https://addons.mozilla.org/en-US/firefox/addon/live-server-web-extension/</small>
17+
**Chrome** : <small>https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/</small>
1118

12-
A browser extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASP.NET -- Whatever, it doesn't matter).
19+
<br>
1320

14-
This extension is for [`Live Server`](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) (VSCode Extension - required v3.0.0+).
21+
#### The Common Misconceptions
22+
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 your server-side code.
1523

16-
*[all through you can use the npm package [live-server](https://www.npmjs.com/package/live-server)]*
17-
18-
## Installs:
19-
* **Firefox** : https://addons.mozilla.org/en-US/firefox/addon/live-server-web-extension/
20-
21-
* **Chrome** : https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/
22-
23-
## Demo:
24-
It is a simple PHP project.
25-
26-
![](./img/screenshots/live-server-web-extension.gif)
27-
28-
## Setup:
29-
There are two ways to setup `Live Server Web Extension`.
30-
31-
>_[Note: live Server will not able to compile you dynamic pages, you've to use the existing server, live server will help you to reload the pages when you made any change on your code, so that you have not to reload manually browser on every changes]_
32-
33-
1. [Direct Setup](#direct-setup) (Easy One, stright-forword)
34-
2. [Proxy Setup](#proxy-setup)
35-
----------
36-
37-
### Direct Setup
38-
39-
***[Watch Video Tutorial](https://www.youtube.com/watch?v=54wcX1G2GH8) or follow the steps below***
40-
41-
* Install the extension on your browser.
42-
43-
* Install [`VSCode`](https://code.visualstudio.com/download) Editor & [`Live Server`](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) Extension.
44-
45-
* Start `Live Server` (assuming the port of live server is `5500`). This server will be used by the extension to know, if any of the files have changed.
46-
47-
* In case of PHP & if you're not using XAMPP or any other tool/server, Open a terminal and navigate to the folder your project lives in (generally index.php lives here..) Start a web server by running `php -S localhost:8000`
48-
49-
* Now open pop-up menu of `Live Server Web Extension` and check the option `I don't want proxy setup`. [Follow the screenshot](./img/screenshots/live-server-web-extension-easy-setup.png).
50-
51-
* Now at the Actual Server add `http://localhost:8000/`. (In which address your PHP/Node.js is running)
52-
* Now at the `Live Server` add `http://localhost:5500/`.
53-
54-
* Now open up `http://localhost:8000/` in your browser. On every changes, your page will be refreshed automaticly.
55-
56-
57-
----------
58-
59-
### Proxy Setup
60-
61-
* Install the extension on your browser.
62-
* Install [`VSCode`](https://code.visualstudio.com/download) Editor & [`Live Server`](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) Extension.
63-
* Confiure Live Server settings (`.vscode/settings.json`) as follows :
64-
65-
```js
66-
//.vscode/settings.json
67-
68-
{
69-
// Mainly for static files
70-
"liveServer.settings.useWebExt": true,
71-
72-
/*
73-
If you have dynamic pages (PHP), you have to setup proxy - it's pretty easy.
74-
75-
In easy word, it means you're shifting your real url (actual PHP url)
76-
to another url (which LiveSever will start).
77-
*/
78-
"liveServer.settings.proxy": {
79-
"enable": true, //switch on :)
80-
"baseUri": "/", //from where you want to proxy (live server).
81-
"proxyUri": "http://127.0.0.1:80" //the actual server url (NOT live server).
82-
},
83-
}
84-
85-
```
86-
* ...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.
87-
* Note: You have stay on the new url that will be given by Live Server.
88-
89-
90-
## What is new ?
24+
<br><hr>
9125

26+
## News
9227
* #### Verision 1.0.0 (26.10.17)
9328
* ***[New Feature]*** No need to setup proxy. There is now a way to setup - that is pretty easy & straight-forward.
9429

@@ -100,6 +35,8 @@ There are two ways to setup `Live Server Web Extension`.
10035
* #### Version 0.0.1 (22.10.17)
10136
* Initial Release under BETA.
10237

38+
<br><hr>
39+
10340

104-
## LICENSE
41+
## License
10542
This extension is licensed under the [MIT License](./LICENSE)

‎docs/About.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# About
2+
![Illustration GIF-image](./../img/screenshots/live-server-web-extension.gif)
3+
4+
## That's why I built this extension.
5+
**Lorem ipsum dolor** sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?
6+
7+
<br>
8+
<br>
9+
10+
## Code Insight
11+
```h
12+
master/
13+
┃
14+
┣━━img/ // Folder with images
15+
┃
16+
┣━━popup/ // Folder for the popup page
17+
┃
18+
┣━━manifest.json // Initialize extension
19+
┣━━background.js // Background script
20+
┗━━reload.js // Reload funcionallity
21+
```
22+
23+
#### manifest.json
24+
The manifest.json file is a JSON-formatted file, and is the only file that every extension using WebExtension APIs must contain.
25+
26+
Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality, such as background scripts, content scripts, and browser actions.
27+
[Read more...](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json)
28+
29+
<br>
30+
31+
#### background.js
32+
Background scripts are the place to put code that needs to maintain long-term state, or perform long-term operations, independently of the lifetime of any particular web pages or browser windows.
33+
34+
Background scripts are loaded as soon as the extension is loaded and stay loaded until the extension is disabled or uninstalled. You can use any of the WebExtension APIs in the script, as long as you have requested the necessary permissions.
35+
[Read more...](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/background)
36+
37+
<br>
38+
39+
#### reload.js
40+
info is needed...
41+
42+
*[all through you can use the npm package [live-server](https://www.npmjs.com/package/live-server)]*

‎docs/FAQ.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Frequently Asked Questions
2+
3+
## PHP will download instead of executing
4+
I'm a new to this live server thing but for .html it worked perfectly fine! But now when I want to use it for .php it want's me to download it instead of executing it.
5+
6+
How can I fix it?
7+
8+
**Answer:**
9+
1. [The Common Misconceptions](#the-common-misconceptions)
10+
2. You will need to install a server on your machine or download the necessary requirements. Here is a Stackoverflow question: [PHP server on local machine?](https://stackoverflow.com/questions/1678010/php-server-on-local-machine)
11+
+ [PHP](http://php.net/downloads.php) (just the preprocessor)
12+
+ [XAMPP](https://www.apachefriends.org/index.html) (cross-platform)
13+
+ [MAMP](https://www.mamp.info/en/downloads/) (mac)
14+
+ [WAMP](http://www.wampserver.com/en/) (windows)
15+
+ [AppServ](https://www.appserv.org/) (windows)
16+
17+
<br><hr>
18+
19+
## Another question
20+
Lorem ipsum dolor
21+
22+
**Answer:**
23+
Lorem ipsum dolor
24+
25+
<br><hr>
26+
27+
>## The Common Misconceptions
28+
>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.
29+
>
30+
>The reason I built this browser add-on is to delight the experience of server-side programming. The server-side is heavier than the client-side because it needs a larger server environment to run and preprocess your code in: `php`, `nodejs` and `asp.net`.

‎docs/Setup.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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.
4+
5+
<br>
6+
7+
***Need Help? [Watch Video Tutorial](https://www.youtube.com/watch?v=54wcX1G2GH8)***
8+
9+
<br><hr>
10+
11+
## There are two ways to setup `Live Server Web Extension`.
12+
13+
1. [Direct Setup](#direct-setup) (Easy)
14+
2. [Proxy Setup](#proxy-setup) (Advanced)
15+
16+
<br><hr>
17+
18+
## Direct Setup
19+
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).
22+
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)
28+
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.
32+
7. Visit the `Actual Server Address`
33+
34+
![](./../img/screenshots/direct-setup.png)
35+
36+
<br><hr>
37+
38+
## Proxy Setup
39+
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 :
43+
44+
```js
45+
//.vscode/settings.json
46+
47+
{
48+
// Mainly for static files
49+
"liveServer.settings.useWebExt": true,
50+
51+
/*
52+
If you have dynamic pages (PHP), you have to setup proxy - it's pretty easy.
53+
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+
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.
67+
68+
<!-- <br>
69+
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+
``` -->

‎img/screenshots/direct-setup.png‎

23.7 KB
Loading

0 commit comments

Comments
 (0)