I am trying to incorporate webhint which is a linting tool that
will help you with your site's accessibility, speed, security and more,
by checking your code for best practices and common errors.
So its installation is as follows :-
npm install hint --save-dev
npm create hintrc (creates a config file)
then I add hint to scripts in package json
"hint" : hint
I run the local server using ng serve in one cmd
And I run webhint in other cmd using
npm run hint -- http://localhost:4200
I wanted to run the ng serve/build along with npm run hint.
I tried steps on link https://webhint.io/docs/user-guide/development-flow-integration/local-server/
I also tried &&, | and concurrency but all failed.
What I want is to run both these ng serve/build and npm run hint using one command.
Any help would be appreciated.
When an angular application with multiple components is run and webhint is run, the html or json formatters show errors but line numbers are column -1 and row -1.
Most likely this is because the html of the page is generated on the client side so the line/col don't make a lot of sense as it is generated dynamically. If you tell the browser to so the pages code you only obtain the initial html, and if you go to the elements panel in the devtools line and column don't have sense there.
The errors should have the html of the element with the error and that should hopefully help you identify the template with the issue.
That said, we have plans to improve this experience but need to finish a few things first.
How does webhint traverse the code using routes or urls so I can better understand it ?
When using Chrome or jsdom we wait until the page is loaded and then analyze all the html while keeping track of all the network requests. In the case of the local we analyze all the files in the folder passed as a parameter.
npm run all and concurrency don't work for me. ng serve only keeps running.
Do you have the code somewhere so we can take a look? Enabling the concurrency should launch all tasks simultaneously. Maybe it's a question of adding a delay in webhint or something similar.
Thanks!
Related
I recently faced the task of converting a fairly mature angular project to SSR because I had overestimated the search power of SEO in angular projects. I'm not familiar with node, my angular project is on an apache server and uses php(slim) as the backend api, however, when I started trying to use "most of the tutorials", i.e., the first step, introducing nguniversal/express-engine into the project, it went well, npm did not report any errors.
Then I tried to run npm run build:ssr and it also worked fine. The problem is that when I run npm run serve:ssr, it ends up throwing a "ReferenceError: navigator is not defined" error...
Earlier, I built a completely clean angular project for testing, from build:ssr to run serve:ssr. Even I specified node xxxx/xxxx/main.js directly, no problem, which is obvious, because the angular project for testing is absolutely clean.
However, this does not work on my current "existing angular project". Yes, I fully understand that SSR doesn't allow for navigator or most so-called DOM manipulation, and although I'm not familiar with angular universal yet, I've previewed it and I know that's not possible, but here's the biggest problem :
In this existing angular project, there is no any navigator operations, not even a single line of code
In fact, main.js is also generated automatically, I can't stop it at all, I don't understand why there is "navigator" written in main.js?
I've checked many so-called solutions, including writing something in server.ts, but nothing helps, how can I continue? This is really quite desperate!
Big thank any help!
I am working on an Excel Add-In with custom functions using the Javascript API. I have followed this tutorial.
I am trying to debug this using the Web version of Excel as the logging capabilities are significantly better, however I am finding that it will never register changes in my functions.ts file. I can change any other code file (eg. taskpane.ts) and will see the changes reflected immediately, however whenever I try to reload the custom functions, I do not see any of the changes.
The commands I'm using:
npm run build followed by
npm run watch in one terminal, npm run start:web in another.
This is the same whether or not I run npm run watch in one terminal or not.
In order to observe any changes I need to completely restart the entire server and reload the plugin.
This makes for a pretty miserable development experience. Has anyone overcome issues like these, or have suggestions as to how I can improve the development process for Excel add-ins?
I would also like to develop using the Desktop version of excel, however do to the lack of decent logging capabilities, this doesn't seem too feasible.
Sorry to hear you are having problems. Can you please try the following:
Open the project manifest and remove 'dist' from the functions.html url as follows:
Run "npm run build" again and then "npm start" again
ng serve is absolutely amazing for my workflow. When writing or editing my angular code, all I need to do is hit save, look at the already running instance of my project, and I can see if I like the changes or not, then repeat.
My question is, where can I get a tool that works like that for... well everything? When I swap from the front end of my MEAN app to the back end the difference is jarring.
I have to write or edit some piece of code, hit save, run node app.js in console, check the changes, hit ctrl+c to stop the service, change more code and repeat. It's obnoxious in comparison.
Is it a small issue? I mean, yeah. Am I being entitled? Also yeah, probably. It's just such a glaring difference when swapping between the two. I just want to be able to use a similar command when I develop in other environments and languages.
Are there options out there for other languages I just don't know about? Is there a simple script senior devs use that I'm not privy to? Do I just need to suck it up and appreciate the convenience where I have it?
Thanks in advance for any advice you all may have!
I'm not exactly sure if this is what you are looking for. But I know for node there is a package called
nodemon
nodemon helps automatically restart the node application whenever a file is changed and saved.
// Installation
npm install -g nodemon
You can use supervisor to watch for file changes and it will automatically serve the latest code
install it like this:
npm install supervisor -g
Use the it like following
supervisor app.js
More on supervisor here
Because these commands are both available in Laravel, I don't quite understand what's the difference between them. But I do notice that npm run hot would not be effected if I changed scss files, which npm run watch will perform correctly.
Hot Module Replacement (or Hot Reloading) allows you to, not just refresh the page when a piece of JavaScript is changed, but it will also maintain the current state of the component in the browser.
Check full documentation here
It won't work right now for regular Sass files. The HMR feature is
specifically for Vue and .vue components.
https://github.com/JeffreyWay/laravel-mix/issues/92#issuecomment-273558018
https://github.com/JeffreyWay/laravel-mix/issues/233
If you are curious what the HMR actually means, you can refer to the official docs: https://webpack.js.org/guides/hot-module-replacement/
I'm currently moving on with reading about node. I'm getting through the tutorials well using the command line. However I am thinking ahead and I want to create a simple register, log in and log out website.
Where would I place the node files on a server (all examples I see run from local host:3000)?
What is the best tutorial for creating this type of website from scratch with node?
Thanks in advance!
It doesn't really matter where you put the files on the server. The localhost:3000 bit comes from the fact that your core server file tells the server to listen on that port.
I would recommend using the express-generator from npm. It's pretty versatile and does a lot of the leg work.
Just run the following:
npm install express-generator
After installing, you'll need to just run the following to create a new web app:
express
The details are here: http://expressjs.com/starter/generator.html.
Also, try to read through and understand all of the pre-provided code.