Hello All and I was wondering if anyone uses Browser-sync with NotePad++. I use both VS Code and still fall back to Notepad++ when learning or experimenting. As of February 5th I could still use it globally as the simple web server and for hot reload.
I have it installed -g with npm and use a simple script loaded into the directory from cmd.
browser-sync start --server --no-notify --files "html/*.html", "js/*.js", "css/*.css"
That was all I had to do to localhost:3000 to load the HTML with all CSS styles and JavaScript.
But now it opens to the port 3000 but with a "Cant/Get" message and a console error message.
It always listed a warning message in the console. That you are not to use document.write(), but I guess it was part of how Browser-sync was set up. Now this is the error that it throws.
But in the terminal it shows Browser-sync watching ....
I was wondering if they thought it a vulnerability and now require a config file and it listed as a saved dev dependencies??
It was nice to use Notepad++ with the hot reload and using the cmd is good practice. You get spoiled with VS Code and the other IDEs.
Just wondering if anyone can make sense of the error message in the console. Or still can get it to work on a global level.
Related
I am working on a Vue js application but am having difficulty getting it to run/debug within IntelliJ. I am currently running it from the command line but I'm interested in getting it to debug in IntelliJ. Not many tutorials out here on getting this set up to work. Is there anyone that has experience in setting up this framework and IDE?
Steps are rather straightforward and described in blogpost:
First, install the JetBrains IDE Support Chrome extension. This will bind the browser debugger environment with IntelliJ in real-time.
start the server with npm serve (can be done from a gutter in package.json):
create a new JavaScript debug configuration, specify the URL your app is running on (usually http://localhost:8080) in it, put the breakpoints right in the source code, and start the debug session.
See also https://blog.jetbrains.com/webstorm/2019/03/get-started-building-apps-with-vue-js-in-webstorm/ for some hints on working with Vue.js in IDEA. And https://medium.com/dailyjs/stop-painful-javascript-debug-and-embrace-intellij-with-source-map-6fe68eda8555
You can add "Run Configuration" for any project to run in Intellij. For this, you must have a run script in package.json.
Refer below link for a screenshot. NPM Run Configuration Sample:
Choose NPM and give like this. Once done, you are all ready for clicking the RUN button available in the toolbar to run the project
I created a Hello World application using this tutorial.
When I build the application from the terminal in VS Code typing npm start VS Code or npm, no clue who, will open a new browser window... without even an url or anything in it.
Is there anyway to prevent this from happening? i.e. if I type in the console npm start I do not mind what happens but I want to avoid to open automatically a window of my browser.
Try to run BROWSER=none npm start or create an .env file with BROWSER=none. Refer to Advanced Configuration of create-react-app official docs
You can create a .env file at the root of your project and insert the BROWSER=none npm start property.
An alternative would be direct throught terminal, like this: set BROWSER=NONE && npm start
Here you can see the discussing about that.
I have a project from other developer and I try to add to it few components. But I still cannot run it.
I've installed all dependences using yarn install, than I've executed npm run dev and when I execute npm run hot, there aren't any error in console on my localhost:8081, I see clear white screen.
Can you help me please, give me an idea where to look for a problem? Thank you.
It was amazing stupid error. I have XAMPP installed on my PC and Tomcat works on port 8080, so npm run hot started server on 8081, but additional javascripts was loaded from 8080. ...
It wasn't only one reason, I don't remember how it becames to show me those js-files. First, they wasn't called from script any time.
In order to debug with node-inspector I need to start my app with the node --debug command. Up to this point I have only used sails lift to start my Sails.js app, so I am unsure of how to start my app using the normal node command.
So you can actually launch a sails project with node app.js --debug if you have sails installed in your project, rather than only system-wide. Go to your project's root directory and run npm install. Sails should already be in your package.json and thus should install to your project directory.
As of Sails v0.10.x, you can do sails debug instead of sails lift.
sails inspect since Sails v1.0
As of sails v1.0, sails debug is deprecated for newer Node.js, and you should instead use sails inspect.
This is documented at: https://sailsjs.com/documentation/reference/command-line-interface/sails-inspect and is presumably done to match the newer node --inspect interface.
Have you tried using node-webkit to run your node.js apps? This is what we use at work to debug our node.js server applications. It is quite useful runtime based on chromium which you can use to inspect your code using familiar breakpoints, stack traces, variable inspection and such without having to rely on node-inspector (which I find hard to use to be honest).
What you do is instead of using console command 'node you-app.js' you set the node-webkit to launch your app, run the webkit then open its console (which is the same as console in Chrome browser) and from there you can open your source files and start debugging like any other client side JavaScript code.
node inspect
You can also use the command line debugger with:
node inspect app.js
This stops at the beginning, so do a continue:
c
And now, when your code with a statement:
debugger
gets executed, you fall into the Node CLI debugger as usual.
Tested on Sail v1.1, Node v10.15.1, Ubuntu 18.10.
nodemon --inspect and nodemon inspect
You can use those to inspect when using nodemon, which automatically reloads the app on file save: Auto reloading a Sails.js app on code changes?
Those options are analogous to node inspect and node --inspect: node inspect works with debugger statements, and node --inspect works with the Chrome debugger.
Especially useful with the "Open dedicated DevTools for Node" feature: Can I get node --inspect to open Chrome automatically
nodemon inspect is a bit annoying as it requires a continue everytime you make any app changes and nodemon restarts the server. TODO find a way around it.
It's a fairly small thing, but it feels like I'm manually refreshing the node-inspector tab in chrome a million times a day, and there must be a better way.
When a file changes, and node restarts, and node-inspector detaches from target -- is there a way for it to automatically re-attach itself?
This question is a duplicate of How can I make node-inspector restart when node is restarted?. See the accepted answer for a workaround solution using GreaseMonkey.
There is also a GitHub issue filled in the Node Inspector project: #266.
Here's instructions to have a Node console (not REPL), while using nodemon, with a server output console, all from within VSCode.
Node.js debugging in VS Code with Nodemon
The only thing to look out for is that it needs to be started manually with
nodemon --inspect ./bin/www
You can't let nodemon use your package.json start defaults because it won't restart.
The only thing this lacks is a webpage restart (if you're using web front end) but that's a whole other question.