I am trying to understand the example of Angular full stack project but I am not able to do so!
The project is here:
https://github.com/DavideViolante/Angular-Full-Stack
in the package.json, you can find a "dev" script to test locally the app. the command is the following:
concurrently \"mongod\" \"ng serve -pc proxy.conf.json --open\" \"tsc -w -p server\" \"nodemon dist/server/app.js\"
I don't understand why ng serve is called and app.js also. I mean ng serve create a static file server and there is also a static file server with Express. So launching that starts two servers. What's the point?
Here is a breakdown of all command
concurrently -- runs all command simultaneoulsy
\"mongod\" -- To Start MongoDB server
\"ng serve -pc proxy.conf.json --open\" -- To serve angular stuff
\"tsc -w -p server\" -- run the compiler in watch mode and compile project
\"nodemon dist/server/app.js\" -- to run your server side project
I don't know this project but the app.js normally is for the back-end and the ng serve is for serving an angular project in your development environment.
I hope this help.
Related
I'm trying to chain the ng serve script call while running but when I've ran this command the second chained script build-components.js runs only on first call.
I thought concurrently package here would allow both scripts to run in sequence according to docs https://www.npmjs.com/package/concurrently
What I'm aiming to do is run the build-components.js script every time ng serve runs (i.e, detects a source change).
Package.json script:
"build:watch": "concurrently \"ng serve --port 4003\" \"node build-components.js\""
Testing
concurrently "ng serve --port 4003" "node build-components.js"
[1] node build-components.js exited with code 0
[0] i ｢wds｣: Project is running at http://localhost:4003/webpack-dev-server/
Question:
How can you run another npm script after each ng serve build?
I've also had a look at the npm post hooks but this doesn't seem to run the script after ng serve has ran either.
http://www.marcusoft.net/2015/08/pre-and-post-hooks-for-npm-scripting.html#hooks-pre-and-post
This is the build-components.js script for reference. It copies some extra build files to a public folder for hosting:
const fs = require('fs-extra');
const concat = require('concat');
(async function build() {
const js = [
'./dist/app/runtime-es2015.js',
'./dist/app/main-es2015.js',
'./dist/app/scripts.js',
];
const css = ['./dist/app/styles.css'];
await fs.ensureDir('components');
await concat(js, 'components/component.js');
await concat(css, 'components/component.css');
})();
This is not possible. ng serve does not complete when run in watch mode so chaining items to run after it will have no effect. The serve command has no hooks for this.
I'm new to angular cli and webpack. In my project I have a webpack config file which among other configurations, it indicates that a merge file plugin (MergeJsonWebpackPlugin) should run for merging certain files and putting them on an output file somewhere else.
My problem is that when running webpack this is done, but those output files are stored somewhere in virtual memory. For what I've read, this is the normal behavior until you properly build you app for production in which case those outfile will be written in disk.
My app of course, tries to find those output files on the assets folder for using them inside the app itself. I've used another plugin (WriteFilePlugin) so as to been able to write the files in disk while running the webpack dev server, and this works great.
Now, For been able to handle this now I have a dedicated angular cli script in my package.json file
....
"scripts": {
"ng": "ng",
"start": "ng serve --port 9978",
"build": "ng build",
....
"custom": "webpack-dev-server --inline --progress --colors"
}
...
So, I have to run "npm custom" in order to have my files written in disk. Then I have to run "npm start" to serve my application and use those files. If for some reason I update my source files which should be merged, then I have to stop my start script and run the custom script for the webpack dev server all over again
Is there a way to include this automatically when running the start script via angular cli?
I've been reading that when you run "ng serve" what happens behind the scenes is:
Angular CLI loads its configuration from .angular-cli.json
Angular CLI runs Webpack to build and bundle all JavaScript and CSS code
Angular CLI starts Webpack dev server to preview the result on localhost:4200.
...because it includes LiveReload support, the process actively watches your src directory for file changes. When a file change is detected, step 2 is repeated and a notification is sent to your browser so it can refresh automatically.
On point 3 I would expect my merged files to be generated and store inside the assets folder but this is not happening (as it does when running "npm custom"), neither the update of this merged files whenever I update them.
Am I missing something? Would this be possible to do? Thanks in advance!
So, i tried to make Electron app to run Express as the server and React as client. My step is basic one i think, first i generate electron with electron boilerplate and then inside the project that got generated, i generate express into server folder using boilerplate also, and inside the same electron project folder i generate react with create-react-app into client folder.
Here is my project folder structure:
client folder from create-react-app, server folder from express boilerplate.
In development i run express at port 30001 and react at port 3000. And using this script to run them :
"start": "concurrently \"cd ./server && cross-env PORT=3001 npm start\" \"cd ./client && cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
But, from this point i don't know a slight clue of how to build this.
Note: I have tried another react-electron boilerplate, and some just too much for me or some can't import node modules directly to reactjs i don't know why. I am using expressjs as bridge between my react and node modules. Any insight on better implementation would be greatly appreciated.
I'm trying to run nuxt application in docker container. In order to do so, I created the following Dockerfile:
FROM node:6.10.2
RUN mkdir -p /app
EXPOSE 3000
COPY . /app
WORKDIR /app
RUN npm install
RUN npm run build
CMD [ "npm", "start" ]
However, when I build the image and run the container (docker run -p 3000:3000 <image-id>) I get nothing while hitting localhost:3000 in my browser. What could be the cause?
The application inside Docker container by default is accepting network traffic onhttp://127.0.0.1:3000. This interface does not accept external traffic so no wonder that it does not work. In order to make it work we need to set HOST environmental variable for nuxt app to 0.0.0.0 (all ip addresses). We can do this either in Dockerfile, like this:
FROM node:6.10.2
ENV HOST 0.0.0.0
# rest of the file
or in package.json in the script's "start" command:
"scripts": { "start": "HOST=0.0.0.0 nuxt start" ...}
Or any other way that will make the nuxt application to listen elsewhere than on localhost inside container only.
I'd like to be able to run a custom command when webpack detects that my files have changed. The command is to run a middleman build command that is based on rails, and not a simple js build/include.
How would I go about this?
You can use any application that is built on top of fsnotify library. From ruby world you can use guard or nodemon from Javascript world.
You'd want to watch your generated files.
Whenever any of the two files changes, it will execute the command.
nodemon --watch webpack.config.js --watch webpack.parts.js --exec \"webpack-dev-server --env development\"