How to change build directory in Ionic 3 build process? - build

I'm developing a PWA using Ionic 3.
Normally the JavaScript files generated by the build to browser process of Ionic 3 are in www/build folder.
I wish to change this folder to www/build/v1 and, of course, keep the application working.
How could I change the build process of Ionic 3 to achieve this result?

The simplest way is add "config" section to your package.json
{
"name": "projectname",
"version": "0.0.1",
"author": "Ionic Framework",
...,
"config": {
"ionic_www_dir": "www/v1",
"ionic_build_dir": "www/v1/build"
},
"dependencies": {
...
}
You can read "Custom Project Structure" here ionic docs.

You may want to try the config option in the package.json file to provide custom build configuration.
To get started, add a config entry to the package.json file. From there, you can provide your own configuration file.
Here's an example of specifying a custom configuration:
"config": {
...
"ionic_rollup": "./config/rollup.config.js",
"ionic_cleancss": "./config/cleancss.config.js",
...
},
You may want to see this Ionic documentation for more information.

Related

What is app section and what is the purpose of this in cdk.json

When I develop sample apps by using AWS CDK,I found app section in cdk.json.I have question about app. what is app ? it seems that app.js is executed.
When this command will be executed ? when we run cdk synth,is this command executed?
I don't know the purpose of this use.
Thanks
{
"app": "node packages/cdk/dist/app",
"output": "build/cdk.out",
"context": {
"#aws-cdk/aws-apigateway:usagePlanKeyOrderInsensitiveId": true,
"#aws-cdk/core:enableStackNameDuplicates": "true",
"aws-cdk:enableDiffNoFail": "true",
"#aws-cdk/core:stackRelativeExports": "true",
"#aws-cdk/aws-ecr-assets:dockerIgnoreSupport": true,
"#aws-cdk/aws-secretsmanager:parseOwnedSecretName": true,
"#aws-cdk/aws-kms:defaultKeyPolicies": true,
"#aws-cdk/aws-s3:grantWriteWithoutAcl": true,
"#aws-cdk/aws-ecs-patterns:removeDefaultDesiredCount": true,
"#aws-cdk/aws-rds:lowercaseDbIdentifier": true,
"#aws-cdk/aws-efs:defaultEncryptionAtRest": true,
"systemName": "devio",
"envType": "stg"
}
}
Per the CDK documentation:
Since the AWS CDK supports programs written in a variety of languages, it uses a configuration option to specify the exact command necessary to run your app. This option can be specified in two ways.
First, and most commonly, it can be specified using the app key inside the file cdk.json, which is in the main directory of your AWS CDK project. The CDK Toolkit provides an appropriate command when creating a new project with cdk init.
Here is the cdk.json from a fresh TypeScript project, for instance:
{
"app": "npx ts-node bin/hello-cdk.ts"
}

AWS CDK synth and different cdk.json files

So, I have 3 different cdk.json files with different name/value pairs: cdk.json, cdk-west.json cdk-east.json
When, I run a synth or deploy, can I specify a specific json file instead of the default cdk.json one?
I know you can change profiles with the --profile option, but not sure about cdk.json
Unfortunately, there is no such option.
A good way around this is to add an "environment" attribute to your cdk.json file with attributes for each environment that contain settings for that environment.
{
...
"environments":{
"xxxxxxxxxxxx":{
"name": "dev",
"awsAccountId":"xxxxxxxxxxxx",
"awsRegion":"us-west-2",
"logLevel":"debug",
"customSetting": "value 1",
...
},
"prod-west-1-account-id":{
"name": "prod-us-west-1",
...
},
"prod-west-2-account-id":{
"name": "prod-us-west-2",
...
}
}
Then each Stack can grab the appropriate environment configuration based on the value of "this.account"

Why does my Cloud Function deployment fail with an INVALID_ARGUMENT error?

I am working on a Google Cloud Functions Project and I want to use the AWS-SDK so I edit the package.json and it looks like this:
{"name": "sample-http",
"version": "0.0.1"
"dependencies": {
"aws-sdk": "2.574.0"
}
}
The deployment crashes with the following message in the logs: INVALID_ARGUMENT
I am working in the Browser environment.
Can somebody help or does it have something to do with the fact that I don't use the paid plan until now?
I already saw this post but the answer is not working for me as you can see.
Your JSON is not valid, it is missing a comma after the version item:
{
"name": "sample-http",
"version": "0.0.1",
"dependencies": {
"aws-sdk": "2.574.0"
}
}
Using npm install to create a package.json should allow you to avoid issues like this. Additionally, there's a good number of publicly usable JSON validators on the web to test for issues like this.
by some reason when I install packages for cloud functions, package Json is not updated

How can I use a Command to activate livereload in reload

I'm trying to figure out what are the commands or ways to reload my browser platform on every change detected with ionic or cordova because for me this lineis not working:
ionic run browser --livereload
So I'm wondering if you know how to do that. I'm using cordova plugins by the way.
Kind regards!
You can start your app in your browser with
ionic serve
This will refresh the app after every save. There were some build changes after the ionic rc2 release, so be sure to update to the latest version. That way it will even show you a loading toast, as well as give you a nicely formatted js error whenever your app fails to launch.
To update your project to the latest build version, update your package.json
{
...
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
...
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
}
}
You can find an example of a full package.json here: https://github.com/driftyco/ionic2-app-base
ionic serve is working fine for me.
for browser, ionic serve detect every change in code and refresh the page.
You can find some commands here:
https://ionicframework.com/docs/cli/serve/
on Cli, you may try npm run dev too. --> Runs ionic serve ( development ). it's short, concise, gets the job done most times. give it a try

CasperJS and AWS Lambda

I'm trying to get casperjs to work with my AWS Lambda function.
{
"errorMessage": "Cannot find module 'casper'",
"errorType": "Error",
"stackTrace": [
"Function.Module._load (module.js:276:25)",
"Module.require (module.js:353:17)",
"require (internal/module.js:12:17)",
"Object.<anonymous> (/var/task/index.js:3:14)",
"Module._compile (module.js:409:26)",
"Object.Module._extensions..js (module.js:416:10)",
"Module.load (module.js:343:32)",
"Function.Module._load (module.js:300:12)",
"Module.require (module.js:353:17)"
]
}
I keep getting this error where Lambda can't detect casperjs. I uploaded my zip file into Lambda, and installed the casperjs modules into my directory before I zipped the files up.
My package.json file says I have casperjs installed.
{
"name": "lambda",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"casperjs": "^1.1.3",
}
}
Would anyone know what I'm doing wrong? Thanks.
Since CasperJs relies on PhantomJs, you can set it up very similarly to this repo: https://github.com/TylerPachal/lambda-node-phantom.
The main difference being that you need to add and target CasperJs and you need to make sure that CasperJs can find and load PhantomJs.
Create a node_modules directory in your package directory.
Add a dependency for CasperJs to the packages.json file:
"dependencies": {
"casperjs": "latest"
}
In Terminal, navigate to your package directory and run 'npm update' to add the CasperJs package to the node_modules directory.
Assuming that you want to run CasperJs with the 'test' argument, the index.js file will need to be changed to look like this:
var childProcess = require('child_process');
var path = require('path');
exports.handler = function(event, context) {
// Set the path as described here: https://aws.amazon.com/blogs/compute/running-executables-in-aws-lambda/
process.env['PATH'] = process.env['PATH'] + ':' + process.env['LAMBDA_TASK_ROOT'];
// Set the path to casperjs
var casperPath = path.join(__dirname, 'node_modules/casperjs/bin/casperjs');
// Arguments for the casper script
var processArgs = [
'test',
path.join(__dirname, 'casper_test_file.js')
];
// Launch the child process
childProcess.execFile(casperPath, processArgs, function(error, stdout, stderr) {
if (error) {
context.fail(error);
return;
}
if (stderr) {
context.fail(error);
return;
}
context.succeed(stdout);
});
}
If you don't want to run CasperJs with the 'test' argument, just remove it from the arguments list.
The PhantomJs binary in the root directory of your package needs to be renamed to phantomjs, so that CasperJs can find it. If you would like to get a new version of PhantomJs, you can get one here: https://bitbucket.org/ariya/phantomjs/downloads. Make sure to download a linux-x86_64.tar.bz2 type so that it can run in Lambda. Once downloaded, just pull a new binary out of the bin directory and place it in your root package directory.
In order for Lambda to have permission to access all the files, it's easiest to zip the package in a Unix-like operating system. Make sure that all the files in the package have read and execute permissions. From within the package directory: chmod -R o+rx *. Then zip it up with: zip -r my_package.zip *.
Upload the zipped package to your Lambda function.
According to Casper.js Docs, it is not a actually Node Module. So you cannot require it in Package.json and zip it up with node modules. You will need to find how to install it on the lambda instance or find a an actual node module that does what you want. I suspect installing casper on lambda might not be possible, but that's just my gut.
Warning
While CasperJS is installable via npm, it is not a NodeJS module and will not work with NodeJS out of the box. You cannot load casper by using require(‘casperjs’) in node. Note that CasperJS is not capable of using a vast majority of NodeJS modules out there. Experiment and use your best judgement.
http://docs.casperjs.org/en/latest/installation.html