Can I load scripts conditionally using Angular CLI???
In this file, I want to load one script depending on the enviroment or a variable. So In production I want to load a script while in develop not.
Is there a way to do that? How?
angular-cli.json
...
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/ion-rangeslider/js/ion.rangeSlider.js",
"../node_modules/web-animations-js/web-animations.min.js",
<---- LOAD HERE ONE SCRIPT DEPENDING ON ENVIRONMENT OR VARIABLE
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
...
While #yuzuri suggested a very eleegnat solution - it requires you to edit a node module which is not a good idea..
Here is simple workaround:
You can edit your "scripts" section under package.json file to have that:
"start": "cp angular-cli-dev.json angular-cli.json && ng serve"
"build": "cp angular-cli-prod.json angular-cli.json && ng build"
Then you should rename your angular-cli.json file to angular-cli-dev.json and angular-cli-prod.json
Each should have different configuration - in my case, different scripts in "scripts" section.
Hope that helps while we wait for an official solution
The .angular-cli.json supports configuration for multiple apps. Therefore we can put completely different configuration with different scripts/styles for the same app.
"apps": [
{
"styles": [
"styles.css"
],
"scripts": [ ],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"local": "environments/environment.local.ts"
}
},
{
"styles": [
"styles.css",
"../node_modules/select2/dist/css/select2.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/select2/dist/js/select2.full.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"local": "environments/environment.local.ts"
}
}
To serve the default app:
$ ng serve --app=0
or
$ ng serve --app 0
To serve the app with local environment:
$ ng serve --app=1 --env=local --port=8091
Related
I have React project created without cra. I need to add code coverage for cypress e2e tests.
In app created with cra I do the following instructions for add code coverage. And add this line of code in package.json
"start": "react-scripts -r #cypress/instrument-cra start",
This work's well with cra.
But in app without cra I can't add react-scripts or #cypress/instrument-cra for get code coverage information.
How to realize this?
My current configuration ->
babel.config.json
{
"presets": [
"#babel/preset-env",
[
"#babel/preset-react",
{
"runtime": "automatic"
}
],
"#babel/preset-typescript"
],
"plugins": [
"istanbul",
"transform-class-properties",
[
"#babel/plugin-transform-runtime",
{
"useESModules": true,
"regenerator": false
}
]
],
"env": {
"development": {
"plugins": ["istanbul", "transform-class-properties"]
},
"test": {
"presets": [
["#babel/preset-env", {
"targets": "current node"
}]
]
}
}
}
e2e.ts
// Import commands.js using ES2015 syntax:
import "#cypress/code-coverage/support";
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
Cypress.on('uncaught:exception', () => {
/**
* Returning false here prevents Cypress from
* failing the test when one of requests fails
*/
return false
});
package.json
"scripts": {
"start": "webpack-cli serve --port 9007 --env currentEnv=local",
"build": "webpack --mode production",
"serve": "serve dist -p xxxx",
"clean": "rm -rf dist",
"test": "cross-env BABEL_ENV=test jest",
"cy:open": "cypress open",
"cy:run": "cypress run",
"pretest:e2e:run": "npm run build",
"test:e2e:run": "start-server-and-test start http://localhost:9000 cy:run",
"test:e2e:dev": "start-server-and-test start http://localhost:9000 cy:open",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"check:coverage": "nyc report --reporter=text-summary --check-coverage",
"prepare": "husky install"
},
// ...
"nyc": {
"all": true,
"excludeAfterRemap": true,
"check-coverage": true,
"extension": [
".tsx"
],
"include": [
"src/views/**/*.tsx"
]
}
cypress.config.ts
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here,
require("#cypress/code-coverage/task")(on, config);
// include any other plugin code...
// It's IMPORTANT to return the config object
// with any changed environment variables
return config;
},
video: false,
baseUrl: "http://localhost:3000/",
},
});
Currently, in browser after each test does finished I get the following error
Could not find any coverage information in your application by looking at the window coverage object. Did you forget to instrument your application? See code-coverage#instrument-your-application [#cypress/code-coverage]
I'm developing a desktop application combining ElectronJs with ReactJS, more specifically create-react-app. Following the line of a mobile application that I had already developed for offline operation, I chose to use RealDB for data storage.
https://www.mongodb.com/docs/realm/sdk/node/integrations/electron-cra/
Following the documentation and its own recommendations, I added the lib. I had to make changes to my code, such as using an alternative craco within create-react-app, to use the webpack-node-externals library, but after the addition it has been boring to run my application for development i spend a lot of time on reloads or rebuilds.
The best alternative I found was to combine electronmon with nodemon, I use nodemon to detect changes in src files, rebuilt the code and so that I can reload electron when changes in the build folder are detected I use electronmon, but I still lose one considerable time and does not always work as expected
package.json:
{
"scripts": {
"start": "electron .",
"build": "craco build",
"electron:start": "concurrently -k \"nodemon --watch ./src --exec npm run build\" \"wait-on ./build/index.html && electronmon .\"",
"electron:package:mac": "npm run build && electron-builder -m -c.extraMetadata.main=build/electron.js",
"electron:package:win": "npm run build && electron-builder -w -c.extraMetadata.main=build/electron.js",
"electron:package:linux": "npm run build && electron-builder -l -c.extraMetadata.main=build/electron.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
"last 1 electron version"
],
"development": [
"last 1 electron version"
]
},
"electronmon": {
"patterns": [
"!default.realm.lock**",
"!default.realm**",
"!package.json**"
]
}
}
craco.config.js
const nodeExternals = require("webpack-node-externals");
module.exports = {
style: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
webpack: {
configure: {
externals: [
nodeExternals({
allowlist: [/webpack(\/.*)?/, "electron-devtools-installer"],
}),
],
},
},
};
I wanted to make it clear that the code is working normally, everything is ok, the realm worked, but my development performance was very harmed. I needed help to find some other way to make it run that didn't waste so much time for a reload of the application
I'm trying to use the hot reload feature in development mode of a react electron app.
It use to work well but I'm having issues with the latest electron version 15+.
I am able to run the app from the build folder but anytime I want to make a change I need to run the build command therefor the hot reloading is not working.
I have change the package.json path to use the public folder. But I get a blank page. however if I make a change to the main.js folder, the app reload but not when I make a change within the src folder of the app itself.
In my package.json if I use the public folder the app is not loading. It only loads when I use the build folder.
"version": "0.1.0",
"private": false,
"main": "build/main.js",
"homepage": "./",
"files": [
"public/**/*",
"node_modules/**/*"
],
"scripts": {
"electron-dev": "set ELECTRON_START_URL=http://localhost:3000 && electron . --overwrite --asar=true --platform=win --arch=x64 --icon=icons/icon.png --prune=true --out=build",
"electron": "electron .",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dist": "electron-builder --win"
},
"devDependencies": {
"electron": "15.3.0",
"electron-builder": "^22.13.1",
"electron-reload": "^2.0.0-alpha.1",
"electron-reloader": "^1.2.3"
}
In my public/main.js file;
require('electron-reloader')(module,
{
debug: true,
watchRenderer: true
});
const startUrl = url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
});
I can also see the watcher in the console;
Watched paths: {
'..': [
'public'
],
'.': [
'assets',
'favicon.ico',
'icon.png',
'index.html',
'logo-black.png',
'logo.png',
'logo.svg',
'main.js',
'manifest.json',
'package.json',
'preload.js',
'robots.txt'
],
assets: [...]
It seams like the public folder is not being watched at all. When ever I make a change to my app inside the src folder. nothing get's picked up. The src folder is not being watched/
What should I look for?
Please comment if you would like to see more code.
[UPDATE]
The start url is not getting picked up in the .env nor in the inline command.
As a temporary solution I am running the build & electron.
Very counter productive!
One potential hacky solution you could use is just using nodemon, and make it re-launch electron each time you change any content inside the src directory. In order to do this you would have to run npm install --save-dev nodemon. Then in your packages.json put in the following
"dev": "NODE_ENV=development nodemon --watch ./src/**/* --watch . --exec 'npm run electron'"
With respect to the actual question, why are you using electron-reloader over just using electron-reload. It is easy to setup, just by adding the following to your code
require('electron-reload')(__dirname, {
electron: path.join(__dirname, 'node_modules', '.bin', 'electron'),
hardResetMethod: 'exit'
});
create-react-app v3.0.0 is out. It supports TypeScript linting internally. (That's nice!) I think I understand the situation where TSLint is on, and am planning to replace it with ESLint, but it is not right now.
How to disable that linting step in react-scripts start?
/* eslint-disable */ and others are not the ones I'm looking for.
As of react-scripts v4.0.2, you can now opt out of ESLint with an environment variable. You can do this by adding it to your .env file, or by prefixing your scripts in your package.json file.
For example in .env:
DISABLE_ESLINT_PLUGIN=true
Or in your package.json:
{
"scripts": {
"start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
"build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
"test": "DISABLE_ESLINT_PLUGIN=true react-scripts test"
}
}
https://github.com/facebook/create-react-app/pull/10170
You could set EXTEND_ESLINT environment variable to true, for example in .env file:
EXTEND_ESLINT=true
Now you can extend eslint configuration in your package.json file:
...
"eslintConfig": {
"extends": "react-app",
"rules": {
"jsx-a11y/anchor-is-valid": "off"
}
},
...
To disable eslint you could add a file .eslintignore with the content:
*
See documentation for details: https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config
You can disable eslint (and override other configurations) using Craco.
It takes 4 changes:
npm install #craco/craco --save
create craco.config.js (in the same folder as is package.json)
populate craco.config.js with:
module.exports = {
eslint: {
enable: false,
},
};
Finally, replace react-script with craco in your package.json scripts, i.e.
"scripts": {
"build": "craco build",
"start": "craco start",
}
This will disable ESLint. Refer to Craco documentation for examples how to extend ESLint configuration.
step 1
create .env file in your project root if its not there and add this line to it
EXTEND_ESLINT=true
Step 2
add .eslintrc.js to your project root with following content
module.exports = {
"extends": ["react-app"],
"rules": {
},
"overrides": [
{
"files": ["**/*.js?(x)"],
"rules": {
// ******** add ignore rules here *********
"react/no-unescaped-entities": "off",
"react/display-name": "off",
"react/prop-types": "off",
}
}
]
}
note that override > rules section: add rules with "off" flag to disable them.
My workaround without ejecting:
Use an environment variable in .eslintrc.js like this:
module.exports = {
"extends": process.env.REACT_APP_DEV_DISABLE_ESLINT ? [] : [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:json/recommended",
"plugin:#typescript-eslint/recommended",
"plugin:jsx-a11y/recommended",
"plugin:react/recommended",
],
"rules": process.env.REACT_APP_DEV_DISABLE_ESLINT ? {} : {
// ...rules for production CI
}
}
Set the variable in start script in package.json:
{
"scripts": {
"eslint:disable": "REACT_APP_DEV_DISABLE_ESLINT=true",
"start": "npm run eslint:disable react-scripts start"
}
}
First ensure EXTEND_ESLINT environment variable is set to true. It can be set in .env file.
For Typescript, further rules should be added in overrides array, as example below:
{
"eslintConfig": {
"extends": ["react-app"],
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"eqeqeq": "warn"
}
}
]
}
}
My workaround:
Add a .eslintignore file:
*
and run eslint with --no-ignore. So you are able to setup your own eslint. If you need a ignore file you can define it with --ignore-path instead of using the --no-ignore option.
One way is to eject react-scripts - by running yarn eject / npm run eject - and turn off eslint in webpack config file manually.
Beware though that ejecting should not be done lightly and other options should be considered before ejecting. Please read Don’t eject your Create React App to gain some understanding of what it means and perhaps some reason's why you shouldn't
Please take a look at this fork: create-react-app closer look, especially at eject-tic_tac_toe directory, where you have scripts/start.js - the script where the magic happens after yarn start / npm start - and config/webpack.config.dev.js - where you have webpack's config, used in start.js. This is the part you can be interested in to edit:
// …
module.exports = {
// …
module: {
preLoaders: [
{
test: /\.(js|jsx)$/,
loader: 'eslint',
include: paths.appSrc,
}
]
}
// …
};
What changes do I have to make inorder to actually run a successful build and host my website on bluemix?
Right now, this is my Gruntfile.js, manifest.yml and package.json. The base folder 'app' is an Angular application -
module.exports = function(grunt){
grunt.initConfig({
connect: {
server: {
options: {
port: 9000,
base: 'app',
keepalive: true,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect']);
};
package.json:
{
"name": "dummy",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {"grunt-cli": "^1.2.0",
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.10.1"
}
}
manifest.yml:
---
applications: #Reference http://docs.cloudfoundry.com/docs/using/deploying-apps/manifest.html
- name: dummy #Application Name. Unique to the user's Space
memory: 256M #The maximum memory to allocate to each application instance
instances: 1 #The number of instances of the application to start
path: ./ #Path to the application to be pushed
command: npm install && node_modules/.bin/grunt serve #The command to use to start the application
Few suggestions when working with node applications and Bluemix:
To start a node application it's recommended to use npm start and specify the script in the package.json.
If your application needs to build assets, specify how to do that in the postinstall script in the package.json. For example if you are using Gulp and your main task is build you will have something like:
"postinstall": "gulp build"
When running in Bluemix VCAP_APP_HOST and VCAP_APP_PORT will have the host and port where your application will run.
The files below have the fixes mentioned above:
manifest.yml:
---
applications:
- name: dummy-kartik-yadav
memory: 512M
instances: 1
path: .
command: npm start
package.json:
{
"name": "dummy",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node_modules/.bin/grunt serve",
"postinstall": "console.log('build ui assets like js, css, html...')"
},
"author": "",
"license": "ISC",
"dependencies": {
"grunt-cli": "^1.2.0",
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.10.1"
}
}
gruntfile.js:
module.exports = function(grunt){
grunt.initConfig({
connect: {
server: {
options: {
port: process.env.VCAP_APP_PORT || 9000, # listen to the port that bluemix will assign you
base: 'app',
keepalive: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect']);
};
After doing the changes mentioned above, open the project folder and run npm start. If it works locally, it will in Bluemix.