I'm trying to start an ionic server with --no-open enabled on run ionic serve, as described in ionic CLI documentation.
But, in the generated file I need to use npm run ionic:serve. I'm trying to add an extra parameter on file package.json like:
"ionic:serve": "ionic-app-scripts serve --no-open"
It doesn't works.
Maybe, there is some property in file ionic.config.json that allows me to do it.
So, I have two questions:
How can I avoid to open a browser window using npm run ionic:serve?
Where can I find a complete list of all available properties and their valid values applied to file ionic.config.json?
The correct parameter is --nobrowser instead of --no-open as described in the documentation.
I've noticed the parameter in the github repository of ionic-app-scripts.
Related
$ npm run lint
/Users/john/test/src/index.ts
274:35 warning 'event' is defined but never used #typescript-eslint/no-unused-vars
You may want to use a different formatter to have the problems printed in a way that lets you open the respective lines by clicking on a link in the terminal.
This should work out of the box:
npx run lint -- --format=visualstudio
and print
/Users/john/test/src/index.ts(274,35): warning #typescript-eslint/no-unused-vars : 'event' is defined but never used
Or this one:
npx run lint -- --format=unix
which prints
/Users/john/test/src/index.ts:274:35: 'event' is defined but never used [Warning/#typescript-eslint/no-unused-vars]
To avoid specifying the formatter manually every time, you could add them directly to the "lint" script defined in the file package.json, e.g.:
"scripts": {
...
"lint": "eslint . --format=visualstudio",
...
},
The terminal isn't smart enough to do that. For it to hyperlink straight to a location in a file, the path would have to be immediately followed by a colon and the location, i.e. /Users/john/test/src/index.ts:274:35.
Instead, you might consider installing a plugin, or configuring an existing one, to show lint results in the Problems view. VSCode will then link straight to the location. I don't have any recommendations since I don't work in TypeScript myself, but FWIW, the Python extension can do that, for example with the Pylama linter enabled.
I am trying to run the script
ionic build
But the generated build version is always with --production flag. Thus my js/ts code is minified and not suitable for debugging. Do you know a way to build in dev mode?
output of "ionic build"
The command "ionic build -- --mode development" which seems to work for Vue does not seem to work for React.
Ionic React uses Create React App under the hood. This means that you can use CRA build commands instead of Ionic.
As described in this gist, you need to enable profiling mode for CRA to get unminified output.
You can do this with the command react-scripts build -- --profile.
To make it easier, you can add a command to scripts in your package.json like:
"build-profile": "react-scripts build -- --profile",
I'm trying to perform audit using Lighthouse DevTools.
My site requires authentication.
When I run the test the lighthouse logs me out and only anayses /login.
How can I get Lighthouse DevTools to analyse my site? Can I supply login credentials?
If you are using local storage in order to preserve an authenticated state after refresh
(for example storing a user's token, and on refresh using that token in order to login like a lot of SPA's)
I found a solution that might work :
https://github.com/GoogleChrome/lighthouse/issues/1418#issuecomment-397753583
If using chrome dev tools to run light house :
On the lighthouse tab in chrome dev tools simply click the settings icon
Uncheck the clear storage check box.
Generate the report, and on refresh it will use the local storage data therefore will keep you logged in.
If using the lighthouse cli tool :
Install and execute as explained in JoostS answer, just add to the lighthouse command the --disable-storage-reset flag , and you can also add the --view flag in order to open a tab for the report.
So the command will be :
lighthouse <url> --port <port_chrome_debugger_opened> --disable-storage-reset --view
Verifying it tested the logged in page
You can verify it tested the logged in page by looking at the report under the performance metrics there are images of the page that was loaded, so if the images correspond to the logged in page I believe it means it was tested correctly.
See Testing on a site with authentication in the official readme:
When installed globally via npm i -g lighthouse or yarn global add lighthouse, chrome-debug is added to your PATH. This binary launches a standalone Chrome instance with an open debugging port.
Run chrome-debug. This will log the debugging port of your Chrome instance
Navigate to your site and log in.
In a separate terminal tab, run lighthouse [siteurl] --port port-number using the port number from chrome-debug.
I had to install node 10.16.3 first (node.js > 10.0.0).
nvm install 10.16.3
will show error
Could not download npm for node v10.16.3.
Download npm version what you want - https://github.com/npm/cli/releases
I had downloaded 6.9.0 npm version - https://github.com/npm/cli/archive/v6.9.0.zip
It should be extracted to C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\npm
then go to C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\npm\bin and copy two npm files. first (npm .cmd file), second (npm file)
then paste both files in C:\Users\xxx\AppData\Roaming\nvm\v10.16.3
open cmd and run command node -v and npm -v
After that lighthouse CLI works as expected.
The command still does not work though. :/
I have followed the advice of JoostS - Testing a site with authentication
The technique does not work. It opens up an new, not logged in window, and behaves just like you would expect without the --port argument.
I serve an ember-cli app using the following command
ember serve --proxy http://some.such.proxy --ssl --insecure-proxy
These options are specific to serving the app for development. Can I configure my app, perhaps with config/environment.js, to use these options in development?
Ultimately I would just like to use ember serve without having to specify options on the command line.
Reading the documentation more carefully means that I can answer my own question.
ember-cli environments
Such options can be configured in the .ember-cli file
I want to set my Grunt.js file to launch my MAMP server on grunt serve.
I have been trying to use this tutorial here to do this:
https://coderwall.com/p/kwne-g
I was then planning to use this tutorial to set up grunt watch:
http://darrenhall.info/development/yeoman-and-mamp
Now I am having trouble with step one. I have successfully installed grunt exec. However, grunt claims not to be able to find the task 'serverup'.
Here is my code:
grunt.task.run([
'clean:server',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'serverup',
'watch',
'serverdown'
]);
If you followed the examples at the link, it looks like your targets should be exec:serverup and exec:serverdown for the tasks to work.
The problem here and with many other Grunt related questions is that without the full Gruntfile, "answers" are largely guesses. Configuration, task loading, and task registration are all related and without seeing all three, it is difficult to say "this is the answer".
Given that, here's a checklist I use for problems like this when using Grunt and packages from NPM:
Is the code that supports the task installed? Did I forget npm install? Did I miss
errors on install (check npm-debug.log if it exists)?
Have I correctly used grunt.loadNpmTasks for the plugin? Is the line in my Gruntfile and
did I get the plugin name spelled correctly? Did I or my IDE accidentally use to
grunt.loadTasks when I need loadNpmTasks?
Have I correctly named/used grunt.registerTask for the task? If I need to call a
specific target for a task, do I have the the name correctly specified?
If there are paths involved and things are broken, do I have my globbing patterns correctly specified? If a cwd
is involved, do I have the other paths or files correctly specified?
Did I get the configuration right? (This is where things get too plugin-specific for a
checklist.)