We have decided to go with a rails JSON only API server for our new project since different clients need to access it.
I'm thinking about how the frontend could be served to the browser. As I see it I could
EITHER
have a javascript heavy client built on top of a client side MVC like
Backbone that accesses the API server directly
OR
have the frontend server make some of the API calls and render the html to the client. Some APIs would still be accessed from client JS. A lot of the processing and routing logic would reside in the server.
I'm hesitant to go with the first option due to it being more heavy on the client and less SEO friendly. Also making the client an SPA is not a priority.
I'm looking for advice and comments on the second option. Is this approach recommended ? What would be a good choice for the FE server in that case ? I'm thinking of having a separate rails FE server that talks to the rails API server.
Related
I really stucked in MVC + Angular 2 project in the first Step. The problem is, How to connect controllers and actions with Angular 2? Is there any routing needed?
I have done with all setups with Visual Studio 2015 to work with Angular 2. And it successfully works. But i really doing my projects in ASP.NET MVC 5 (Not ASP.NET Core). Here i dont know how the Controllers and Actions work with Angular. How can i route (navigate) to several controllers and actions in my project.
Since MVC consists of several controllers and actions. There will be many views for several actions and for every action there will be a GET(View) and POST(Form Submit) method also.
If anyone work with Angular 2 + ASP.NET MVC let me know how the Controllers and Actions are getting connected.
It looks like you are building your first SPA that communicates with a REST API.
For starters, you should get two things straight:
The ASP.NET MVC is your REST API. It will expose endpoints that can be requested via HTTP calls.
Your Angular 2 is the SPA (Single Page Application), which will make HTTP calls to the REST API you wrote in ASP.NET, and that API will give back responses of whatever you want. You can then use that response data to your liking in your Angular 2 frontend.
That being said, the first step you want to do is make sure you can properly access your API endpoints. Download a tool called Postman and test this with ease.
Ideally, you want to make this API a JSON API, because that will be the easiest thing to work with for your frontend. Plus, it's basically the de facto standard. But as always, use what works best for your use case.
Once your endpoints are working as intended, what you need to do is make some AJAX calls in your frontend that will hit those server endpoints. For Angular 2, you can use the Http package.
You will undoubtedly come across a CORS (Cross Origin Request Sharing) browser error when making the calls to your server. This is basically the browser refusing to send requests to your server until your server explicitly says you are allowed to make requests to it, assuming you are not on the same host and port.
The above was a really brief and limited-detail breakdown of what you need to do. For an example of putting it all together, check out my Angular 2/Golang chat room app. As you will see from this file, I expose some endpoints to allow create/read/update/delete actions for Todo's in my Go server. And the Angular 2 code is in this directory.
One last tip: If you are serving your front end files and exposing your API endpoints all on the same ASP.NET server, as opposed to having one ASP.NET server for the REST API, and one for the serving of UI files, then two things are true:
You need to have a catchall route in the server that will serve your index.html. You can see an example of this in this file. You'll notice a long that starts with r.NoRoute...that is where I say "no route was found so far, therefore serve index.html and let the Angular 2 handle the routing from there".
You no longer need to worry about CORS errors
Hope that helps!
Not actually, you will create and Expose APIs (WEB API) in your MVC project and your Angular 2 will consume those APIs.
or must it be on the same server as the app calling it? I am new to web api so i am going through some tutorials, but they all assume the web api is part of the mvc app. Also, they show the calls to the api being done with javascript, but I want to make the calls in my MVC app controller. Is this possible?
You can host a Web API anywhere.
The only special thing to have into account when the Web API isn't in the same server that a web site that uses it, is that, by default, the Web API doesn't accept requests from a different domain. For example, if the web site is in "server1.com" and the Web API in "server2.com", then the calls to the Web API from the web server will be rejected.
If this is the case, you need to configure the Web API server to enable CORS (cross origin resource sharing), so that it accepts requests from a different domain. If you want more info about this, please look at this document:
Enabling Cross-Origin Requests in ASP.NET Web API 2
The Web Api can live wherever you want it to. Is typical to see a limited API used mostly to handle AJAX for the MVC application live with the MVC application, mostly because it makes it simpler to construct URLs to the endpoints. If you host the Web Api externally, then you'll have to hardcode the API endpoint URLs, as there's no way to use something like Url.Action to generate them automatically, any more. Regardless, it's a perfectly acceptable way to handle things.
You will probably at least want to add the base URL for the Web Api as an app setting in your Web.config, though. That way, you don't end up with hardcoded references to a particular domain strewn all about your app. That makes moving your Web Api to a different domain much easier, especially when talking about going from development to production.
It is also entirely possible to use a Web Api within your actual controller actions. You'll just need to use something like HttpClient to connect to it and issue requests.
I'm developing a web application with an AngularJS frontend and a Rails backend.
My goal is to keep the two entirely separate, since the Rails app will ultimately be relegated to a simple REST server, and the AngularJS frontend will be just one of a few different clients that use the backend. For that reason, I don't want to integrate the frontend into the Rails asset pipeline, or similar.
The Rails app is running locally on port 3000. The frontend uses Gulp to compile static assets, and BrowserSync, which contains a development server that I'm running on port 3001.
For development purposes, how can I get the AngularJS app to talk to the Rails server, avoiding this browser error (which I'd expected) when making HTTP request via Angular's $http service?
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3001' is therefore not allowed access.
Do I just need to set up CORS in the Rails app? Is there another way - maybe some sort of local hosts file trick (I'm on a Mac, FWIW) or similar? I ask because my coworker is responsible for the Rails app (I have limited experience with Rails) but is out of town for a while; my knowledge is mostly limited to the AngularJS stack that I've set up.
I've searched and read up for about an hour, but haven't yet been able to find anything that I can grok that is applicable to my situation. I might not be aware of the best search terms.
Thanks for any help!
Ah, wonderful. Here are a few solutions:
set up CORS, which shouldn't be too hard. All you have to do is add the headers to pages serving your static content (not the rails REST endpoints), The problem with this is you shouldn't really be doing it unless you have a good reason (so see 3). How are you serving the static content? There should be plugins to do the headers for you if it's a popular tool
serve the angularJS pages from the rails backend for now (using some kind of static route)
if you're thinking about production and want to sort this out for good, use nginx to proxy the two services into one single domain, http://nginx.org/en/docs/beginners_guide.html
I have two servers - web and app. The web server (IIS) serves only static files - HTML/CSS/JS. On executing the JS, the client gets the data from the app server (HTTP service using Web API, self hosted with OWIN). I need to bring in authentication so that my data as well as the content is restricted.
I can use SSL, I can pass username / password to the web api, have it authenticated and get back a token. I can pass this token for future web api requests. In my client app javascript (done using AngularJS), I can also maintain info whether the user is authenticated, what roles she has etc. (for user experience). But for security, I need to be able to ensure the html content requested (in the web server) is also having authentication and authorization done. How can I achieve this?
Should I change my app to make the web server call the app server internally rather than from the client? I can use MVC controllers or ASP.NET, but since I was using AngularJS, I thought it is not required, and is kind of a duplicate. Should I ditch pure .html files and move to .cshtml?
How is this done in the Angular + .NET world, when you data comes from a different server than your htmls?
We've been using JSONP with REST type api to do cross domain AJAX calls, but our Angular client code is within .cshtml files in a .NET project. Sounds like the simplest solution is to use the app server internally- I would go with that
I am making a web application, in which i need to scrape the web to get some data. I can't see a way to do this without using the dart:io.HttpConnection which is not imporatble for web apps. What should i do, Can i make a server application and then use it with a client version, or something else?
You would need to build this server side since the browser security model does not allow you to connect to other origins than the one that served your application (unless of cause you can use JSONP or CORS to do the scraping but I doubt that). So you need to create a service on your server that uses HttpClient to do the scraping for you and then call this service from your client using XMLHttpRequest