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 ."
},
Related
"scripts": {
"deploy": "vue-cli-service ftpdeploy --genHist --diffFileOnly --ftpCfgPath /ftpdeploy/ --ftpHistPath /ftpdeploy/",
"serve": "vue-cli-service serve && deploy",
"build": "vue-cli-service build"
},
I am trying to automatically deploy via ftp code when ever vue serve is ran.
Is this the correct syntax as I am getting errors, what would be the correct way?
"scripts": {
"deploy": "vue-cli-service ftpdeploy --genHist --diffFileOnly --ftpCfgPath /ftpdeploy/ --ftpHistPath /ftpdeploy/",
"serve": "vue-cli-service serve && npm run deploy",
"build": "vue-cli-service build"
},
My package.json:
"scripts": {
"ng": "ng",
"start": "node src/app.js && ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"main": "src/app-routing.module.ts"
},
I moved the devdependencies to dependencies.
Apps run locally with Heroku local web but display the only backend in the server.
Added a procfile containing web: npm start
Heroku assigns a port and the database is successfully connected. Backend works fine
My project structure: A src/ folder that has both my back end and frontend files.
I guess I am losing out on the project structure. Please help to make me display the frontend of the app instead of backend.
okay , 1)add the following to your app.js (or your server.js), and
app_path ='../www';
app.use('/api', songRoute)
app.use('/',express.static(path.join(__dirname,app_path)))
app.get('*',(req,res)=>res.sendFile(path.join(__dirname,app_path + '/index.html')))
2)To package.json add this,
"heroku-postbuild":"ng build --configuration=production",
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.
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 have some scripts in my package.json, and I need to know how to get the start script to correctly accept the -port parameter for angular-cli.
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
We need this because we would like to run multiple instances of our software simultaneously. Currently, if I have one project running on the default port 4200, and try to run npm start -port 4300 in a second terminal window, I get, "Port 4200 is already in use. Use '--port' to specify a different port."
What can I do to get my build to run in a particular port? And how can I make it so that I can pass the port number into the npm start script from the command line?
If you add "--" the parameters are passed through:
npm start -- --port 4301
Change it as,
"scripts": {
"ng": "ng",
"start": "ng serve --port 4301",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
You can try this command:
npm run start -- -p 4300