I would like to use both BrowserSync features and Rails/Webpacker (with Vue and Rails 5.1). My setup is working for Javascript from webpack-dev-server.
The SCSS/CSS is compiling correctly and writing to disk.
Browser Sync reloads on HTML file changes.
How would I go about getting this working?
Rails: 3000
Browsersync: 3001
Webpack: 3035
browsersync.js
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3001,
files: ['public/packs/*.css', 'app/views/**/*', 'app/controllers/**/*'],
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3000/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
.
Related
I am using playwright to right test for our website. In playwright.config.ts I have configured to chromium browser with headless set to false. Earlier everything was working file but now while running the test the browser open but it is transparent and only border is visible. The output screenshot is also doesn't contain anything.
I am using ubuntu through wsl2 of windows 11.
The followings are still working fine with playwright:
chromium browser with headless set to true
firefox browser with either headless set to true or false
also chromium browser installed by playwright at location /xxx/xxxx/.cache/ms-playwright/chromium-1028/chrome-linux/chrome is working fine
my playwright config file is
import type { PlaywrightTestConfig } from '#playwright/test';
import dotenv from 'dotenv';
import path from 'path';
// Read from default ".env" file.
dotenv.config();
// Alternatively, read from "../my.env" file.
dotenv.config({ path: path.resolve('./my.env') });
const config: PlaywrightTestConfig = {
use: {
browserName: 'chromium',
// channel: 'chrome',
headless: false
},
webServer: {
command: ' ~/.yarn/bin/netlify dev',
port: 8888
},
testDir: './tests'
};
export default config;
I have a big problem with a system I just created.
I did the standard installation of Laravel 8 with jetstream using the docker and laravel sail...
However, I am not able to do the npm run hot or npm run watch to auto reload or browser sync...
My files are standard with laravel 8 and I haven't made any changes to the code yet.
Informations:
Laravel: v8.41.0
PHP: PHP v8.0.5
Jetstream: v2.3.5
npm: v7.7.6
NodeJS: v15.14.0
my webpack.mix.js looks like this:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
my webpack.config.js looks like this:
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
I have also tried to change the two webpacks with some information I found earlier in research, but really nothing is working, would there be a way for Hot Reload and Browser Sync to work together with Laravel Sail?
While a browsersync script is already included in app.blade.php I did not get it to work either. I removed that line and expanded my webpack.mix.js as follows:
mix.browserSync({
proxy: 'YOURDOMAIN.test',
host: 'YOURDOMAIN.test',
open: 'external'
});
Then run npm run watch- probably twice because it's going to install browsersync - and it's working.
open: 'external' save me ( same i use valet and https )
.browserSync({
proxy: 'https://app.tunnel.test',
host: 'app.tunnel.test',
open: 'external',
https: {
key: homedir + '/.config/valet/Certificates/' + domain + '.key',
cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',
},
})
I'm trying to use dev-server in docker containers with devilbox.
Devilbox port: 80 and host: 127.0.0.1.
I did all configuration to use dev-server in virtual machine that i found: https://symfony.com/doc/current/frontend/encore/virtual-machine.html
But in chrome consol i have this error:
GET http://inmogence.loc/build/app.css net::ERR_ABORTED 404 (Not Found)
(index):98 GET http://inmogence.loc/build/app.js net::ERR_ABORTED 404 (Not Found)
And also i dont have autorefreshing window when i save.
I do the command $ yarn dev-server and tha answer is:
devilbox#php-7.4.9 in /shared/httpd/inmogence/symfony $ yarn dev-server
yarn run v1.22.4
$ encore dev-server --public http://inmogence.loc:80 --host 127.0.0.1
Running webpack-dev-server ...
ℹ ｢wds｣: Project is running at http://inmogence.loc:80/
ℹ ｢wds｣: webpack output is served from http://inmogence.loc:80/build/
ℹ ｢wds｣: Content not from webpack is served from /shared/httpd/inmogence/symfony/public
ℹ ｢wds｣: 404s will fallback to /index.html
DONE Compiled successfully in 866ms 9:14:39 PM
WAIT Compiling... 9:57:12 PM
DONE Compiled successfully in 73ms
So it look that its working.
My webpack.config.js:
var Encore = require('#symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
And my package.json:
{
"devDependencies": {
"#symfony/webpack-encore": "^0.30.0",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server --public http://inmogence.loc:80 --host 127.0.0.1",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
My build/manifest.json:
{
"build/app.css": "http://inmogence.loc:80/build/app.css",
"build/app.js": "http://inmogence.loc:80/build/app.js",
"build/runtime.js": "http://inmogence.loc:80/build/runtime.js",
"build/vendors~app.js": "http://inmogence.loc:80/build/vendors~app.js"
}
And my entrypoints.json:
{
"entrypoints": {
"app": {
"js": [
"http://inmogence.loc:80/build/runtime.js",
"http://inmogence.loc:80/build/vendors~app.js",
"http://inmogence.loc:80/build/app.js"
],
"css": [
"http://inmogence.loc:80/build/app.css"
]
}
}
}
So any solution ?
Using OS X Sierra
I have a rails app with two parts: front-end and back-end.
On back-end I am using rails 4.
On the front-end I am using Angular.
Whenever I have to start the server locally (for development or test) I use 3 distinct console windows.
one to run grunt watch"
another to run http-server ./build/ -p 8000 -c-1
and the last to run rails server
My local backend repository is just a clone of what is running on production.(minus server configuration)
When I use the fronted connected to my remote server it works without problems. However, when I run the backend locally and try to log in, all I get is the following log, and no responses:
=> Booting WEBrick
=> Rails 4.2.7 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2017-01-02 16:19:21] INFO WEBrick 1.3.1
[2017-01-02 16:19:21] INFO ruby 2.3.3 (2016-11-21) [x86_64-darwin15]
[2017-01-02 16:19:21] INFO WEBrick::HTTPServer#start: pid=10496 port=3000
The front end throws the following error:
XMLHttpRequest cannot load localhost:3000/auth_user?
email=admin#railsapp.com&password=VVVVVVVV. Cross origin requests are
only supported for HTTP.
My Angular endpoint file
angular.module( 'common.config', [] )
.factory('endpoints', function() {
var host = 'development';
if (['live.companysite.com'].indexOf(window.location.host) > -1) {
host = 'production';
} else if (['companysite.com'].indexOf(window.location.host) > -1) {
host = 'development';
} else {
host = 'local';
}
var endpoints = {
'production': {
root: 'http://live.companysite.com/'
},
'development': {
root: 'http://companysite.com/'
},
'local': {
root: 'localhost:3000/'
}
};
return endpoints[host];
});
I know that it should be a CORS problem, but as it works perfectly with two remote servers (production and test) I believe that my local configuration might be the problem.
'localhost:3000auth_user?emai' I think you are missing an '/' before auth_user and after :3000, check the line where you define the api in your angular project, probably you need to add a slash .
Check changing this in your config:
'local': { root: "http:// localhost:3000/" }
I have no idea what I do wrong. I would like to use selenium-RC plugin for Grails to do some functional testing. I have created sample test using build-in script (i guess add-selenium-test), which generated (i modified it slighty):
import grails.plugins.selenium.*
import org.junit.*
import static org.junit.Assert.*
import static org.hamcrest.Matchers.*
#Mixin(SeleniumAware)
class FirstTestTests {
#Before void setUp() {
}
#After void tearDown() {
super.tearDown()
}
#Test void something() {
selenium.open "/activate"
assertTrue selenium.isTextPresent("activate")
}
}
I configured SeleniumConfig
selenium {
slow = false // true to run tests in slow resources mode
singleWindow = true // true for single window mode, false for multi-window mode
browser = "*firefox" // can include full path to executable, default value is *firefox or *iexplore on Windows
url = "http://localhost:8080" // the base URL for tests, defaults to Grails server url
defaultTimeout = 3000 // the timeout after which selenium commands will fail
windowMaximize = true // true to maximize browser on startup
screenshot {
dir = "./target/test-reports/screenshots" // directory where screenshots are placed relative to project root
onFail = true // true to capture screenshots on test failures
}
server {
host = "localhost" // the host the selenium server will run on
port = 4444 // the port the selenium server will run on
}
userExtensions = "" // path to user extensions javascript file
}
and I then I typed
grails test-app :selenium
and it seems that everything is done correctly:
INFO 19:30:08,304 RemoteWebDriver instances should connect to: http://127.0.0.1:
4444/wd/hub org.openqa.selenium.server.SeleniumServer
Starting Selenium server on port 4444 ...
INFO 19:30:08,312 Version Jetty/5.1.x org.openqa.jetty.http.HttpServer
INFO 19:30:08,315 Started HttpContext[/selenium-server/driver,/selenium-server/d
river] org.openqa.jetty.util.Container
INFO 19:30:08,318 Started HttpContext[/selenium-server,/selenium-server] org.ope
nqa.jetty.util.Container
INFO 19:30:08,321 Started HttpContext[/,/] org.openqa.jetty.util.Container
INFO 19:30:08,326 Started org.openqa.jetty.jetty.servlet.ServletHandler#55881a8f
org.openqa.jetty.util.Container
INFO 19:30:08,328 Started HttpContext[/wd,/wd] org.openqa.jetty.util.Container
INFO 19:30:08,338 Started SocketListener on 0.0.0.0:4444 org.openqa.jetty.http.S
ocketListener
INFO 19:30:08,340 Started org.openqa.jetty.jetty.Server#42aefb01 org.openqa.jett
y.util.Container
Starting Selenium session for http://localhost:8080 ...
INFO 19:30:08,502 Checking Resource aliases org.openqa.jetty.util.Credential
INFO 19:30:08,510 Command request: getNewBrowserSession[*firefox, http://localho
st:8080, ] on session null org.openqa.selenium.server.SeleniumDriverResourceHand
ler
INFO 19:30:08,512 creating new remote session org.openqa.selenium.server.Browser
SessionFactory
INFO 19:30:08,586 Allocated session 9250557308cc4886a25100eb6c5f3d7e for http://
localhost:8080, launching... org.openqa.selenium.server.BrowserSessionFactory
INFO 19:30:08,717 Preparing Firefox profile... org.openqa.selenium.server.browse
rlaunchers.FirefoxChromeLauncher
INFO 19:30:11,726 Launching Firefox... org.openqa.selenium.server.browserlaunche
rs.FirefoxChromeLauncher
The firefox window is opened, but nothing loads and nothing seems to proceed. Do I miss something?
Sounds to me like an incompatibility between the Selenium RC plugin and the current version of your web browser. You might want to dig into the plugin's dependencies and update everything to the latest versions if you're using a newer version of the browser.
We see this with Geb ( http://www.gebish.org ) when trying to run a webdriver version that is not compatible with the driver version.
Just to add, if you use Chrome and your OS is Ubuntu, then make sure you put the full path to Chrome and make sure that the executable path references chromium-browser and NOT google-chrome.
So your SeleniumConfig should look like this with the relevant line in double asterisks:
selenium {
slow = false
singleWindow = true
**browser = "*googlechrome /usr/bin/chromium-browser"**
url = null
defaultTimeout = 60000
windowMaximize = false
screenshot {
dir = "./target/test-reports/screenshots"
onFail = false
}
server {
host = "localhost"
port = 4444
}
userExtensions = ""
}