I am currently getting my head around how to serve an angular 1.4 app without all the concatenation/minification etc . In my current project we use grunt and the grunt serve option is bundling all the js/css together and I would like to see the 'as is' js files in the devtools. I tried to reconfigure the grunt serve but it looks too complicated. For example looks like the index.html file needs to be in the app folder for it too work but this is different in my project. How can I get it working or what other options( webpack ?) do I have?
How about looking at generating source maps for your .js files - this will allow you to serve minified (as you would in production) and map to your source files, allowing you to debug through the unminifed code.
Take a look at the grunt-contrib-concat plugin - https://github.com/gruntjs/grunt-contrib-concat
Related
This should be straightforward - Is there a way to remove comments in HTML/view output during an angular build or render processes? The goal is simple - I don't want users to see them. I know this can be done with something like Grunt or Gulp, but want the comments to be visible during development (and currently have Grunt for a build tool). I've heard this can be done using the Angular CLI, which I know is for use in Angular >=2.0 projects, but am not sure if it could be using in a 1.x/JS project.
In Angular 2+:
ng build --prod
creates the dist/ folder in the root. It contains via webpack stripped down code without any comments, at least with the standard configuration.
I understand that in react you cannot import files outside src folder.
But what is the reason for it exactly and can I disable it?
In my project react web app is only part of the whole thing, and different parts share some files (configs, build output), so folder structure looks like this
ProjectRoot/
config
build-output/
Part1/
Part2/
WebApp/
src/
...
Sure, you can copy files or create symlinks, but that's duplication and inconvenient.
This is a restriction of Create React App only.
This tool exists to get new users up and running with the react framework as fast as possible by abstracting away the tooling. The part of tooling that is limiting you in this instance is their webpack configuration, which is preset to only look for javascript files in your src directory.
That explains the why? but to answer the other half of your question:
how can I disable it?
Is that you would need to eject from Create React App and then modify your webpack config to allow it to search directories other than src/
First - this has nothing to do with react itself.
If you refer to importing javascript modules (for now using module loaders like systemjs, require, etc.) then the answer is:
It depends what directory is being served by web server. If you have set up your web server to serve WebApp/src folder only - then no, browser will not be able to get access to the files outside and so module loaders. If you will serve all ProjectRoot directory - then yes, you can.
If you prepare your web application for deployment using some sort of bundlers (webpack, browserify) - it depends on how you will configure them and instruct to include the required files in the resulting bundle.
How to use the production version of a react or angular project and run without a local server?
( like opening from index.html or something similar)
I want to make a static web application that uses react or angular 2 as a starting point. Eventually, this will be dynamic so it make sense to take advantage of either.
I don't mind using local http-serve to serve the html and css pages in development but due to some restrictions i won't be able to set up a local server or run npm start from the terminal.
I did a lot of research but never found a definitive answer as to
So like How to use the production version of a react or angular project and run without a local server?
( like opening from index.html or something similar
React (same as Angular) is a client-side library/framework. So all you have to do is to bundle your application to a single .js file. That file will probably include React/Angular and you may just load it in your HTML file. You definitely don't need a http-serve for that. It is possible to deploy your index.html and your bundle.js file to a shared hosting and just load the app.
I'm wondering if it is possible to split up bundles using the angular cli based on a component. For instance, I would like to have multiple components in this app that could or could not exist on the same page, but reference them through separate bundles. Some kind of set up like this would be desired:
/test-app
.angular-cli.json
package.json
tslint.json
src
app
email-list
*.ts
*.html
email-compose
*.ts
*.html
links-links
*.ts
*.html
After the project is built, I would like to be able to have the following bundles:
poylfills.bundle.js
vendor.bundle.js
email.bundle.js
links.bundle.js
Is this possible?
They've prepared support for multiple apps/entry-points (which is equivalent to what you're asking) in the angular-cli.json, but they havn't gotten around to implement it yet. Here's a link to the issues page
In addition, they've announced that they don't intent to expose the webpack configuration of angular-cli, so you wont be able to use your own custom webpack config to do the separate bundling.
So for now, I guess the conclusion is, that it may not be possible (or worth the effort) to make Angular-cli create multiple separate bundles. So you'll probably have to either wait, or skip using the cli, and do the bundling "manually" (create your own bundling process using grunt, gulp, webpack or similar).
I have a problem with a MEAN.js app in that its really slow to load and from the inspect i can see that its loading js in 70 different files.
Couple of questions
Why is there so many js files seperate? Can they not be merged into one and served quicker like YSlow advises?
Edit
'modules/*/client/*.js',
'modules/*/client/**/*.js'
Folder Structure
modules/savings/client/controllers/client.controller.js
MEAN.js has that particular aspect covered. In fact, if you run your app using just grunt command, the app will start running in development environment, and so the js files (either the ones from 3rd party libraries or even your custom js files) are not concatenated nor minified. This helps you while debugging. However this is clearly not good for an app in production in terms of performance.
If you use the command grunt prod your app will start running in production mode and so your custom js files will be concatenated and mninified. 3rd party library files won't be concatenated but grunt will use the minified version of them.
You can see which assets will be loaded for both development and production modes in config/assets/development.js and config/assets/production.js, respectively.
Also if you want to see what are the differences between both grunt and grunt prod tasks you can check your gruntfile.js.
Note 1: The commands I mentioned about grunt can also be used with gulp, since MEAN.js has both a gruntfile.js and a gulpfile.js defined.
Note 2: If, by the time you use grunt prod and still have so many files being loaded, that means you are using an high number of 3rd party libraries and a possible solution for that case is to concatenate 3rd party library files into a vendor.js file however in doing that you might run into trouble, such as some libraries like AngularJS needing the files to be loaded with a specific order. You will need extra caution if you edit your gruntfile to implement such task.