This MEAN sample, ng serve starts the app fine at port 4200 but can't fetch data as Fiddler shows it fails calling an API at port 3000.
How to start npm alongside ng?
/package.json
"name": "awesome-bucketlist",
"version": "1.0.0",
"description": "A simple bucketlist app using MEAN stack",
"main": "app.js",
"scripts": {
"start": "node app"
}
/angular-src/package.json:
{
"name": "angular-src",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}
launch.json
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000/bucketlist",
"webRoot": "${workspaceFolder}/app.js"
}
In your package.json, you can chain commands together using &&.
Ex:
"scripts": {
"start": "./some_script_to_start_angular.sh && node app"
}
Anyway I finally realized having both Api and UI in the same folder/project/solution is not practical. An API is not specific to an UI, it's a universal DLL/service, should be siting somewhere by itself. So I separated them into two diff folders and have 2 VSC instances to run them:
start the API in debug mode
in 2nd VSC, run ng serve and let it take time to build, when "Compiled successfully" go to launch.json to start the debug entry associated with Chrome
they work perfectly.
Related
I have my own nodejs web application which is using Parcel 2 to bundle the resources.
{
"name": "acme-web-app",
"version": "0.0.1",
"description": "",
"keywords": [],
"license": "",
"author": "",
"scripts": {
"build": "parcel build index.html",
"dev": "parcel index.html --open",
"start": "npm run build && npm run dev",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"#parcel/packager-raw-url": "^2.6.0",
"#parcel/transformer-sass": "^2.6.0",
"#parcel/transformer-webmanifest": "^2.6.0",
"parcel": "^2.6.0",
"sass": "^1.52.2"
}
}
All works fine - the js bundles end up in a dist folder.
I am contemplating whether it is possible to write a parcel plug-in within this project is executed when the build script is run.
Is it possible - or does every reference need to go through npm channels via devDependencies?
I haven't figured a starting point for this - and have not been able to find what I am looking for on google so hopefully, the question makes sense.
NOTE: I have only really built web applications with nodejs.
I have a vue js app, which i run it locally with npm run serve command.
I am trying to run it in a development linux ( RHEL) box with pm2 library, but it doesn't start the application. how exactly to configure my project to run with pm2? my package.son file is below
{
"name": "app",
"version": "0.1.0",
"scripts":{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.14",
...
}
}
I can access first screen for login though after it returns access not allowed to local resource
it works well in browser
( I am able to run my project in angular well in a web browser but because it is a desktop application I have to use electron, when I build to run in electron, it starts well, displays login but when I press login instead of returning display it return a white screen and in console, access to resource not allowed
main.js
win.loadURL(url.format({
pathname: path.join(__dirname, './angular_build/index.html'),
protocol:'file:',
slashes: true
}));
package.json
"version": "0.0.0",
"main": "main.js",
"build": {
"directories": {
"output": "release/"
}
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron ."
},
I am creating an electron application that is utilizing an Angular 5 application as the front end. I am able to run the application in a development mode by running npm run build && electron . to trigger the electron instance and load up the angular site. However, when building using npm run dist based on the documentation, it will not allow me to reference the files or it is not able to read asar file or I might be doing something wrong, I am totally clueless here. When I install application running .exe file I totally see blank screen.
Here are the some code snippets of package.json and electron-main.js
package.json
"version": "0.0.0",
"license": "MIT",
"main": "electron-main.js",
"build": {
"appId": "com.example.Dashboard",
"productName": "Dashboard",
"win": {
"target": [
"nsis"
]
},
"nsis": {
"runAfterFinish": true
}
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "install-app-deps",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron ."
},
electron-main.js
win.loadURL(url.format({
pathname: __dirname + '/dist/index.html',
protocol: 'file:',
slashes: true
}))
Finally struggling a lot and breaking head found a solution. First thing Electron-builder is not building files in the required location there are open bug issues in the GitHub.
You can refer these links for more
1.Build Process Ignores app/dist/ folder?
2.Not all files in /app are packaged.
Usually in ReactJs and all they are using two package.json files to avoid confusion, and they are writing a lot webpack code.
There is a work around which I found.
What exactly happening here is that angular-cli is outputting build files in the dist folder. Electron builder is also outputting its files in the dist folder.
First thing I want clarify here is that If you run npm run dist electron builder is not going to build files for us.
So first you need to build files running ng build.
second you need to make changes in the package.json specifying build resources to make use of build files and you need to change electron-builder's output directory.
Modified package.json looks something like this.
"main": "electron-main.js",
"build": {
"appId": "com.example.companyDashboard",
"productName": "Farmhub Companies Dashboard",
"files": ["**/*", "dist/**/*"],
"directories": {
"output": "release",
"buildResources": "dist"
},
"asar":false,
"win": {
"target": [
"nsis"
]
},
"nsis": {
"runAfterFinish": true,
"license":"LICENSE"
}
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"pack": "build --dir",
"dist": "build",
"postinstall": "install-app-deps",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron .",
"electron-package": "electron-packager . FarmhubCompanyDashboard --platform=win32 --arch=x64"
},
If you run electron builder running command npm run dist It works like a breeze.
I'm starting a project in Vue.JS and I'm a little new to nodemon.
Here is my package.json file
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon src/app.js --exec 'npm run eslint'",
"lint": "eslint **/*.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"eslint": "^4.16.0",
"nodemon": "^1.14.12"
}
}
I can get nodemon to run through app.js with "nodemon src/app.js". I've tried a whole bunch of combinations after --exec and haven't had any luck.
The correct way is (in package.json and windows):
"scripts": {
"start": "node index",
"start-dev": "nodemon --exec \"npm run lint && node index\"",
},
This works pretty fine for your use-case.
nodemon src/app.js --exec "npm run lint && node"
or you can write nodemon.json file in your root directory
{
"watch": ["src"],
"ignore": ["**/*.test.js", "**/*.spec.js", ".git", "node_modules"],
"exec": "npm run lint && node src/app.js"
}
Im using nodemon version 1.19.4. You just missed the "events" key. The right way would be to create a nodemon.json in your root folder like that, then a lint script in your package.json with your lint command:
{
"watch": [ "src" ],
"ignore": ["**/*.test.js", "**/*.spec.js", ".git", "node_modules"],
"events": {
"restart": "npm run lint"
}
}
Here you can check about Nodemon Events.
When using events you don't need to manually handle your application state (restart, crash, node execution, etc), just put what you want to happen when nodemon refreshes.
I've been using a custom script for a while now which I finally published to npm.
Check it out here: https://github.com/theoephraim/lint-fix-nodemon
This helps avoid double restarts when eslint fixes your files as well as not failing on the initial run if eslint has fatal errors.
Hope it helps!