Website not updating content and files deployed on AWS - angularjs

I have an angularjs website Hosted at AWS Elastic Beanstalk. Earlier website had a HTML smart table grid. which we later replaced it with simple table with ng-repeat. For pagination dirpagination.js is used.
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
Everything works fine locally. But when deployed on AWS environment content doesn't get updated . sometimes Network tab (browser) shows dirpagination cannot be found, while sometimes it loads.
Any help would be grateful.

Related

Why did Hosting with firebase make my page go blank?

I tried hosting my page with firebase so I can make use of the authentication product, but after I hosted it, the page didn't open on my local server anymore.
NB: I created a react app
I followed the normal procedure for firebase hosting and I expected to get a link where my webpage was hosted, but stil be able to run it on my local server. Instead, when I ran npm start, my browser showed the following window:
Note that hosting it is a part of my building simce I needed to use the authentication product.
Then, I tried removing everything firebase related yo start afresh, even uninstalling firebase, but I got the same thing.
Next, I tried creating another project and pasting everything in my app.js and index.css there, so I can start afresh, and, the styles worked since the background colour of the webpage changed, but, no content was shown. The page was blank as shown below

Why localhost React application different compared with production version hosted on CloudFront?

I have a React application deployed on CloudFront. Today after checking functionalities on my application, I saw some different compare with localhost.
For example:
Localhost: Displayed a loading after submitting form
Production: Loading don't display after form submitted
I think can missing a js or css resources.
The problem is just happening today, before is not.
Thanks in advance!

How to check SEO meta tags in dev mode?

I have reactjs application with express server. I want to have my application as SEO friendly. I am using react-helmet to add SEO meta tags. How can I check SEO meta tags in dev mode?
You can launch an Ngrok session on your dev server port.
ngrok http 3000
Ngrok will give you an URL and you'll have to put this URL in https://metatags.io
If you are using react client side rendering. You should be able to see them in chrome dev tool.
(If you don't know how to open dev tool in chrome browser then just right click anywhere in the page and click inspect elements and go to elements panel.)
Remember react client side rendering will execute only when your bundle is fully downloaded on users browser.
Google now executes javascript too when indexing pages. If all that matters to you is google search engine then you are good.
you can go to google search console to debug how google sees your site if its deployed out there for public to access
But if you want to be sure that your web pages are understood by all search engines like bing,duckduckgo,baidu (which may or may not execute javascript) then you either need to do prerendering of all pages using some sort of tool like react-static / prerender or start rendering your webpages on server side and serve the html directly.
find all meta details below mentioned ways
using view source
in browser inspect element
https://checkseo.io

Angular FullStack Two instances same project

I use the angular-fullstack/generator-angular-fullstack for my project and for testing purpose I would like to run my project on two different browser windows.
The problem is that I got the same input for each text field on both browsers simultaneously.
For example:
On the login page, if I type my email address on one browser it will appear on the login email field in the other browser.
Any ideas of what I'm doing wrong?
Your project uses browserSync.
When your project is opened using localhost:3000, you should browse to localhost:3001 that will give you a BrowserSync configuration page.
Under Sync Options on that page you can disbable what to sync.

Azure Mobile App and AngularJS responsive in same host space

Is it possible to get ride of "This mobile app is up and running" page and when user enters the sitename redirect/route him to sitename/app folder where I can pretty much create a AngularJS website in my project folder. FYI - I'm a Dev beginner
using Custom site URL in Azure: I tried this and working pretty like,
when I open the site (www.testsite.com) it's taking me to blue screen
when I go to (www.testsite.com/app) it displays my AngularJS app that I am trying deploy along with and in same mobile app serivce
REST API services and details under www.testsite.com/swagger
why I am trying this ?
On a typical note I want my app to serve all devices, web, mobile, tablet and I feel that mobile app solution is the only lean solution to do rapid application development but wondering how to reach web users without creating an other Web App services in Azure only for Views or web client which comes with cost. let us say if mobile service is just a backend stack and it doesn't allow it... I wonder why not ? by doing it, developers don't need to create 2 services in azure (1. mobile app, 2. web app)
Appreciate it.
found work around by adding MVC Razor Home controller and view for home landing page. more information in this link. this may be a temp solution to get ride of Blue screen and I am going to explore more in include AngularJS site and routing from angular too.
Since this solution works with only MVC style routing there will be a conflict between routing mechanics. will update as soon as I get something.
https://social.msdn.microsoft.com/Forums/azure/en-US/f23175db-2a83-489f-ac0c-f2abe9e48a76/default-document-for-the-mobile-app?forum=azuremobile
If Home view not showing up refer this link.
The view 'Index' or its master was not found

Resources