Ionic add custom script with ionic serve - ionic-framework

I am using Ionic 3 via CLI.
While using ionic serve I want to add custom scripts "auth" which:
Prompts for username and password
creates cookie using api, and uses this cookie while calling each API.
My Gruntfile.js
I've created custom server task in grunt which:
Prompts the user for login
Creates cookies and applies this cookie with each request.
Is able to manage run with ionic from package.json.
grunt.registerTask('server', ['checkAuthToken', 'applyAuthToken', 'configureRewriteRules', 'configureProxies']);
"scripts": { "auth": "grunt server", }
Now I am wondering how to import this auth task before ionic serve so that my proxy and authentication works.
Scripts in my package.json
I tried with below npm-script in my package.json. It prompts for username, password, and creates cookies, however my proxy doesn't work because my grunt task is run after ionic watch and before ionic build.
...
"ionic:serve": "ionic-app-scripts serve && grunt server",
"ionic:serve": "grunt server && ionic-app-scripts serve"
...

Hi if you have ionic cli then you use ionic:build:before in your scripts section of package.json.
Example: package.json
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"ionic:build:before": "grunt server"
}

Related

nextjs page not found after deployment

I created a simple nextjs app using create-next-app
I added only some pages in pages folder (contact.js, help.js)
I can build and start app in localhost using below commands
npm run build
npm run start
this is script part of package.json
"scripts": {
"dev": "node server.js",
"build": "cross-env next build",
"start": "cross-env NODE_ENV=production node server.js",
"lint": "next lint"
},
I deployed this app on a shared host with plesk control panel
index page is ok,
but it not found help and contact pages
neither by typing url directly in address bar, nor clicking in Link (next/link)
.next folder content:
.next/server folder content:
.next/server/pages folder content:
at first I set Application Startup File to
node_modules/.bin/next
and tried run start script but it didn't work, so to start app
I set Application Startup File to: customserver.js in plesk like below:
Custom Server
what can be wrong here?
any ideas?

How can I set a dynamic env variable for dev vs prod #ionic/app-scripts?

I am a complete noobie on the ionic/webpack build process, but for this task I am referring specifically to this: https://github.com/ionic-team/ionic-app-scripts#environments. I don't quite fully understand what is meant by "If the variable exists in the process environment it will be replaced with that value."
The scripts in my package.json are as follows:
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build --dev",
"build:after": "",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
}
From what I understand, I should be able to set up an env variable, say process.env.BASE_URL for example, anywhere in my code that could be a different value depending on the build.
My question is how do I structure my script to set that variable in my process environment? Is it just a matter of setting the "build" script as "BASE_URL=myurl ionic-app-scripts build --dev"? And if it really is that easy, how would I then access the script for the --prod flag to set the variable for that one as well?
Thank you in advance. I really love this community.
You're almost correct. Usually, the way that I do things is to define an item in my scripts config like "ionic:build:prod" : "BASE_URL=myurl ionic-app-scripts build --prod. That way you can run that whole thing with one easy command(npm run ionic:build:prod)

Waiting for Ionic connectivity with ionic-app-scripts issue

Hi, Waiting for connectivity with ionic-app-scripts continues with
ionic serve--lab?
[app-scripts] [18:17:21] tslint: ...orkSpace_Ionic3_MobileApp/prototype/src/pages/profile-details/profile-details.ts, line: 2
[INFO] Waiting for connectivity with ionic-app-scripts...
[INFO] Waiting for connectivity with ionic-app-scripts...
[INFO] Waiting for connectivity with ionic-app-scripts...
Ionic Info :
Ionic:
ionic (Ionic CLI) : 4.0.3 (C:\Users\user\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.1.11
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : browser 5.0.3
System:
Android SDK Tools : 26.1.1
NodeJS : v9.1.0 (C:\Program Files\nodejs\node.exe)
npm : 5.5.1
OS : Windows 10
Environment:
ANDROID_HOME : C:\Users\user2\AppData\Local\Android\Sdk
Below I have updated mine package.json file.
package.json
{
"name": "name",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build --aot --minifyjs --minifycss --release",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
Try npm run start instead of ionic serve.
This will work.
Try the modified part. And try executing "npm start" command
{
"name": "name",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build --aot --minifyjs --minifycss --release",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"start": "ionic-app-scripts serve" //instead of ionic:serve, write start
},
If none of these works,
then make sure your FIREWALL is OFF. (into antivirus software as well.)
Check whether you have installed any Antivirus for protection
If yes turn off Browser protection and do ionic serve --host 0.0.0.0
You can turn it on after a successful serve.
The reason is in that the app starts with 0.0.0.0 IP address.
Try to add in our command "--address localhost" part.
So
ionic serve --address localhost
Do not downgrade the node version, update the version of "app-scripts":
To get the latest #ionic/app-scripts, please run:
npm install #ionic/app-scripts#latest --save-dev
I got this error only when I was connected to VPN. Once I turned VPN off, It start working again.
If you are using Ionic 6 and you came here looking for a solution to the following problem (like me):
Waiting for connectivity with ng...
Then check this answer, it's probably the solution to all your problems (remember to upvote if it helped you):
https://stackoverflow.com/a/74412994/6499181

Ionic 2 Add Custom build script

I am using Ionic 2 via CLI. In this version they use NPM SCRIPTS as opposed to gulp.
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
I have read about adding custom scripts to the config but am not clear how to do this. this is my current config...
"config": {
"ionic_bundler": "webpack",
"ionic_source_map": "source-map",
"ionic_source_map_type": "eval"
},
I need to create a custom script called "replace" It will be using NPM replace. How can I add this so that when I run ionic serve or build it will run?
Here is the gulp code I want to run.
var gulp = require('gulp');
var replace = require('gulp-string-replace');
var p = require('./package.json');
var version = p.version;
gulp.task('serve:after', ['version']);
console.log('Task init!!!');
gulp.task('version', function() {
gulp.src(["./www/index.html"])
.pipe(replace(/VERSION/g, p.version))
.pipe(gulp.dest('./www/'));
});
Ionic CLI (v3.X) goes directly to gulpfile.js and looks for CLI hooks.
ionic serve:
gulp.task('ionic:watch:before', function() {
console.log("this is run before 'ionic serve'");
});
ionic build:
gulp.task('ionic:build:before', function() {
console.log("this is run before 'ionic build'");
});
so you should add something like this to your gulpfile.js:
gulp.task('ionic:watch:before', ['version']);
gulp.task('ionic:build:before', ['version']);
To simply run your gulp task just add it to your package.json.
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
--> "ionic:build": "ionic-app-scripts build && gulp serve:after",
"ionic:serve": "ionic-app-scripts serve",
"watch": "ionic-app-scripts watch"
}
Note: this will not work if you put the "&& gulp" after ionic:serve - the gulp task will wait for the first part to finish, but ionic serve will start up a dev server and stay running so the second part never executes.
As you want to run your Gulp Task from NPM
Add the gulp-npm-script-sync as follows npm install --save-dev gulp-npm-script-sync
Now we need to sync this gulp task to the package.json as follows
var gulp = require('gulp');
var sync = require('gulp-npm-script-sync');
// your gulpfile contents
sync(gulp);
Every time you update your gulpfile with a new task it will update your package.json.
You can even throw it inside a gulp task:
gulp.task('sync', function () {
sync(gulp);
}
First, you have to copy and existing task that you want to modify and paste in your source code /project/task. Then add your task in that file. and change package.json to overwrite ionic 2 default config.
"config": {
"ionic_cleancss": "./task/cleancss.config.js"
},
More info :
https://github.com/ionic-team/ionic-app-scripts#custom-configuration

Can I set ionic serve to not open a browser by default?

I have multiple browser windows usually and it's always not popping up on the one I want.
Can I disable the feature of ionic serve opening in a browser?
You can pass in the --nobrowser option, or simply -b:
ionic serve --nobrowser
Old CLI: As #Claudiu mentioned ionic server -b will not start a browser.
New CLI: the new command is ionic serve --no-open.
If you want to start a browser but not the default one, you can use the -w option.
Eg if Chrome is your default browser, but you want ionic serve to use Firefox instead, you can do something like
ionic serve -w "path/to/firefox.exe" or just ionic serve -w firefox if Firefox is in the path.
More info on ionic serve options:
http://ionicframework.com/docs/v2/cli/serve/
ionic serve --help
ionic serve --no-open is the new command. The no-browser has been deprecated
Hello you can pass in the package.json in the :
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
}
and pass in the ionic:serve.
like this: "ionic:serve": "ionic-app-scripts serve --nobrowser"
and run in the terminal of your project the:
npm run ionic:serve