How to boost perf on Angular 4 project - apache

I am working on a project using Angular 4 for the frond-end and phph for the back-end with an Apache server using ubuntu 16.04 LTS where we setup Node JS to make's actually works Angular. So I have two questions in one, how do do to make run Angular 4 without Node JS? Are all our perf issues comming from that (Node JS on apache?) or is it my code who's make run the apps very slow? For exemple, when I check the access log servor from apache using cat /dev/null >access_log I see like 30 requests just to run the first page...how could I optimise that?
See my plunker link here (not all the code is here but he give you an idea of the construction) [Mypluker][1]
[1]: http://plnkr.co/edit/4CUPwqehwkiHNnFd1NtU?p=catalogue

The quickstart seed from angular.io ils not expected to be used for production. It's just an example of how you can quickly start developement.
For instance the quickstart do typescript transpilation inside the browser. You should avoid this kind of things.
One of the easiest solution for dev and production build is to use angular-cli.
With a production build you don't need nodejs only a webserver that can serve static files.

Related

Vue Multi-Page-Application not working in production

I am trying to implement a MPA with Vue.js and the pages configuration option it offers. Like so:
This works perfectly when I run my dev server with npm run serve and then try to go to localhost:8080/home and localhost:8080/about. When I try to build this for production with npm run build and I try to go to their respective URL's it does not work and only serves me back the index. This seems officially supported by the Vue Documentation but I can't figure out why this isn't working?
My dist folder looks something like this
Does anybody know what's going on here that's more knowledgeable in Vue.js?

Nuxt deployment and IE 11

I am heading toward my first Nuxt deployment, of a large internal application. And I’d like to support IE 11, at least for a while. But when I generate the deployment files and attempt to access a staging site with IE, I immediately receive a syntax error from one of the generated js files.
Here’s a start at specifics:
Vue 2.6.12
Nuxt 2.14.6
Vuetify 2.3.2
Nuxt plugins for axios, auth, and a few other plugins.
The application is deployed to IIS, using nuxt generate and copying the dist directory to the server. I have tried using the generate command with and without the modern -m flag. There is no possibility of deploying other than through IIS (client specification), and I’d prefer not to have to run Node there, since the static deployment should work.
I am developing on a Mac and thus have no practical way to run and access the dev version by IE.
The application works properly on modern browsers, but throws an immediate syntax error in IE.
My understanding was that an IE-compatible version would be transpiled during the generate process, but evidently I’ve missed something.
As I say, this is my first Vue/Nuxt deployment, so any advice would be appreciated. I’ll be happy to provide any further specifics.
Thanks in advance for any suggestions on what/how to troubleshoot this.
Please follow these steps
Check if the syntax error is caused due to any dependency. I ran into syntax error when using vue-calendar plugin. This plugin has problem with IE11
Try adding pollyfill.io into your application. Inside your nuxt.config.js try adding inside head
script: [{ src: 'https://cdn.polyfill.io/v2/polyfill.min.js' }]
If adding to nuxt.config.js doesn't work , try using the code into your app.html file

Vue app not working with production build but works well with development

I am making an application and what I found is, my web app is working fine when I am using https://vuejs.org/js/vue.js (Development Version) but not working with https://vuejs.org/js/vue.min.js (Production Version).
Error:
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
How Can I get this issue resolved?
You got this error since you have not set production mode for your project. I guess this is first time you build webapp.
Assume that you are using node + vue + npm.
Here is solution:
you should have something like config folder to have dev.js and production.js for example.
then you will pick what file u will using base on process.env.NODE_ENV. NODE_ENV is a variable that u pass on your script at package.json or your terminal.
In production.js you have to set mode: 'production'
Whenever use deploy by CI(pipeline) or manually. You should run the script maybe like this build:production: node YOUR_CUSTOM_SCRIPT NODE_ENV=production
note: YOUR_CUSTOM_SCRIPT maybe webpack or any script that you need to build your app.
Ref: Production mode in vuejs

NGINX vs. Apache? What to choose when deploying react

I am new to reactjs. I created a basic react app using create-react-app boilerplate. I prepared the build by running the command npm run build.
Now I want to host the build folder. Which is better and why.
Please let me know if any better and easy option available as I am new to this.
Whatever is available to you will do just fine. When you run npm run build static it will create static files that you are able to host from whatever web-server you want. If you are curious about performance numbers, they are negligibly different in this case. Just choose whatever platform you feel most comfortable with.

Steps to get angular 2 universal starter to deploy to an external server host (Google Cloud, Azure, etc)?

I cloned universal-starter (webpack version) and have it up and running on my local machine using npm start and npm run watch per the instructions
Now stuck after npm run build and attempting to deploy to Azure (and Google Cloud) via the github integration - can't figure out how to set up either to work.
Anyone have a recipe on how to get the webpack bundled files to fire up on an external host with express.js? Do I need to run commands via a CI integration? The files in /dist don't seem to stand on their own.
At Netlify you can connect your git repo and tell them what build commands you want them to use. If you specify the "dist" directory, then they will deploy anything that gets in there (after they have compiled your application).
Edit: the lowest tier is free.
Edit2: I am not associated with Netlify. I just used them in my latest deploy, and found the process extremely easy.
Note: This has changed dramatically since Angular 2. While I'm now moved on to SSR, docker, and all kinds of other things, the simplest answer was to
1) Production build
ng build --prod
2) Transfer files to a static web host (i.e., I used awscli to connect to a s3 bucket when it was just a static site...I know use SSR so I need to use a node server like express)
3) Serve files (there are some complexities for redirect requirements for index.html for error and for 404...and of course setting the status for both redirects to 200)
4) Put something on the frontend for performance/ ssl/ etc. nginx or a CDN would make sense.