I have the following in my package json that is responsible for building and running the Angular 2 application. May I know the meaning of each of the flags in the targets ? This for deploying an Angular 2 application in IBM Bluemix
"build": "rimraf dist && webpack --progress --profile --bail",
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" "
The answer to your questions are located in the documentation for each of the node js libraries:
https://www.npmjs.com/package/rimraf
https://www.npmjs.com/package/concurrently
https://www.npmjs.com/package/tsc
https://www.npmjs.com/package/webpack
https://www.npmjs.com/package/lite-server
The build script is deleting the dist folder, then building your app with webpack.
The start script is compiling your typescript and then running the typescript compiler in watch mode and then starting lite-server concurrently.
Related
To build an ExtJS application using sencha cmd I used the command below
sencha app build
But how I can build using open tooling? The docs is not clean about build application with open tooling.
npm run build should do the job
Check your package.json, you normally have a script section
You could build the app using the commands
npm run build:desktop
npm run build:phone
The above commands used based on the package.json file script section.Below is the snippet of code of script section of package.json file.
"scripts": {
"start": "npm run dev:desktop",
"clean": "rimraf build",
"dev:desktop": "webpack-dev-server --env.profile=desktop --env.browser=yes --env.verbose=no",
"dev:phone": "webpack-dev-server --env.profile=phone --env.browser=yes --env.verbose=no",
"build:desktop": "npm run clean && cross-env webpack --env.profile=desktop --env.environment=production --env.treeshake=yes",
"build:phone": "npm run clean && cross-env webpack --env.profile=phone --env.environment=production --env.treeshake=yes"
}
We were suffering a lot and spent significant effort to find the tooling what suits our needs the best. Finally we ended up using webpack because there is a large ecosystem around that so it opened up endless possibilities.
Although sencha did some webpack plugins but they are mostly just watching changes. Therefore we have created a webpack loader what is resolving ext's dependencies. This webpack loader will allow to use webpack to build your ext project. There is a small sample to help to configure it.
I have a PHP + React JS application that I'm trying to get deployed via Google App Engine Standard. I've set the app.yaml to use php73 though I'm using Webpack to package the JS via yarn (actually, using Symfony Encore, but that shouldn't matter).
For the time being, I am using webpack locally and pushing those files up to GAE as a workaround, but I'd rather they be packed on GAE itself. Am I able to somehow execute shell commands for a gcloud app deploy so that yarn executes the scripts I want? Is creating a separate service with nodejs running just so it executes package.json scripts necessary, then deploying both PHP and nodejs services?
You can run custom build steps in Google App Engine by adding a "gcp-build" script in your package.json.
Example:
"scripts": {
"prepare": "npm run gcp-build",
"pretest": "npm run gcp-build",
"test": "repo-tools test app -- index.js",
"posttest": "npm run lint",
"lint": "tslint -p .",
"start": "node ./index.js",
"gcp-build": "tsc -p .",
"deploy": "gcloud app deploy" }
Also you can also set the runtime to install specific dependencies using yarn, by using yarn add PACKAGE so a "yarn.lock" file is auto-generated. If App Engine finds a "yarn.lock" in the application directory, Yarn will be used to perform the npm installation
I'd also recommend that you check the following community tutorials:
Run Symfony on Google App Engine standard environment
Using Yarn on Google App Engine
In addition to checking the Symfony Demo Application code that might be a good example.
I'm trying to figure out how to run a react application (created through create-react-app) with different profiles.
That is, suppose I have several environments (local, dev, prod) and I have a fetch that refers to the backend (which is deployed on another server).
The backend has its own address for each environment. I need to somehow set global variables for different launches.
For example, in Springboot this can be done via application-"profile".properties.
I run the application through npm install -g serve & serve -s build. How to do it?
When working with create-react-app, you can configure your app using environment variables.
It is explained in detail in the documentation here: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
All environment variables need to be prefixed with REACT_APP_.
You can define profiles with different environment variables using .env files.
For example, to set an API URL in production, create a file .env.production with the following contents:
REACT_APP_API_URL=https://my.beautiful.api/
…and as default (for local development), create a file .env:
REACT_APP_API_URL=http://localhost:3001/
The environment variables from the .env.production file will be used when you build your project with npm run build
The environment variables from the .env file will be used when you work on your project in local dev mode with npm start
Example for using the environment variable in your app's code:
fetch(process.env.REACT_APP_API_URL)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});
The way i handle this case is by using package react-native-config and i have create .env file (.env.dev, .env.staging, .env.prod) and i have define some scripts in the package.json. I am using react-native init project though.
as below
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"postinstall": "sed -i '' 's/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/#import \"RCTValueAnimatedNode.h\"/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h",
"clean": "cd android && gradlew clean",
"feature": "node scripts/createfeature.js",
"component": "node scripts/createcomponent.js",
"android": "cd android && gradlew app:assembleDebug && gradlew installDebug",
"storybook": "storybook start -p 7007",
"prestorybook": "rnstl",
"android-dev": "SET ENVFILE=.env.dev && react-native run-android",
"android-staging": "SET ENVFILE=.env.staging && react-native run-android",
"android-prod": "SET ENVFILE=.env.prod && react-native run-android",
"ios-dev": "ENVFILE=.env.dev react-native run-ios",
"ios-staging": "ENVFILE=.env.staging react-native run-ios",
"ios-prod": "ENVFILE=.env.prod react-native run-ios",
"build-android-prod": "SET ENVFILE=.env.prod && cd android && gradlew assembleRelease"
},
Using Hyperledger Fabric Composer I created a simple application.
However, when I try to interact with the application (which is served at http://localhost:4200), I keep getting the following error message:
Error: 404 - Could not find API route. Please check your available APIs.
This error message appears whatever I want to do (create new Participant/Asset, submit a transaction, ...)
I checked whether the error message had something to do with the application I created. So I also deployed another application I downloaded from the Internet. Again, the same error message appeared when I tried to interact with the UI.
**********************************************************
Here's the long story:
After I had finished writing the code, I took the usual steps to obtain an Angular Web App:
Inside the folder of the app ("my_app"), I created a folder called "dist".
Inside folder "dist" I ran the following commands:
composer archive create -t dir -n ../
composer network install --archiveFile my_app#0.0.1.bna --card PeerAdmin#hlfv1
composer network start --networkName my_app --networkVersion 0.0.1 --card PeerAdmin#hlfv1 --networkAdmin admin --networkAdminEnrollSecret adminpw
composer card import -f admin#my_app.card
//start rest-server:
composer-rest-server
yo hyperledger-composer
After the last command I chose (from the menu) the option to create an "angular" application based on the business network "my_app".
A folder containing the angular-application was created (name of the folder: "angular").
Inside folder "angular", I ran the following command:
ng serve
Some output on the command line was created, among others, the following line:
** NG Live Development Server is running on http://localhost:4200 **
When I went to address http://localhost:4200 everything looked fine at first.
However, whenever I click on any of the buttons in the UI (e.g. on "Add Participant"), I get the following error message:
Error: 404 - Could not find API route. Please check your available APIs.
I found the solution:
using
"npm start"
instead of
"ng serve"
avoids the problem.
FYI. There is a tutorial that shows use of the Composer Angular generator incl the npm startsequence.
I had the same issue and got the same error messgae. So i recreated the angular application using the yo hyperledger-composer tool but this time instead of choosing "Connect to existing REST API" I chose "Create new REST API" and then it connected fine on localhost:4200 while the rest server still ran on port 3000.
I just ran into this problem with version 0.20 of the Composer CLI tools. I solved the issue by editing the following in the /package.json file:
The "start" entry originally had "0.0.0.0" for the host value -
"scripts": {
"ng": "ng",
"build": "ng build",
"prepack": "npm run build",
"start": "ng serve --proxy-config proxy.conf.js --host 0.0.0.0",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --watch false",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
}
I changed that to "localhost" -
"scripts": {
"ng": "ng",
"build": "ng build",
"prepack": "npm run build",
"start": "ng serve --proxy-config proxy.conf.js --host localhost",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --watch false",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
}
Everything worked after restarting the Angular app with the new settings.
I also encountered this error, I resolved it by running the composer and the angular app as a background process.
I installed the forever package to run the two as a background process.
Then just killed the process if you're not gonna use it.
We are working on a previously ejected create-react-app and now want to add flowtype.
We have followed the guide at: https://flow.org/en/docs/tools/create-react-app/
Should that work for an ejected app?
This has unfortunately caused the webpack-dev server launched with yarn start to stop automatically reloading on file updates.
Additionally, after adding // #flow to some files there is no output or indication of flow enforcing type checking.
Will we need to manually update the webpack configs?
Heres the package.json scripts
"scripts": {
"start": "node scripts/start.js",
"build": "yarn build-client && yarn build-server",
"build-client": "node scripts/build.js",
"build-server": "./node_modules/.bin/webpack --config ./config/webpack.server.config.js",
"test": "node scripts/test.js --env=jsdom",
},
The output for running yarn start is:
Compiled successfully!
You can now view cra in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.1.65:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
The doc you linked tells you how to install the flow-bin and to make a configuration file but don`t tells how to launch it.
Flow is separated tool that should be launch by own command (depends on how you wanna run it):
if you want to check types check manually, you need to add npm command on the "scripts" section of your package.js: "example-comand-flow": "flow". Then call it by npm run example-comand-flow and you`ll get errors directly on a terminal you running the script.
if you wanna have continuing type checking, you should find a manual how to configure it in your IDE. For example, in WebStorm you should go Preferences -> Languages & Frameworks -> JavaScript and set JavaScript language version to Flow and specify flow executable.