I am developing an app with an AngularJS front end and a Laravel API backend. The Laravel backend just listens for requests, process them and returns an answer. Front and back end are different independent apps... so far. I did it in such a way in order to be able to develop a mobile app later on which could consume the API. Im using also JWT to authenticate users, so Im not using Laravel's sessions at all. At this point I only require a webapp. I built a webapp which uses angular ui-router.
So far so good. The front end and the back end work well. However some of the front end views will be public and require share buttons, they also require to be indexable by Google.
I've read there are some alternatives.
Make some hack using the apache mod_rewrite in order to serve the angular app for people and a static version of it served directly by the backend. I think this would not be very difficult using Laravel.
Using Prerender.js. Which as far as Im concerned does pretty much the same job than option 1 but in a more complete manner.
However I am thinking about using a third alternative. Given that I only require the webapp now and the API is working I am thinking about using Laravel's built-in webapp functionality. I can use the controllers, directives and factories from angular and let Laravel handle the webapp routing.
An advantage of this is that I can render the meta tags using Blade (this fixes completely the SEO issues) and serve the rest of the contents using angular and the API.
Do anyone of you can see drawacks of such a solution or do you know a better way to accomplish SEO purposes using angular and Laravel?
Render Site :
You will have to render the pages from server side if you want to make it SEO friendly. But yes, what if you serve the server rendered pages to bots only. And for real users client side rendering will work.
Read about the Rendertron which will detect the user agent and accordingly serve the html.
Meta Tags :
Use Sluggable and replace id with slug in urls. You can follow https://oodavid.com/article/angularjs-meta-tags-management/
Related
I am trying to integrate Angular with Django. I have 2 approaches which one is the best way:
Build a separate angular app and serve it's static files to django to render. In this way the routing and rendering everything will be handled by Angular.
Or to build templates in django using Angular directly and use MVT architecture of Django only.
Which is the correct way from architecture point of view? If not these two please suggest any good approach.
I'm not using AngularJS (actually I'm using VueJS but it's kinda the same) but here is what is usually done :
You do your models as usual, using Django. It defines your database structure.
You build an API that exposes your datas. For that you can use DRF (Django Rest Framework) for a REST API or graphene-django to build a GraphQL API)
You code components to build pages. And you retrieve your datas to display from the API.
For my project, I personnally use :
Django
graphene-django for a GraphQL API
Apollo Client to fetch data from the GraphQL API
VueJS for the frontend components
There are lots of tutorials on how to combine all of these so I guess there are some for AngularJS too.
You should be able to do something similar with AngularJS.
Finally, it is more like the first approach that you described. You'll have some build step that will create a bundle of files with a index.html or similar. The thing to do is to tell Django : "Hey, for any URL, point to that file".
Note that the thing I'm describing is for building a SPA (Single Page Application).
Currently I have an application built with Angular 2 (all the front-end side) and Symfony 3 (web framework) . I have defined each view as an Angular application.
I think it's the time to migrate to a Single App but I have some questions before I venture into the lion's den.
If a user change manually the URL, of course, they, should enter to the requested URL, but how can angular know which url is trying to open?
I should create multiple controllers or only one that catch all the requests?
If none of above are the right way, please, can you suggest any way to do it?
Thank you so much.
If you're trying to build a Single Page application, it means that your routes will be managed by your front-end, here by Angular 2 via #angular/router.
Symfony can then be only used as a back-end web service (i.e. a Restful API) that will answer to your front-end calls via JSON responses. Depending on the size of your API, you may wish to use FOSRestBundle for that purpose.
So you don't have to worry about Symfony routing interpretation since your urls will be managed by Angular router. Symfony routes will be called directly by your Angular application to get/post/put/delete/patch your back-end data.
UPDATE
To answer you comment, a user who directly enters a URL will simply see the page you linked to this url via Angular routing, there is (almost) no difference between front-end and back-end routing.
If you want to dive deeply in how hash routing works in javascript, you can check this article.
To see a real-life example of a SPA with full Angular routing, ga.me is a good start.
I am new to AngularJS.I have two questions.
Is it possible to use JSP pages instead of HTML in AngularJS.
Is it possible to create a web application using AngularJS without webservices (for fetching data from DB) and use HTTP servlet for that purpose
Is it possible to use JSP pages instead of HTML in AngularJS.
Even if you use JSP the final output will be HTML so you can use JSP in AngularJS but JSP files are mainly used to render the frontend with data that you can do using HTML only in AngularJS.
Is it possible to create a web application using AngularJS without web services (for fetching data from DB) and use HTTP servlet for that purpose
Whether you use plain Servlet or any framework that creates REST APIs, it will be HTTP calls only.
(This is a newbie question which applies equally to all front-end MVVM frameworks. I'll answer it for the general good.)
AngularJS is a front-end framework which runs in the browser. It relies on a server delivering the content (HTML templates, CSS and JS sources) to the browser.
What you use as a server, is entirely up to you. It depends on whether you need server-side dynamic content.
If none is required in that area, you can use a static HTTP server like LightHTTP, or plain old apache, or nginx, or anything else to deliver the AngularJS site to the browser.
But in most you will have some server interaction (i.e. storing / querying stuff in a database, or communication / synchronization with other users, etc). The common approach for that is to deliver HTML/CSS/JS statically and add a bunch of REST interfaces. Flask and Tornado are popular server choices for that, or stuff like spray.IO / akka.http for higher traffic volumes.
In specific cases, you may want to work with pre-rendered HTML templates (usually because you want to dynamically exclude parts of pages for security/user role reasons). Then you need a server-side framework with template rendering. Django, JSP, ASP, pick your favourite.
It seems like you are asking how to use AngularJs in a JavaEE application. And yes it is possible. Only your index.jsp will be in jsp, and all you other views will be in html.
You can then use http requests to fetch data through your servlets.
it can be useful. here are scenarios:
you want to save ram, cpu for mobile phones or machines that doesn't have lots of power. you can partially render page in jsp and keep only minimal in angular.
your team is traditionally jsp heavy and you want to use them and gradually transfer to angular. eg... for i18n rendering jsp seems far better. note that i18n may not add lots of values in angular and you may not want to throw up existing code in jsp.
I have been noticing strong views in stackoverflow and they seem to dismiss everything that doesn't fit in their utopian all new cutting edge. all the angular projects I worked had heavy dose of legacy pages using jsp and it doesn't make sense to rewrite everything from scratch or lay off whole team and start hiring from scratch. and thus, yes, jsp makes sense with angular.
I'm deciding whether it's safe to develop my client-facing app in AngularJS using pushState.
I've read that when using pushState in an AngularJS app, we don't need to worry about Googlebot because it can now execute enough JS to produce an HTML snippet for itself. But then I wonder about Bing, Facebook and other bots and scrapers. The tutorials I've seen for making AngularJS SEO-friendly all deal with apps that use hashbangs (#!). These don't apply to me since I'm not using hashbangs.
Does anyone have insight into this problem? What are some methods for ensuring an AngularJS app that uses pushState is SEO-friendly and Social-scraper-friendly? If you use a service like Seo4Ajax or prerender.io I'd appreciate your thoughts on it.
Note: As I understand it, when developing single page apps in the last couple of years it has been necessary to send HTML snippets to SEO crawlers. This was accomplished by using hashbangs and a meta tag that let Google, Bing and Facebook know that it needed to replace the bang (!) with an _escaped_string when making a request. On the server you'd listed for requests with _escaped_string and deliver the appropriate HTML snippet using a tool to generate HTML snippets like phantomJS.
Now that we have pushState, I don't see how we indicate to javascript-less bots what part of the URL to rewrite with an _escaped_string or even if it's necessary. I'm having trouble finding any information beyond "you're site will be okay with google ;)".
Here are some other SO questions that are similar but have gone unanswered.
Angularjs vs SEO vs pushState
.htaccess for SEO bots crawling single page applications without hashbangs
Here's a solution I posted in that question and am considering for myself in case I want to send HTML snippets to bots. This would be a solution for a Symfony2 backend:
Use prerender or another service to generate static snippets of all your pages. Store them somewhere accessible by your router.
In your Symfony2 routing file, create a route that matches your SPA. I have a test SPA running at localhost.com/ng-test/, so my route would look like this:
# Adding a trailing / to this route breaks it. Not sure why.
# This is also not formatting correctly in StackOverflow. This is yaml.
NgTestReroute:
----path: /ng-test/{one}/{two}/{three}/{four}
----defaults:
--------_controller: DriverSideSiteBundle:NgTest:ngTestReroute
--------'one': null
--------'two': null
--------'three': null
--------'four': null
----methods: [GET]
In your Symfony2 controller, check user-agent to see if it's googlebot or bingbot. You should be able to do this with the code below, and then use this list to target the bots you're interested in (http://www.searchenginedictionary.com/spider-names.shtml)...
if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), "googlebot"))
{
// what to do
}
If your controller finds a match to a bot, send it the HTML snippet. Otherwise, as in the case with my AngularJS app, just send the user to the index page and Angular will correctly do the rest.
Supposedly, Bing also supports pushState. For Facebook, make sure your website takes advantage of Open Graph META tags.
I'm doing some due diligence on backbone for a single page app and wonder if it is possible to re-use the same views/routes from the client on the server side, so that when google visits a pushstate URL, or it is accessed directly, the server can generate the exact same HTML that would be generated by backbone in the client.
It would be a pain to have to maintain two separate sets of views/routes, one on the client and one on the server. I have seen the backnode project on github however this seems to miss the point a bit and you end up having to write the same backbone router twice.
Just wondering how people are generally handling the case when using pushstate urls in backbone and needing to serve the same view from the server? Are people duplicating code or is there a better way?
I haven't tried this yet but these ideas using node.js and backbone might help:
http://andyet.net/blog/2011/feb/15/re-using-backbonejs-models-on-the-server-with-node/
http://bennolan.com/2010/08/13/pushstate-and-nodejs.html
Basically the only way to make it so your not writing the same thing twice is to have both your node.js server and frontend client share the same routing/model code. If you are using something else on the server side (like Ruby) you would have to place node.js in front of your app server. Then make node.js proxy for new clients (push state and client js) and do actually rendering work for old/bot clients.
The other option is doing what jQuery Mobile does which is the Hijax method. The idea to make tons of HTML5 pages (you'll have to look at its routing to see).
And for completeness you should be aware of how google crawls AJAX: http://code.google.com/web/ajaxcrawling/docs/getting-started.html
This project does exactly what you are trying to do. It might interest you to check it out.
https://github.com/developmentseed/bones