CODEWITHSUNDEEP
angularjsmodel-view-controllercdn
IWriteApps
IWriteApps

Reputation: 993

How can I leverage CDN with my AngularJS app on ASP.NET MVC?

I have an MVC project which really just serves an angular application. This will be a public application and I expect it to get a lot of traffic, so I'm trying to use a CDN to keep requests to my servers light.

I've found many articles on how to get angular itself from a CDN but what I'm looking for is for MY file (css, html, js, media) to get served from a CDN. So for example, if I have a directive, then the template would need to be served from a CDN, but I can't hard-code it because the template may not have been uploaded to the test or prod environments yet.

Update: The MVC application only serves the initial layout and home pages. Once my angular script loads MVC isn't really used anymore. The back-end is a separate Web API application.

Upvotes: 1

Views: 729

Answers (2)

armyofda12mnkeys
armyofda12mnkeys

Reputation: 3442

I was trying to think of a good solution to this recently... In local testing (grunt serve), i use the current non-minified .js/.css file, but when creating a build (grunt build), Id want to point those files to the CDN in my Angular project. I'm thinking for your grunt(gulp/webpack/etc) build (which creates the minified local files for the build), you could make a task to prepend certain urls/files to your CDN via https://github.com/callumlocke/grunt-cdnify or https://github.com/tactivos/grunt-cdn (but it would still use your non-minified files for grunt serve).

It would be cool if uploading to CDN and invalidating the files was a grunt/gulp/webpack plugin. Then you could automate it as part of your prod builds. Guessing your build system like Jenkins/etc would upload your app to wherever. and then either with a grunt/gulp plugin like so could invalidate your files: https://github.com/keycdn/grunt-keycdn if you use that CDN service. I am guessing your build system like Jenkins could also do this work for you via its own CDN upload/invalidation plugins.

I know this answer is mentioning grunt specifically, but there should be similar plugins for gulp/webpack/etc as well.

Upvotes: 0

nbering
nbering

Reputation: 2800

You might be asking the wrong question, but you're on the right track for how to optimize for high traffic.

First, learn how to serve the angular application as static files. On a past project I worked on I had two projects in my visual studio solution, one was a Web API back-end, and the other was a web project that just served static content. You can configure Visual Studio to run both projects at the same time on different ports from localhost. This doesn't answer your question, but setting up dev like this will get you a step closer.

Next, once you know your project's front-end and back-end are decoupled from the server level, make sure you're not going to get an CORS issues from cross-domain requests. If you're going to be serving your back-end from a subdomain, CORS may be an issue. Look into that, you'll probably need to add some code to your MVC app to solve that problem.

Now that you've got all that figured out, find out how to use a CDN service. There are many offerings with specifics of how to deploy content and SSL certificates varying for each. Amazon Web Services, Microsoft Azure, and many others offer CDN services, but before you even look at that stuff, make sure you can actually serve your back-end from a different port on your dev machine and it still works.

Upvotes: 1

Related Questions