Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tyler36/browsersync-demo
https://github.com/tyler36/browsersync-demo
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/tyler36/browsersync-demo
- Owner: tyler36
- Created: 2022-04-13T02:19:56.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-10T00:28:49.000Z (22 days ago)
- Last Synced: 2024-09-10T04:14:33.708Z (22 days ago)
- Language: PHP
- Size: 1.54 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Browsersync with DDEV
- [Intro](#intro)
- [Requirements](#requirements)
- [Setup](#setup)
- [Usage](#usage)
- [Via DDEV command](#via-ddev-command)
- [Via Laravel-mix](#via-laravel-mix)
- [Errors](#errors)
- ['400 Bad Request: The plain HTTP request was sent to HTTPS port'](#400-bad-request-the-plain-http-request-was-sent-to-https-port)
## Intro
This project is demo for [Browsersync](https://browsersync.io/) with DDEV.
It uses [Laravel](https://laravel.com/) 9.
It runs Browsersync through [`laravel-mix`](https://laravel-mix.com/).
## Requirements
- PHP 8
- DDEV 1.19
## Setup
- Clone project
```shell
git clone https://github.com/tyler36/browsersync-demo
cd browsersync-demo
```
- Start DDEV
```shell
ddev start
```
- Install dependencies & packages
```shell
ddev composer install
ddev npm install
```
- Configure Laravel environment
```shell
ddev artisan key:generate
```
- Restart DDEV to manage settings
```shell
ddev restart
```
## Usage
Below shows 2 different ways can use Browsersync.
### Via DDEV command
Start Browsersync via the DDEV helper command.
```shell
$ ddev browsersync
Proxying browsersync on https://browsersync-demo.ddev.site:3000
[Browsersync] Proxying: http://localhost
[Browsersync] Watching files...
[Browsersync] Reloading Browsers...
```
### Via Laravel-mix
Older Laravel projects used Laravel Mix to compile assets.
To add Browsersync to Laravel Mix, complete the following steps.
This is _not_ required if you use the DDEV helper command.
- Add [Browsersync](https://laravel-mix.com/docs/4.0/browsersync) to Laravel Mix's `./webpack.mix.js`
- Replace `$DDEV_HOSTNAME` with your site's hostname.
```js
let url = 'browsersync-demo.ddev.site';
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
])
.browserSync({
proxy: url,
host: url,
open: false,
});
```
- Run the watcher. Note: On the first attempt, Laravel-mix may download required packages.
```shell
$ ddev npm run watch
webpack compiled successfully
[Browsersync] Proxying: http://browsersync-demo.ddev.site
[Browsersync] Access URLs:
---------------------------------------------------
Local: http://localhost:3000
External: http://browsersync-demo.ddev.site:3000
---------------------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
```
- You must access the site via HTTPS
- For example `https://browsersync-demo.ddev.site:3000`
## Errors
### '400 Bad Request: The plain HTTP request was sent to HTTPS port'
- Access the site via HTTPS, and **not** the HTTP address shown.For example
- ❌ `http://browsersync-demo.ddev.site:3000`
- ✅ `https://browsersync-demo.ddev.site:3000`
This is because of how DDEV router works.