I am running windows 10. Default browser is Edge. I would like Webpack to open in firefox.
I have tried
devServer: {
inline: true,
open: 'mozilla',
port: 8080
},
But still open in Edge. Have also tried 'firefox'. Looking at the docs, it gives an example for chrome, which as various names depending on the OS.
Does anyone know what I need for firefox on windows 10?
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 8090,
open: 'firefox'
}
It's working for me!
open: 'chrome' for google browser.
env: os is windows 7.webpack-dev-server version is 3.1.14 and webpack version is 4.28.3.
I updated the below section of my package.json file to launch it in firefox and not my default browser.
{
"name": "webpack-starter",
"version": "1.0.0",
"description": "A light foundation for your next frontend project based on webpack.",
"scripts": {
"build": "webpack --config webpack/webpack.config.prod.js --colors",
"start": "webpack-dev-server --open firefox --config webpack/webpack.config.dev.js"
},
Note the line:
"start": "webpack-dev-server --open firefox --config webpack/webpack.config.dev.js"
I added firefox (my default browser is Chrome on Mac and Edge on Windows 10).
Save and then in the Terminal the command is npm start. It should now launch in Firefox instead of Chrome.
I found this worked for both Mac and PC. I used the webpack-starter on github here: https://github.com/wbkd/webpack-starter.git
for the foundation of my project.
Any questions let me know!
Related
I have a project in CRA. I am using Windows 10 and my default browser is Firefox. I would like my project to start with the Microsoft Edge browser and not with Firefox. I have used a line like this in the package.json script to open with Chrome and it works:
"start: react": "cross-env BROWSER = chrome react-scripts start",
But if I put this for Edge it doesn't work for me:
"start: react": "cross-env BROWSER = edge react-scripts start",
Is there a way to make it work?
Problem solved:
The detail was that I placed the script line in the following way using the browser name "edge":
"start: react": "cross-env BROWSER = edge react-scripts start",
But the name of the browser is "msedge". In this way the script line looks like this:
"start: react": "cross-env BROWSER = msedge react-scripts start",
This way it works properly.
I have an application that is a combination of a node middleware server and a next.js front end gui with react components. It was running ok, but then, when I tried to build it in production mode, I keep getting the following error:
UnhandledPromiseRejectionWarning: Error: Cannot find module 'C:\Users\mgardner\workspace\qa-tool-backoffice\.next\prerender-manifest.json'
Require stack:
- C:\Users\mgardner\workspace\qa-tool-backoffice\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\mgardner\workspace\qa-tool-backoffice\node_modules\next\dist\server\next.js
- C:\Users\mgardner\workspace\qa-tool-backoffice\server.js
I'm a little confused as to how to get the next front end to run concurrently with the node/express server. Here's my package.json file:
{
"name": "ibo-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"mockdb": "json-server --watch public/mockdb.json --port 3001",
"dev": "concurrently --kill-others \"json-server --watch public/mockdb.json --port 3001\" \"npm start\"",
"build": "next build",
"start": "node server.js && next start"
},
The reason this was happening was because my next build process was failing. It was failing because I had some old react functions in the public pages folder.
The issue was that my pages not generated at build time in Nextjs correctly due my path included not correctly try to check your page collecting data fully and pages generated correctly.
I have tried using Nx in an attempt to make use of Monorepos. I have been facing an issue to serve multiple apps via nx run-many command. Can anyone correct me if I'm doing something wrong?
Command used: nx run-many --target=serve --all
I can see the Nx Console logging all the available apps but only running one
> NX Running target serve for projects:
- app1
- app2
———————————————————————————————————————————————
> nx run app1:serve
Try this:
nx run-many --parallel --target=serve --projects=frontend,backend
This happens due to port overriding, if you have multiple frontend apps for example they will run on the same port.
You can manage every project configuration in project.json file, and there you can handle different port for every project.
example:
"serve": {
"executor": "#nrwl/web:dev-server",
"options": {
"buildTarget": "react-todo:build",
"hmr": true,
"port": 3001
},
"configurations": {
"production": {
"buildTarget": "react-todo:build:production",
"hmr": false
}
}
},
this is a react config in (apps/<Your_Project_Name>/project.json)
nx run-many --target=serve --all --maxParallel=100
The default value for --maxParallel is three, it means runs tasks in batches of three by default.
Additional, Exclude few apps to not serve then.
nx run-many --target=serve --all --maxParallel=100 --exclude=app-name
Github
Update solution in 9/2022.
go to package.json adding this script that allow us to run many project with only one command
"all": "npx nx run-many --target=serve --all --maxParallel=100"
inside apps folder, there are several application, and go to their package.json, and edit `targets -> serve -> options like this sample
"options": {
"buildTarget": "your app name:build",
"hmr": true,
"port": 4201 // adding this
},
You can change the serving port by editing package.json
"serve": {
"executor": "#nrwl/web:dev-server",
"options": {
"buildTarget": "admin-web:build",
"port": 4220,
"hmr": true
},
"configurations": {
"production": {
"buildTarget": "admin-web:build:production",
"hmr": false
}
}
}
After that you can run nx run-many
nx run-many --parallel --target=serve --projects=frontend,backend
For now, Remix uses a hardcoded 8002 port for file watcher. When running two or more remix apps at once, either one of the apps (which was started later) would have an error accessing the file server port.
To override, add a .env or .env.local file in your respective app directory and add the environment variable REMIX_DEV_SERVER_WS_PORT.
apps/
- app1
.env.local -> REMIX_DEV_SERVER_WS_PORT=8003
- app2
.env.local -> REMIX_DEV_SERVER_WS_PORT=8004
This worked for me.
My project is based on create-react-app. npm start or yarn start by default will run the application on port 3000 and there is no option of specifying a port in the package.json.
Just update a bit in webpack.config.js:
devServer: {
historyApiFallback: true,
contentBase: './',
port: 3000 // <--- Add this line and choose your own port number
}
then run npm start again
This will set the default port for that app to the on you specified
Alternatively:
modify part of package.json from:
"start": "react-scripts start"
for Linux and MacOS to:
"start": "PORT=3006 react-scripts start"
Windows to:
"start": "set PORT=3006 && react-scripts start"
With create react app, you can create a file called .env at the root level, and put the following code inside it :
PORT=3129
Add .env file in source folder and add entry like below
PORT=9001
run this code
yarn start --port 30022
I am using the latest Visual Studio Code and Chrome debugger extension and my code is React SPA.
When I am trying to set breakpoints inside generator functions
(i.e. function* ), the breakpoint is moved to the top of the function and I can’t stop when I want.
Step Over also doesn’t work, but move me to some low level library.
For normal functions breakpoints are working correctly.
Am I missing something? Is it a known limitation or a bug? Is any tools( e.g. Edge/Firefox or native Chrome debugger) that allow debugging of generator functions better?
I'm currently seeing the same thing and am looking to find a solution. This is what I've found so far and might be of some help.
In our case, we use babel to transpile our code, and looking at the code produced by babel we could see that generators were being transpiled for the browsers targeted by browerslist read by #babel/preset-env. So as an initial test, we removed #babel/preset-env from our dev build and tested locally in Chrome 70. Generators were no longer being transpiled, and we could successfully set breakpoints in VSCode.
So for us the solution was to not transpile for dev builds, and to transpile for our targeted browsers for production builds.
For reference, here is the babel config we used to test this solution:
module.exports = {
presets: [
'#babel/preset-react'
],
plugins: [
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-modules-commonjs'
],
env: {
production: {
presets: [
[
'#babel/preset-env',
{
debug: false,
useBuiltIns: 'usage'
}
]
],
plugins: [
'#babel/plugin-transform-runtime'
]
}
}
}
We can set BABEL_ENV=production in any production npm scripts where we want to target our supported browsers.
{
"name": "testapp-ui",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rm -rf dist && mkdir dist && NODE_ENV=production BABEL_ENV=production npm run build:webpack",
"build:dev": "rm -rf dist && mkdir dist && NODE_ENV=development npm run build:webpack",
"build:webpack": "webpack --progress --debug",
...
Thanks to Bernard Leech's answer , I’ve updated the .babelrc configuration file ( one of possible formats as described in https://babeljs.io/docs/en/configuration).
And it allowed to set breakpoints in dev environment.
The changed lines in .babelrc are commented out:
{
"presets": [
//[
// "es2015",
// {
// "modules": false
// }
//],
"react",
"stage-0"
],
"env": {
"test": {
"presets": ["react"]
"prod": {
"presets": [["es2015"], "react"]
}
}
}
To use different configurations for dev and prod you should set e.g.
BABEL_ENV=prod and have different sections in “env” element ( from
How do you configure babel to run with different configurations in different environments )
Related links:
How to debug ES6 NodeJS with VSCode
Debugging with babel-register + NodeJs does not work #5728