I am running an angular 7 web application that has a dist folder with bunch of java script files that are not bundled. I would like to bundle all the java script file inside the dist folder in one java script file to minimize the http request when I load my web page
I have tried the following:
npm run build --aot --buildOptimizer --prod
I am expecting to see bundled files in dist folder
Your files will not be bundled to a single file. At least several files will be available like main.js, vendor.js etc.
However, if you want to pass building options like --aot you have to run
ng build --aot --prod
npm run build will run exactly the command defined in package.json.
Related
I'm trying to make a chrome extension with Vue 3 using Vue CLI which requires a script to run in the background.
I have a background.ts file in my src/ directory, and want to know how I can configure Vue CLI to compile that and put it in the dist/ folder when I build the project.
I am trying to bundle an web application that written with ES6 module system & using rollup from command line with custom modules folder that I want use it as root modules directory to be resolved. Then I downloaded some packages to that custom folder with yarn add --modules-folder <custom folder path>. Now When I am using this command rollup -w -i App.js -o bundle.js -p '<modules path>/#rollup/plugin-babel={presets:["<modules path>/babel-preset-solid"]}' -p '<modules path>/#rollup/plugin-node-resolve={extensions:[".js"],customResolveOptions:{moduleDirectory:"<modules path>"}}' I am getting this error (node:13672) UnhandledPromiseRejectionWarning: Error: Cannot load plugin "<modules path>/#rollup/plugin-babel": Cannot find module '<modules path>/#rollup/plugin-babel' But I am pretty sure that all packages are in custom moduels folder path. But strangely when do same process and download packages to custom location with node_modules folder in it, It works fine. So what is the problem? What am I missing here?
I tried to run index.html inside dist folder in the browser but its not working, unlike the angularjs application where we import the script file in the index.html and the application simply works.
Why we can't do that in the Angular Project as there are some javascript files which are imported in the index.html same as any other javascript project.
You can do that in Angular application as well. You need to install http-server for that.
Follow the below steps-
Install http-server from npm server using following command-
npm install http-server -g
Generate the build in dist folder using command-
ng build --prod --aot --output-hashing=none
Run the command to run the project from dist folder-
run http-server ./dist
This will start serving your project from dist folder.
When index.html is being loaded directly in the browser, it doesn't use the http protocol. It is being loaded over the local file system over file:/// Browsers don't allow direct access to the .js files from a file system because of the security reasons.
The file system is not providing needed features of a server which is required. Github comment with some more details.
At a minimum, a simple static HTML server is required to run the Angular applications.
Angular apps are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side. Read More
Whenever I run
$ npm run build
on Nuxt SPA mode it generates a ./dist folder and ./nuxt/dist folder.
What's the use of ./nuxt/dist?
./nuxt/dist folder sample
The dist folder contains html and js files then you can use it to deploy to server and run as statics site.
Nuxt.js lets you upload your dist files to your CDN for maximum performances, simply set the publicPath to your CDN.
export default {
build: {
publicPath: 'https://cdn.nuxtjs.org'
}
}
Then, when launching nuxt build, upload the content of .nuxt/dist/client directory to your CDN.
Ref: https://nuxtjs.org/api/configuration-build/
The contents in the nuxt/dist folder are what is going to be served up when you are in production. It contains an optimized code to be served to your users.
.nuxt/dist is for server side rendering it will be use when you run npm run start on your server and it will start listening on localhost:3000
I have a simple Angular 4 frontend as well as a node backend which is hosted separately on Heroku.
I deploy my Angular app by running ng build and copying over the contents of the dist folder to the server.
I have since then decided to integrate the backend into the front end so it's all just one project instead of two.
I can easily run node server.js on the root and it runs perfectly on my localhost.
But how can I deploy this to my server? I obviously can't just ng build and copy over the dist folder because that only builds the client folders and files.
Could I just copy over the server folder which holds the routes as well as the server.js file along with the client files and then somehow tell the server to run server.js when the site is loaded?
I use FileZilla to transfer my files onto the server.
Questions:
How do I deploy my angular/node app with FileZilla?
Which files/folders to I copy over with the client files?
If you are using Angular CLI, run ng build command to generate the dist folder.
Copy the dist folder to the backend server nodejs project.
Serve the dist folder using your Nodejs code.
If you are using ExpressJS. This can be done in a single line
app.use(express.static('dist'));
Install Heroku CLI and follow the tutorial to deploy your app: Heroku NodeJS Tutorial
You don't need to build the node app. Node runtime can compile the javascript on the fly.
The build step in angular packages up your code into one file. There is no equivalent in node as there isn't any point. The reason angular minifies and packages a file is so you can download it quickly. You never download the code from node.
On Heroku it's really easy, you don't need to copy anything over just run git push heroku master from the root of your node folder as per the instructions here https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app
Just make sure that in your package.json you have all the modules you rely on. It might work locally if you have npm modules installed globally but they also need to be in the package.json so heroku can download them by running npm install