Skip to content

Instantly share code, notes, and snippets.

@happycollision
Created September 5, 2016 19:46
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save happycollision/0cd4afbc36f8632e26ab813a74072040 to your computer and use it in GitHub Desktop.
Save happycollision/0cd4afbc36f8632e26ab813a74072040 to your computer and use it in GitHub Desktop.
Rails and Browsersync without a need for Gulp or Grunt. Thanks to @wnstn and @maykefreitas.
// This gist is based on @wnstn's great [gist](https://gist.github.com/wnstn/36010c8378e850cc3580)
// and @maykefreitas's [advice](https://github.com/BrowserSync/browser-sync/issues/977#issuecomment-236443965) about turbolinks.
// Code below is generated after running `browser-sync init` in your project's root directory.
// I commented the lines I changed or added so you can run it from scratch as well, if you like.
/*
|--------------------------------------------------------------------------
| Browser-sync config file
|--------------------------------------------------------------------------
|
| For up-to-date information about the options:
| http://www.browsersync.io/docs/options/
|
| There are more options than you see here, these are just the ones that are
| set internally. See the website for more info.
|
|
*/
module.exports = {
"ui": {
"port": 3001,
"weinre": {
"port": 8080
}
},
// The following was originally:
// "files": false,
"files": [
"app/assets/stylesheets/**/*.scss",
"app/assets/javascripts/**/*.js",
"app/views/**/*.erb"
],
"watchOptions": {},
"server": false,
// This gets it running properly with Rails
"proxy": "localhost:3000",
"port": 3000,
"middleware": false,
"serveStatic": [],
"ghostMode": {
"clicks": true,
"scroll": true,
"forms": {
"submit": true,
"inputs": true,
"toggles": true
}
},
"logLevel": "info",
"logPrefix": "BS",
"logConnections": false,
"logFileChanges": true,
"logSnippet": true,
// This snippetOptions bit is new and takes care of turbolinks clashing with browsersync
"snippetOptions": {
rule: {
match: /<\/head>/i,
fn: function (snippet, match) {
return snippet + match;
}
}
},
"rewriteRules": false,
"open": "local",
"browser": "default",
"xip": false,
"hostnameSuffix": false,
"reloadOnRestart": false,
"notify": true,
"scrollProportionally": true,
"scrollThrottle": 0,
"scrollRestoreTechnique": "window.name",
"scrollElements": [],
"scrollElementMapping": [],
"reloadDelay": 0,
"reloadDebounce": 0,
"reloadThrottle": 0,
"plugins": [],
"injectChanges": true,
"startPath": null,
"minify": true,
"host": null,
"codeSync": true,
"timestamps": true,
"clientEvents": [
"scroll",
"scroll:element",
"input:text",
"input:toggles",
"form:submit",
"form:reset",
"click"
],
"socket": {
"socketIoOptions": {
"log": false
},
"socketIoClientConfig": {
"reconnectionAttempts": 50
},
"path": "/browser-sync/socket.io",
"clientPath": "/browser-sync",
"namespace": "/browser-sync",
"clients": {
"heartbeatTimeout": 5000
}
},
"tagNames": {
"less": "link",
"scss": "link",
"css": "link",
"jpg": "img",
"jpeg": "img",
"png": "img",
"svg": "img",
"gif": "img",
"js": "script"
}
};
/*
*** Don't actually include this comment in the file. Bad JSON. ***
This file is generated when you `npm init` from the terminal.
Run `npm install browser-sync --save-dev` to get browser-sync added to `devDependencies` below
Then manually add the `scripts.browsersync` bit below.
Finally, open one terminal window for Rails and one for Browsersync.
Run `rails s` (or `rails -s -b 0.0.0.0:3000` if you have trouble) in one window.
Run `npm run browsersync` in the other.
*/
{
"name": "your-package-name",
"version": "1.0.0",
"description": "This README would normally document whatever steps are necessary to get the application up and running.",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"browsersync": "browser-sync start -c bs-config.js"
},
"author": "@your-handle",
"devDependencies": {
"browser-sync": "^2.13.0"
}
}
@happycollision
Copy link
Author

Rails error screens are still problematic and require a manual refresh, but oh well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment