Skip to content

Commit

Permalink
[docs] Minor edit + fix product names + curl quotes (#43)
Browse files Browse the repository at this point in the history
* Minor edit + fix product names + curl quotes.

* Another B.
  • Loading branch information
mattstein authored Feb 10, 2023
1 parent b24e8e8 commit c20f3a4
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@

- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [What does this add-on do and add?](#what-does-this-add-on-do-and-add)
- [Other ways to use browsersync with this add-on](#other-ways-to-use-browsersync-with-this-add-on)
- [What does this add-on do?](#what-does-this-add-on-do)
- [Other ways to use Browsersync with this add-on](#other-ways-to-use-browsersync-with-this-add-on)
- [Basic usage](#basic-usage)
- [Problems](#problems)
- [Laravel-mix configuration](#laravel-mix-configuration)
Expand All @@ -22,18 +22,18 @@ This add-on allows you to run [Browsersync](https://browsersync.io/) through the

## Getting Started

- Install the DDEV browsersync add-on:
- Install the DDEV Browsersync add-on:

```shell
ddev get ddev/ddev-browsersync
ddev restart
ddev browsersync
```

The new `ddev browsersync` global command runs browsersync inside the web container and provides a
link to the browsersync proxy URL, something like `https://<project>.ddev.site:3000`.
The new `ddev browsersync` global command runs Browsersync inside the web container and provides a
link to the Browsersync proxy URL, something like `https://<project>.ddev.site:3000`.

NOTE: The browsersync'd URL is ***HTTPS***, not HTTP. ddev-router redirects traffic to HTTPS, but browsersync does not know this.
The Browsersync’d URL is ***HTTPS***, not HTTP. ddev-router redirects traffic to HTTPS, but Browsersync does not know this.

EG.
"External: <http://d9.ddev.site:3000>" => Access on **<https://d9.ddev.site:3000>**
Expand All @@ -49,20 +49,20 @@ If you run `ddev browsersync` from a local project and get `Error: unknown comma
```


## What does this add-on do and add?
## What does this add-on do?

1. Checks to make sure the DDEV version is adequate.
2. Adds `.ddev/web-build/Dockerfile.ddev-browsersync`, which installs browsersync using npm.
2. Adds `.ddev/web-build/Dockerfile.ddev-browsersync`, which installs Browsersync using npm.
3. Adds a `browser-sync.js` to define the operation of the base setup.
4. Adds a `.ddev/docker-compose.browsersync.yaml`, which exposes and routes the ports necessary.
5. Adds a `ddev browsersync` shell command, which lets you easily start browsersync when you want it.
5. Adds a `ddev browsersync` shell command, which lets you easily start Browsersync when you want it.

## Other ways to use browsersync with this add-on

There are many other options to integrate browsersync into your project, including:

- [Grunt](https://browsersync.io/docs/grunt)
- [Laravel-mix](https://laravel-mix.com/docs/4.0/browsersync)
- [Laravel Mix](https://laravel-mix.com/docs/4.0/browsersync)

Please see [Browsersync documentation](https://browsersync.io/docs) for more details.
PRs for install steps for specific frameworks are welcome.
Expand All @@ -72,13 +72,13 @@ PRs for install steps for specific frameworks are welcome.
The existing example with just `ddev browsersync` should work out of the box.
There is no need for additional configuration, but you may want to edit
the `.ddev/browser-sync.js` file to specify exactly what files and directories
should be watched. If you watch less things it's easier on your computer.
should be watched. If you watch less things its easier on your computer.

### Problems

- If you get `Error: ENOSPC: System limit for number of file watchers reached, watch '/var/www/html/web/core/themes/classy/images/icons/video-x-generic.png'` it means you either have to increase the file watcher limit or decrease the number of files you're watching.
- To decrease the number of files you're watching, edit the `ignore` section in `browser-sync.js` (or another config file if you have a more complex setup).
- On colima, `colima ssh` and `sudo sysctl fs.inotify.max_user_watches` to see how many watches you have. To increase it, use something like `sudo sysctl -w fs.inotify.max_user_watches=2048576`. Unfortunately, this has to be done on every colima restart.
- If you get `Error: ENOSPC: System limit for number of file watchers reached, watch '/var/www/html/web/core/themes/classy/images/icons/video-x-generic.png'` it means you either have to increase the file watcher limit or decrease the number of files youre watching.
- To decrease the number of files youre watching, edit the `ignore` section in `browser-sync.js` (or another config file if you have a more complex setup).
- On Colima, run `colima ssh` and `sudo sysctl fs.inotify.max_user_watches` to see how many watches you have. To increase it, use something like `sudo sysctl -w fs.inotify.max_user_watches=2048576`. Unfortunately, this has to be done on every Colima restart.
- On Docker Desktop for Mac, `docker run -it --privileged --pid=host justincormack/nsenter1` and `sysctl -w fs.inotify.max_user_watches=1048576`. Unfortunately, this has to be done again on every Docker restart.
- On Docker Desktop for Windows, add or edit `~/.wslconfig` with these contents:

Expand All @@ -87,9 +87,9 @@ should be watched. If you watch less things it's easier on your computer.
kernelCommandLine = "fs.inotify.max_user_watches=1048576"
```
- On Linux, you can change `fs.inotify.max_user_watches` on the host in /etc/sysctl.d/local.conf or elsewhere.
- On Linux, you can change `fs.inotify.max_user_watches` on the host in `/etc/sysctl.d/local.conf` or elsewhere.
### Laravel-mix configuration
### Laravel Mix Configuration
Demo: <https://github.com/tyler36/browsersync-demo>
Expand All @@ -111,7 +111,7 @@ mix.js('resources/js/app.js', 'public/js')
});
```

- Start browsersync service
- Start Browsersync service

```shell
ddev exec npm run watch
Expand Down

0 comments on commit c20f3a4

Please sign in to comment.