How to add subresources integrity with Angular appShell build - build

I built an application with Angular CLI 9.
I patched the package.json file with :
{
"scripts": {
"build:prod": "ng build --prod --subresource-integrity",
"prebuild:prod": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' ts-node ./sitemap_generator.ts"
}
}
So, when I called npm run build:prod, my 2 commands are executed and output files generated by compiler contains SRI.
Now, I added the appShell :
npm run ng generate appShell -- --client-project my-project
To run the build with the appShell, I have to use the command :
npm run ng run my-project:app-shell:production
MAIN QUESTION
But this command calls my-project:build:production configuration of angular.json file, and this does not accept the --subresource-integrity argument :/
How to patch this to have appShell production build with SRI ?
SECONDARY QUESTION for the braves
This appShell build create a server/ folder in dist/. It just contains a main.js file. I suppose it's internally used with Node to build the appShell ; can someone confirm that ?
And so, can I use Unversal too with this architecture to do some SSR for search engines ?
Thanks !

Ok, I found a way by editing angular.json :
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "my-project",
"projects": {
"oce-training": {
"architect": {
"build": {
"configurations": {
"production": {
"subresourceIntegrity": true,
}
}
}
}
}
}
}
So, we cannot override on package.json or by CLI command, but it's sufficient for my case.
Now I have in package.json:
{
"scripts": {
"build:prod": "ng run oce-training:app-shell:production",
"prebuild:prod": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' ts-node ./sitemap_generator.ts"
},
}
My question about SSR is maintained, but it could be another Stackoverflow post ;)

Related

Using "m1-medium" not recognized as valid by EAS

When I follow these instructions on an M2 MBA using Expo SDK 47.0.13 and EAS CLI 3.5.2 (darwin-arm64) I get
InvalidEasJsonError: eas.json is not valid.
- "build.dev-hardware.resourceClass" must be one of [default, medium]
which seems like a direct contradiction of those instructions. Why isn't the specified value (m1-medium) recognized as valid?
I had the same issue and I solved it by updating my eas-cli on global level. In my situation I tried updating it with
npm install -g eas-cli
If you've used a different package manager like I did to install eas-cli earlier, you may need to run the command accordingly. In my case it was
yarn global add eas-cli
Also, it's maybe worth checking if in your eas.json file you have any setting related to the cli version like this:
{
"cli": {
"version": ">= 3.3.0"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal",
"ios": {
"resourceClass": "m1-medium"
}
},
"production": {
"ios": {
"resourceClass": "m1-medium"
}
}
}
}
EDIT
I remembered that when this was happening, whenever I ran eas build the console printed a message like this:
I ran the suggested npm install command, but message was still prompted, which led me to believe that yarn was in control of the version of the eas-cli that executes eas build.
This is why I ran yarn global add, which fixed the issue.

Build APK from bare workflow Expo project with native local (offline) module

When building the project with EAS an error is showed:
no such file or directory, open ‘/absolute/path/to/mypackage-0.1.0.tgz’
Should I use Turtle?
Am I missing something?
Command used to build:
eas build -p android --profile=development --local
eas.json
{
"cli": {
"version": ">= 0.48.0"
},
"build": {
"development": {
"distribution": "internal",
"android": {
"gradleCommand": ":app:assembleDebug",
"buildType": "apk"
},
"ios": {
"buildConfiguration": "Debug"
}
},
"preview": {
"distribution": "internal"
},
"production": {}
},
"submit": {
"production": {}
}
}
After a lot of combinations:
do not use Windows
use Unix with Android Studio
$ cd android && chmod +x ./gradlew
$ ./gradlew assembleRelease
Also, check this out:
https://instamobile.io/android-development/generate-react-native-release-build-android/
EDIT cause people dislike this answer:
The fact is that after you eject the project, you can manage your app as if it is a native app.
If you want to build with a custom package, not published, in local this seems to be the fastest and reliable way.

What happens if more than one Jest configuration is used simultaneously?

Jest's configuration states:
Jest's configuration can be defined in the package.json file of your
project, or through a jest.config.js file or through the --config <path/to/js|json> option.
What happens if a configuration setting is defined in two or more places? Are distinct configuration settings merged together or can they be silently ignored? If merging or ignoring, do they have a well defined or ad hoc precedence?
I inherited multiple projects with both a "jest" object in package.json and "jest.config.js" file, each with their specific configuration.
By playing (superficially) with the coverage threshold (which was < 97%), I came to the conclusion that jest.config.js is used, and the jest object in package.json is ignored. There doesn't seem to be any merging going on.
My tests:
#1: Which has priority ?
package.json: coverage 98%
jest.config.js: coverage 99%
=> "coverage threshold for statements (99%) not met"
Answer: jest.config.js
#2: Are they merged ?
package.json: coverage 98%
jest.config.js: (missing coverage key)
=> no coverage warnings
Answer: No
To answer a subset of the full problem (which may be too complicated for a meaningful set of tests as it's a lot of knobs to twiddle), if a jest command line --config (or -c) is provided, then package.json jest settings are ignored.
More specifically to come to this conclusion, firstly I tried jest -c jest/config.js with setupFilesAfterEnv in my jest/config.js:
module.exports = {
rootDir: '../',
setupFilesAfterEnv: ['./jest/global-setup.js'],
}
File jest/global-setup.js contains:
const Enzyme = require('enzyme')
const Adapter = require('enzyme-adapter-react-16')
require('jest-enzyme/lib/index.js')
Enzyme.configure({ adapter: new Adapter() })
Which here has the desired effect of running the enzyme setup. Commenting it out in the jest/config.js file and putting the equivalent into package.json is skipped/ignored:
"jest": {
"setupFilesAfterEnv": ["./jest/global-setup.js"],
},
Secondly I tried jest -c jest/config.js with a jest fileTransformer.js file and the following in my jest/config.js:
transform: {
'^.+\\.js$': 'babel-jest',
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/jest/file-transformer.js',
},
Then the equivalent jest.transform setting of package.json is skipped/ignored:
"jest": {
"transform": {
"^.+\\.js$": "babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/file-transformer.js"
}
},
Thirdly, changing my npm scripts test command from jest -c jest/config.js to jest and my package.json to include the following causes the package.json settings to work as expected:
"jest": {
"setupFilesAfterEnv": ["./jest/global-setup.js"],
"transform": {
"^.+\\.js$": "babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/jest/file-transformer.js"
}
},
Tested with jest v24.9.0

ember-cli-eslint, ember-cli-stylelint to run automatically only if desired

I understand that the purpose of ember-cli-eslint, ember-cli-stylelint to run automatically.
I am wondering if there is a way to control this behavior.
Like, run ember-cli-eslint, ember-cli-stylelint automatically only if there is certain ENVIRONMENT_VARIABLE or maybe write a custom script.
I am wondering if that is possible. Google search did not provide me any pointer.
Yes.
For ESLint:
Remove the addon ember-cli-eslint
Install the npm package eslint in your project
ESLint will then run only when you actually run ./node_modules/.bin/eslint .
You should update your package.json's lint:js script as well.
For Stylelint:
Remove the addon ember-cli-stylelint
Install the npm package stylelint in your project
Stylelint will then run only when you actually run ./node_modules/.bin/stylelint
You should update your package.json's lint:css script as well.
As suggested by #Turbo87 at https://github.com/ember-cli/ember-cli-eslint/issues/333 I have updated ember-cli-build.js like so:
const blacklist = [];
if (process.env.DISABLE_AUTO_LINT) {
blacklist.push('ember-cli-eslint', 'ember-cli-eslint');
}
let app = new EmberApp(defaults, {
addons: { blacklist },
});
And it works as desired.
A simplified package.json/script looks something like so:
"scripts": {
"eslint": "eslint .",
"stylelint": "stylelint app/styles",
"lint": "npm run eslint && npm run stylelint",
"start": "DISABLE_AUTO_LINT=true ember serve",
"test": "npm run lint --silent && DISABLE_AUTO_LINT=true ember exam --split=10 --parallel",
}
ember serve functions as business as usual.

How do I deploy monorepo code to AWS Lambda using lerna?

I am attempting to make two AWS Lambda functions (written in typescript). Both of these functions share the same code for interacting with an API. In order to not have to copy the same code to two different Lambdas, I would like to move my shared code to a local module, and have both my Lambdas depend on said module.
My initial attempt at staring code between the two lambdas was to use a monorepo and lerna. My current project structure looks like this:
- lerna.json
- package.json
- packages
- api
- package.json
- lambdas
- funcA
- package.json
- func B
- package.json
lerna.json:
{
"packages": [
"packages/api",
"packages/lambdas/*"
],
"version": "1.0.0"
}
In each of my package.json for my Lambda functions, I am able to include my local api module as such:
"dependencies": {
"#local/api": "*"
}
With this, I've been able to move the common code to its own module. However, I'm now not sure how to bundle my functions to deploy to AWS Lambda. Is there a way for lerna to be able to create a bundle that can be deployed?
As cp -rL doesn't work on the mac I had to come up with something similar.
Here is a workflow that works if all of your packages belong to one scope (#org):
In the package.json of your lerna repo:
"scripts": {
"deploy": "lerna exec \"rm -rf node_modules\" && lerna bootstrap -- --production && lerna run deploy && lerna bootstrap"
}
In the package that contains your lambda function:
"scripts":{
"deploy": "npm pack && tar zxvf packagename-version.tgz && rm -rf node_modules/#org && cp -r node_modules/* package/node_modules && cd package && npm dedupe"
}
Now replace "packagename-version" and "#org" with the respective values of your project. Also add all of the dependent packages to "bundledDependencies".
After running npm run deploy in the root of your lerna mono repo you end up with a folder "package" in the package that contains your lambda function. It has all the dependencies needed to run your function. Take it from there.
I had hoped that using npm pack would allow me to utilize .npmignore files but it seems that that doesn't work. If anyone has an idea how to make it work let me know.
I have struggled with this same problem for a while now, and I was finally forced to do something about it.
I was using a little package named slice-node-modules, as found here in this similar question, which was good enough for my purposes for a while. As I have consolidated more of my projects into monorepos and begun using shared dependencies which reside as siblings rather than being externally published, I ran into shortcomings with that approach.
I've created a new tool called lerna-to-lambda which was specifically tailored to my use case. I published it publicly with minimal documentation, hopefully enough to help others in similar situations. The gist of it is that you run l2l in your bundling step, after you've installed all of your dependencies, and it copies what is needed into an output directory which is then ready to deploy to Lambda using SAM or whatever.
For example, from the README, something like this might be in your Lambda function's package.json:
"scripts": {
...
"clean": "rimraf build lambda",
"compile": "tsc -p tsconfig.build.json",
"package": "l2l -i build -o lambda",
"build": "yarn run clean && yarn run compile && yarn run package"
},
In this case, the compile step is compiling TypeScript files from a source directory into JavaScript files in the build directory. Then the package step bundles up all the code from build along with all of the Lambda's dependencies (except aws-sdk) into the directory lambda, which is what you'd deploy to AWS. If someone were using plain JavaScript rather than TypeScript, they could just copy the necessary .js files into the build directory before packaging.
I realize this question is over 2 years old, and you've probably figured out your own solutions and/or workarounds since then. But since it is still relevant to me, I assume it's still relevant to someone out there, so I am sharing.
Running lerna bootstrap will create a node_modules folder in each "package". This will include all of your lerna managed dependencies as well as external dependencies for that particular package.
From then on, your deployment of each lambda will be agnostic of the fact that you're using lerna. The deployment package will need to include the code for that specific lambda and the node_modules folder for that lambda - you can zip these and upload them manually, or use something like SAM or CloudFormation.
Edit: as you rightly point out you'll end up with symlinks in your node_modules folder which make things awkward to package up. To get around this, you could run something like this prior to packaging for deployment:
cp -rL lambdas/funcA/node_modules lambdas/funcA/packaged/node_modules
The -L will force the symlinked directories to be copied into the folder, which you can then zip.
I have used a custom script to copy the dependencies during the install process.. This will allow me to develop and deploy the application with the same code.
Project structure
In the package.json file of the lambda_a, I have the following line:
"scripts": {
"install": "node ./install_libs.js #libs/library_a"
},
#libs/library_a can be used by the lambda code using the following statement:
const library_a = require('#libs/library_a')
for SAM builds, I use the following command from the lmbdas frolder:
export SAM_BUILD=true && sam build
install_libs.js
console.log("Starting module installation")
var fs = require('fs');
var path = require('path');
var {exec} = require("child_process");
if (!fs.existsSync("node_modules")) {
fs.mkdirSync("node_modules");
}
if (!fs.existsSync("node_modules/#libs")) {
fs.mkdirSync("node_modules/#libs");
}
const sam_build = process.env.SAM_BUILD || false
libs_path = "../../"
if (sam_build) {
libs_path = "../../" + libs_path
}
process.argv.forEach(async function (val, index, array) {
if (index > 1) {
var currentLib = libs_path + val
console.log(`Building lib ${currentLib}`)
await exec(`cd ${currentLib} && npm install` , function (error, stdout, stderr){
if (error) {
console.log(`error: ${error.message}`);
return;
}
console.log(`stdout: ${stdout}`);
console.log('Importing module : ' + currentLib);
copyFolderRecursiveSync(currentLib, "node_modules/#libs")
});
}
});
function copyFolderRecursiveSync(source, target) {
var files = [];
// Check if folder needs to be created or integrated
var targetFolder = path.join(target, path.basename(source));
if (!fs.existsSync(targetFolder)) {
fs.mkdirSync(targetFolder);
}
// Copy
if (fs.lstatSync(source).isDirectory()) {
files = fs.readdirSync(source);
files.forEach(function (file) {
var curSource = path.join(source, file);
if (fs.lstatSync(curSource).isDirectory()) {
copyFolderRecursiveSync(curSource, targetFolder);
} else {
copyFileSync(curSource, targetFolder);
}
});
}
}
function copyFileSync(source, target) {
var targetFile = target;
// If target is a directory, a new file with the same name will be created
if (fs.existsSync(target)) {
if (fs.lstatSync(target).isDirectory()) {
targetFile = path.join(target, path.basename(source));
}
}
fs.writeFileSync(targetFile, fs.readFileSync(source));
}