I am getting my app ready for production. The thing is that ng build --prod --aot creates many files. inline.js, main.js are in MB. Also there are .gz files with smaller size. I am working with an Apache server.
Do I need to upload the whole dist folder?
How can I use .gz instead of .js?
In my dist/index.html there are generated links for the .js files. Should I remove it?
If you are using it in a webpage, gzip is a configuration method in your web server. The file is gzipped by the server, sent to the browser. No manual action is needed. For Apache: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html.
If you are delivering the code to developers, you could use the gzip command.
Related
I have a react project which doesn't use webpack to bundle its files. Its a docker application which uses nginx to serve static files on production server. All the resources available on internet use webpack's CompressorPlugin to compress the bundled build files. How do I compress the bundle using brotli or gzip while continuing to run the application without webpack?
If you are not using webpack, you will have to manually compress the files before deploying it to the server.
One of the programs you can use is Peazip. This can help you with what you want to achieve.
I am doing my first angular project and I have to upload it to a Development test server. Problem is that, an Angular project (event in default state) has so many files that it takes a lot of time to upload it.
I investigated and the .gitignore file seems only to be to avoid the commit of the files or folders specified there.
Could you please tell me if there is a way to minimize the number of needed files to upload and install or use them later, in local, in a safe way? Without risks of corrupting the project.
If you are using Angular CLI you can get a production build by doing
npm run -- ng build --prod
in the project directory. This will create a minified, bundled version of your app in the dist folder, ready for upload. You will then need an http-server running to serve these files.
As #yarz-tech suggested, the solution was to remove the node_modules each time I upload it. Then, when someone downloads it and wants to work with it again, must execute npm install. That allows npm to install all the dependencies our project needs, based on what is is specified on the package.json file, which appears not only for Angular projects, but for Node for example.
Thanks to everyone.
To be clear, I am not asking if I need node_modules folder on live host server. That question & answer exists on Stack Overflow already. The consensus answer, in general is YES - I still need the node_modules directory during runtime.
I am also not asking about running npm init or npm install. I understand how that works.
I am specifically asking - do I still need the node_modules directory on the live/host server if I use webpack during my build process? Doesn't webpack bundle all the necessary JS, etc into folder? Can I delete the node_modules folder if use webpack? Or, will I still need that directory during runtime?
This is for a basic front end, client side web application only. This front end calls other API only for backend sevice. This front end web application is being hosted on Windows/IIS.
The site's published code includes static references like this:
<link rel="stylesheet" href="/css/app.css?id=f243e9c6546d420fec1f">
<script src="/js/app.js?id=bf7be8f179cc272c0190"></script>
Ignore the id= part, as I think that's part of the web framework for cache busting.
No, everything is in the bundle after you build. You can take the files defined as output (usually whatever is in the "dist" folder) and stick them on whatever static server you want without the need of the supporting node_modules.
During your web pack build process ,need the node modules folder , because when you import a file from the node_modules , web pack will try to fetch the file from the particular node_module folder recursively.
Once you successfully done with the build you will get a dist package folder with all the bundles for the deployment, it will not contain node_modules folders.
You can test it by using
npm run build
My understanding is that webpack in dev mode will put all your imported somewhere and then serve your bundle.js to the client. When the code inside bundle.js asks for a css file, the css-loader would have been configured previously to set up the file path for your client to ask the server to load the stylesheet. I want to check this somehow and ensure that my sever has the stylesheet. Is there a way to do this?
When using webpack-dev-server your bundle is loaded into memory, not written to disk. If you run the webpack cli instead it will put your assets into the output directory. You can easily check to see if what you expect to be output is there.
If you have installed webpack locally to your project you can run it from your root dir with:
`node_modules/.bin/webpack --config <path/to/webpack.config.js>`
If webpack.config.js is in the same dir then you don't need the --config flag.
This is what you do when you deploy to production since webpack-dev-server is designed for development only.
I've made my first Angular2 application, while using ng servefor hosting. Now I've to add some backend(because I need some small server logic).
I've found this who basically explain me how to host an angular 2 app on nodeJs. But ng serve was doing a lot of things, checking the changes, bundling the differents JS/CSS files, injecting angular into my template, getting my dependencies.
I cannot just "generate" angular web site and then, since I've to update the angular part to get the data from the web api and work with it.
So what should I do to switch from ng serve to an nodeJS?
EDIT:
Viewing the answer, I must not have been clear enough.
My angular JS is not an application that will on client ONLY, I've done some part of it(navigation, some form, ...) but now I need to host a server with web service and websocket to continue the work. It's not about deploying this to a productive server. It's about to moving to an environnement that allow me to work on the server and the client side.
I think I finally understood your question:
Instead of using the devserver bundled with angular-cli (ng serve), you want to use your own Node.js-powered server.
Also, you DON'T WANT TO STATICALLY BUILD your app (ng build). You want to serve the live build (which has to be generated automatically by the server).
Here's how you can do it:
1) Watch, transpile, bundle...
Webpack is perfect for that.
Create a webpack config file with the right settings for an Angular app. Here's an example from angular2-webpack-starter: webpack.dev.js.
The example is bit verbose. Just keep in mind the config file is where you tell webpack how to handle .ts files, what bundle(s) it should generate, etc.
2) Serve the bundle(s) generated by webpack with a Node.js server
I see two options, depending on how much control you want:
2a. Use webpack-dev-server (not a lot of control)
webpack-dev-server --config config/webpack.dev.js --watch src/
You can see that the webpack-dev-server uses the config file previously mentioned.
Again, you can see an example of the full command to run in angular2-webpack-starter's package.json file.
2b. Create your own server (a lot of control)
You could create a Node.js/Express server using the webpack-dev-middleware, to which you would feed the config file created in step #1.
The middleware is the magic link that will let you serve the files emitted from webpack over the Express server.
Example of a Node.js/Express server which uses the webpack-dev-middleware: srcServer.js.
Does that answer your question?
I know this is an old question but I am just having this same concern and I found ngserve proxy option useful. In development you can run node on another port then calls to /api get redirected through to node.js.
https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md
package.json gets:
"start": "ng serve --proxy-config proxy.conf.json",
then make a proxy.conf.json file like this
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
run ng build --prod to build your application.
After building the application, you will find your final dist code in dist directory.
Now, use this code in your server.js file in Node.js.
(function() {
const express = require("express");
const app = express();
app.use(express.static(__dirname + "/dist"));
app.listen(80);
console.log("port" + 80);
})();
I'm not sure if this is still relevant, but this might help others get a quick start:
Run your NodeJS server part e.g. like this
nodemon server.js
Open 2nd terminal (in VSCode Ctrl+Shift`) and start client part build & watch
ng build --watch
They will continue to work in parallel, each doing it's own job. This is not exactly the same as ng serve, e.g. this will not reflect your changes immediately inside the page, you still have to hit F5 (which you most probably did anyway before Angular). But this is fast, free and much easier than becoming web-pack guru. And you are still able to switch between terminals to check for any output / errors.
Angular app is a HTML 5 app. So you just need to serve it as a static file in NoeJs.
How
Build your app
ng build --prod
This command will create a folder named dist. The folder content is your HTML app.
Serving your app
Just serve it with your NodeJs app pointing to the index.html file.
ng serve is only for development. It is not intended as a production web server.
ng build --prod --aot --no-sourcemap will bundle your application ready for production and place it in your dist/ directory.
If you want to use Node.js you can use Express with the static file middleware. You will probably also want a RewriteRule middleware to support serverside HTML5 Pushstate.
In reality you don't need NodeJS to serve your built site as it will just be flat files. Nginx, Apache or IIS with rewrite rules to support HTML5 Pushstate will be enough.