I am trying to add server side rendering with separate root html files to my angular-meteor project. But, as server side rendering is not possible in angular and iron router/flow router which supports server side rendering does not play with angular but with blaze.
Please help
How can I can implement server side routing and angular ui-routing ?
Iron-Router does server and client side routing, however Flow-Router does not.
It is recommended to use Picker for server-side rendering with Flow-Router, and it's basically like an Express router, so it should work fine wit Angular-Router
meteor add meteorhacks:picker
https://atmospherejs.com/meteorhacks/picker
https://github.com/meteorhacks/picker/
It supports middleware too.
Good luck
Related
I have an app written in reactjs running on firebase which is completely rendered on client side. The problem is Search engines and SEO.
App's pages are dynamically rendered based on variables in url path.
I am thinking to enable SSR - according to some articles I need to use express server or nextjs server. Also thinking that some data can be loaded from external api before server rendering and some data can be loaded on client side. Is this possible?
Is this good approach? How would you solve this problem without using third party components such as prerender.io?
App was created by using npx create-react-app my-app
Thanks for advices.
As I'm using angular route for my SPA, my view page source is empty (only ng-view exists). I see a website developed by react , has the similar functionality. But when I see the page source, content is there. (ex for angular, ex for react)
How is it possible in react ? And why not in angular? Any idea?
Edit: As crawlers like google, supports SPA crawling since a few years ago, Is it really necessary to use server side rendering?
Server side rendering might not be implemented in angular project which you are looking at, that's why you are not able to see the rendered html. React and angular2 has the feature of server side rendering, which means you can render html from your script on server and send that html to client.
You can see only in page sources ng-views because it doesn't execute JS what is needed to render another elements in your SPA. React can be rendered on server side and gives rendered HTML to your browser while Angular is rendered only in your browser
We have an Angular 1.3 based webapp and would like to migrate it to React + Redux. What would be the best course of action, where we can have the Homepage as React, and the remaining as Angular, and slowly move one page at a time to React.
My major doubts are with respect to routes. Which framework should handle the routes?
Are there any other things that I should be worried about?
Alas, maybe my question was too open ended or was not worthy of an interest from any.
Was forced to use a reverse proxy setup with express (served on
localhost://3000) with cors being enabled.
Few routes (/, /page1) redirecting to a http-server serving the React app on port 3001.
And the remaining routes (/cart, /somethingElse) redirecting to a http-server serving the Angular app on port 3002.
This was just a dev setup.
In prod setup, the pages are being served by Akamai and hence was beyond the scope of the question.
I've written an article describing how we went about this in BigPanda - https://medium.com/bigpanda-engineering/gradually-migrating-from-angularjs-to-react-redux-a4a16585d3ff.
The gist is keeping the app wrapper in AngularJS, gradually replacing AngularJS components with React ones, and then at some point in the future when all components are converted, removing the surrounding AngularJS code and replacing it with React as well.
I'm struggling about Angular and Express Routing (by the way, i'm somehow new to Express), i've been handling routes with Angular — with ui-router — but now that i'm starting to build a MEAN.js Application i notice that i can handle server-side routing and client-side routing... and that's what makes me get confused, here are some of my questions:
How are they different?
If i switch to Express routing will i still have a SPA?
Can i use both at same time? How? Is it good practice? Does it has any benefit?
When should i use only one of them?
How will i handle route parameters?
etc...
If someone can explain with detail these questions, and other extra things people need to know i'll be totally thankful.
Also, something that i want to know is: Do i only have to setup server things in Express or do i need to code in Node?
Routing in Express is sightly different then what it is in angular
In express
Routing refers to the definition of end points (URIs) to an
application and how it responds to client requests.
So if you are doing the routing using angularjs then you do not need to set the route for your html template using express.
you simply use express in a way to create your RESTAPI and then consume those API using angularjs $http or $resource
Summary:
Routing in Angular supports the idea behind a SPA. Ultimately you want to handle UI based route changes (i.e. no server call/logic needed) via Angular. Any route change that hits the backend, and ultimately requires server logic, should use Express routing.
Example
This is express routing to create rest API.
app = express();
app.get('/dowork',function(res,req){
console.log(req.params.msg);
/... code to do your work .../
});
now in angularjs call do work
$http.get('http://localhost:8080/dowork',{"msg":"hi"}).success(function(data){
console.log(data);
});
Just two cents here. Other expert should correct me and explain further :
Routing at frontend usually means routing management in url after #.
This is because anything after # is ignored by browser. So this is utilized by angular to make on the fly ajax calls and fetch resources depending on route path after #.
What express handles is url before #. This is used to make actual request from browser to server.
How are they different : answered
If i switch to Express routing will i still have a SPA :
You can always have SPA if you manage urls manually at front end side while making ajax calls to populate your single page. managing urls at front end should be with intention of readability.
Can i use both at same time? How? :
Everyone uses both. A SPA also uses both. Usually authentication based thing is handled by express routing while authorization and other routing based interaction like requesting for resources and others, front end routing is used. Even if you use front end routing, for ajax request behind the scene, you are still relying on express's routing.
Is it good practice? Does it has any benefit? :
Using express's routing for authentication and providing resources AND using angular routing for front end to keep SPA in action is always a good practice.
When should i use only one of them? : answered
How will i handle route parameters? :
There are parameters handling both for front end side using route params ( if using ng-route) and at the back end using slug, bodyparser and others.
You need to spare some time learning those.
Can we use both
of-course you can use both. Depending on your application requirement, what portion of your app need to be spa for better user experience and what portion views need to be render by your express app.
If i switch to Express routing will i still have a SPA?
if a particular routing is not handled by angular and you want to generate a view by express app you can do that. if you want to develop a complete spa then you need to develop a api (http end points) in you express app to respond to AJAX requests of your angular app. Angular routing is all bout clint side routing that is used to generate template and fetch data from server (in your case express) and render a view. Over all your angular routing calls to your express routing to fetch json data or any template to give the impression of a spa
example
in express we have
app.get("/", function (req, res) {
res.render("home");
});
you home page must include all the angular script files to initialize the angular app
in clint side code you can have
var app = angular.module("myApp", ["ui.router"])
.config(function ($stateProvider, ) {
$stateProvider.state("home", {
url: "/"
})
.state("manas", {
url: "/manas",
templateUrl: "/templates/manas.html"
// when the state or url is manas its fetch the static manas.html from server and inject that to ui view
})
// i am using angular UI router here
Can i use both at same time? How? Is it good practice? Does it has any benefit?
Ya we can use both at same time. It depends on your application logic their is no harm or benefit of using both.
When should i use only one of them?
Go with express routing only if you are more concerned about search engine optimization. Because SPA are not by-default search engine friendly you need to take some extra action to make it search engine friendly.
How will i handle route parameters?
it depends on what angular routing you are using. I mean vanilla angular routing or UI routing. But the concept is same for both
passing parameters
For passing parameters to server with UI routing go through
https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters
for UI routing follow this link
https://github.com/angular-ui/ui-router/wiki
if you app is not more complex you don't care about nested views child views etc
my suggetion go with angular plain routing.
No doubt UI router gives more advance routing concepts but learning curve is steep as well. if you app is simple in nature go with angular routing
I am developing a new webapp in which we are primarily using JSP to generate static UI components. The Angular routing is bound to JSP instead of html templates.
A quick search in Google always discourages using Angular with server side MVCs, but I havent been able to find a convincing reason enough on why we should not do it. Can someone explain , what is the issue with using server side MVC with client side MVC.
Why should you repeat a task in server and client side? like maintaining the state of the application..
I could thing of a case where jsp(any template engine) with angular will be helpful,
where you want to localize your text intensive application.
You can localize angular templates in the server side, let it take a page refresh.