When you try to "npm start" your react app for the first time on Windows 10, it will launch on internet explorer / Edge as default. Do you want to ALWAYS launch on a different browser?
You can simply change your default browser like below: (see this for how to do it step by step with images).
Navigate to Settings. You can get there from the Start menu.
Select System.
Click Default apps in the left pane.
Click Microsoft Edge under the "Web browser" heading. ...
Select the new browser (ex: Chrome) in the menu that pops up.
If you want to keep your default browser and "npm start" with another browser, see this thread.
If you are using create-react-app:
You need to set the BROWSER .env variable:
By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension.
See: https://facebook.github.io/create-react-app/docs/advanced-configuration
Related
After working on my React project, I run npm start but my google chrome browser does not start automatically.
I manually write "http://localhost:3000" are there any solutions???
Wrong URL
localhost://3000 is wrong, it should be http://localhost:3000
Auto launch
If you're trying to get Create React App to open the dev page automatically, you may need to set your browser explicitly. Look at the environment variable called BROWSER in the Create React App config. It will look like this BROWSER=chrome, and you can put this in the .env file at the root of your directory. chrome might not be the right value, check documentation.
If the browser doesn't automatically launch, there may be an issue with your OS
concerning the execution of an application developed with react js if I type npm start; the execution does not start automatically; the terminal shows me the url that I must type and I write it manually in my browser. and I notice that a similar problem occurs when I type herroku login if I want to deploy a project. I think there is a problem with my browser
I have a simple react/redux app that I can run from the command line via npm start, and debug from the browser, but I would like to continue its development using Intellij. Unfortunately, the snippets of advice in don't provide enough overall context, given my level of web-development experience, to help very much. And I haven't been able to find a simple example application to use as a pattern to figure out the process.
Principal question: I can open the application directory structure in Intellij, see all the file of my little application, and build it without errors, so I need to create a run configuration. Which configuration template should I use, and to what do I set the associated parameters so I can run and debug it from Intellij?
Thanks!
The docs give enough information to start from... You need building and starting your application using npm start (can be done in IDEA by opening your app package.json in the editor and clicking the Run icon in the gutter to the left of your start script). Then you have to create a new JavaScript debug configuration: choose Run | Edit Configurations, click Add icon, and choose JavaScript Debug from the list. In the URL field, enter URL you normally use to open your app in browser (http://localhost:3000/ or whatever it looks like). Click Debug
with your sample app:
select npm start run configuration, press Run
select Debug Application configuration, press Debug:
See https://www.jetbrains.com/webstorm/guide/tutorials/react_typescript_tdd/chrome_debugging/
I found two ways to run React-app in Intellij Idea but it has two different drawbacks:
in 1st scenario Idea doesnt work as debugger
2nd we need to run 'npm start' manually. If we need to rerun 'npm start' we need to stop it. The port will be still in use and we shall to specify the new port in the configs and in npm start another port from the start to successfully use it as debugger;
Let's configure react-app from the scratch:
1. add new configuration: JavaScript Debug
name: react-app
URL: http://192.168.1.106:3000/
Browser: Chrome
Script before launch: Run npm script [reactapp-directory/package.json]
|- package.json: ..../reactapp-directory/package.json
|- Command: start
|- Node interpreter: Project node(/usr/bin/node) 10.19.0
|- Package manager: Project node(/usr/bin/npm 6.14.4
Save changes
2. Open your script and add debug breakpoint
3. and click 'debug' button.
What we expect but dont achieve:
(I've already placed the issue-ticket in the jetbrains support
Idea):
Idea successfully runs the app with set npm start
opens browser new tab with specified url http://192.168.1.106:3000/
stops on the breakpoint
What happens exactly, there are two different scenarios:
1st: It performs first two steps (
successfully runs the app with set npm start
opens browser new tab with specified url http://192.168.1.106:3000/
) but doesnt work as debugger so we need to use browser DevTool to debug
2nd: To make it work the build-in debugger you should to change the run steps:
run 'npm start' from the shell by yourself
click 'debug' with the set configuration
remove from the config the Script before launch
or
run see the running script clashes with previous npm start one and you need to refuse it by pushing button 'n';
Idea opens new tab with specified url and successfully stops on the chosen debugging point
I found the simplest way the achieve all the above without hustle. Open Terminal on Webstorm and start your app normally using npm start as shown below.
npm start
Click on the link while pressing cmd + shift on Mac, on Windows or Linux use Ctrl + Shift and a click. This will open debug sessions and all your break points will be observed
Can't find where to change the default startup browser on Ubuntu. When I start pgAdmin4 the default browser opens, but I would like to start a different browser (eg: Firefox). In windows you can right click the service, but I'm stuck finding the way to change this on Unbuntu.
With the latest version of pgAdmin4, developers have added copy URL option on right click on tray icon, Download the latest version then right click on pgAdmin4 tray icon which will give you option to Copy URL, once you click that option then open your desired browser and paste the URL and hit Enter.
And you are good to go :)
Also, there is an option to run the custom browser command also.
In new chrome versions you can run pgAdmin 4 as "native" desktop app. While the pgAdmin v4 web server is running, right click the icon in the Windows System Tray and select Configure... In the Browser Command input add the following:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=%URL%
Note: Above path can change for you in Ubuntu.
If you want to run in chrome browser window, configure command like this:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" %URL%
Note: Above path can change for you in Ubuntu.
Hope this helps.
It is kind of a trick. It is quite fast to change the default browser in ubuntu, then run pg admin and change the default browser back. Did not found how to do it like in windows.
I'm looking to disable (for a few seconds) other add-ons installed on the browser, then to re-enable them.
My option right now:
Management API (https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/management) - doesn't work on Webextensions Firefox.
Are you familiar with a method of either :
a. Disabling a specific add-on for a short time.
b. Opening a new window with all add-ons disabled.
Thanks,
Harlan
There is no way to accomplish what you desire from a WebExtension. Even in Firefox 55, where management.setEnabled() exists, that API is only permitted to enable and disable themes, not regular extensions.
You can accomplish this from other types of Firefox extensions, but not a WebExtension.
If your purpose is debugging/testing an addon, then here is two ways to achive
b. Opening a new window with all add-ons disabled
1. using web-ext tool
There is a command line tool called web-ext to help develop web-extensions for Firefox. This tool allows run your addon on a temporary default profile. Since a default profile does not have any user-installed extensions, it is what you could use.
Install web-ext
Go to your addon directory cd <your_addon_directory>
Run web-ext web-ext run
From MDN:
web-ext run Builds and then temporarily installs an extension on Firefox so it can be tested. By default, this will also watch all extension source files and reload the extension in Firefox as files change.
More info about using web-ext on Mozilla Developer Network: Getting started with web-ext
2. Manually
With this option you need to run a default profile manually using Firefox Profile Manager. Here you can read instruction how to work with Firefox profiles. You can create a separate profile specially for testing your addons. After starting Firefox with that profile go to about:debuggingpage and load your addon.
I have a very small Ionic app I've been working on (just a couple angular routes/views). When I run it using "ionic serve", the app loads in my browser as expected. However, when I upload it using "ionic upload" and view it in the Ionic View app, it appears as though none of my javascript works, or my routes are not working.
How can I debug this issue? Are there build tools to detect errors or anything along those lines?
As #Keval says if you're running Android you can debug on-the-fly using Chrome
enable Developer options on your device (Settings > About, then find Build number and keep tapping it...yes really!)
In Developer options, enable USB debugging checkbox
plug in with a USB cable
run your app on the device.
At some point your device will then show a popup requiring you to accept debug commands from the remote computer, click Accept. If it doesn't appear the first time, unplug and replug usually fixes it
head to chrome://inspect in desktop Chrome, and click inspect under your device
A new Chrome window will open with all the juicy abilities you need - inspect code, set breakpoints, look at network speeds, access the console and so on
You can also do this on iOS via Safari http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/
I had the same issue recently. The problem was that I stored my Ionic views NOT in /templates folder.
Please, check, maybe my answer will be useful for you.