I have to include a React application inside a dotnet MVC project. I have a simple React application that only contains a KendoUI grid.
I did a build of the React application and uploaded it as a static website using Azure Storage Account.
I then created an Azure CDN that points to the static React application
Here is what I need to do:
I have the following code (ASP.net MVC):
The commented div is the div that contains the old grid (the one to be replaced with the static React application).
I would like to add the static React application in the test div (the one with the id "scheduleSitesGrid2")
I configured my static React app to look for that exact same div (here is the index.tsx):
That being said, is there a way I can easily include that react application in the MVC app using Azure CDN? I could not find any other question regarding adding a React app to MVC using CDN.
I tried to include the CDN in a script tag, but that did not work. I am also wondering that since the React app is hosted as a static site, it is already built, so I might not be able to add it in the MVC div (since it is already inserted into the index.html file of the React app as shown in the following picture). I would then need to upload all the app to Azure besides the index.html. Am I right?
Thank you very much!
Peace!
If I understand correctly you have an MVC Web App hosted using some App Service Plan, and a React application which has no server side code execution just Javascript?
If that's correct then you will certainly be serving content from two separate domains: One for your Web App, presented via CDN; and one for the storage account, hosting the static content, which is only presented via the storage account URI.
The both can indeed be presented via a single CDN endpoint, but you would need to use the premium tier and make use of URL rewrite rules. You would have your default route configured to that of your Web App URI, then you would configure a rewrite rule to, for example, rewrite (translate) "/static/..." to "https://{{yourstaticstorage}}.storage.azure.com/yourstaticpath/...".
Verizon Premium rewrite is documented here: https://learn.microsoft.com/en-us/azure/cdn/cdn-verizon-premium-rules-engine-reference-features#url-rewrite
If you don't want to use Verizon Premium, you could also take a look at Azure Front Door.
https://azure.microsoft.com/en-gb/services/frontdoor/
Essentially, Front Door is CDN on steroids. It has built in WAF and allows you to configure routing rules. Do compare the pricing before going this route as I'm fairly sure you have to pay for each routing rule.
You could also pull the static content in code before delivering it but this wouldn't be cached on the CDN since every dynamic page visited would require execution. You're better off creating a routing rule and using relative paths to the static content which are retrieved and cached by the CDN / Front Door.
Related
As far as I understand that, there are two major options for Vue and .NET Core integration within single MVC/Razor project.
Option 1.
MVC/Razor-rendered non-reactive page is used for authentication with built-in ASP.NET Identity. Vue is not involved for authentication/authorization at all. As soon as users are authenticated, they are redirected to another MVC/Razor page that is used as a HTML template for Vue. It’s possible to combine MVC/Razor rendering and Vue. For example, user name on the top of the page can be rendered by MVC but button actions and data tables will be further processed by Vue. It’s possible to use many pages (so it will be MPA, not SPA), it comes naturally. Using *.vue files is not possible. MVC routing seems to be primary routing option (not sure, would be possible to combine with Vue routing and whether any needs for that). Vue JS files can reside anywhere in the project, for example, can be bound to the HTML pages similarly as CS files in Razor pages do (and it’s nice). Then, all these JS files along with Vue itself can be bundled to the wwwroot by Webpack. Vue CLI is not available but seems there is no need for that.
Option 2.
MVC/Razor is not used for rendering user pages at all. Authentication occurs by third-party solutions like IdentityServer and with Vue-managed pages. .NET Core is used exclusively as a WebAPI for Vue and to hold a project. Vue part is totally independent from the MVC/Razor part, they even render pages to the different HTTP ports so proxy is needed to convert Vue HTTP port to the MVC/Razor HTTP port to make Vue works in the single project. We can use either Microsoft.AspNetCore.SpaServices.Extensions or NuGet third-party VueCliMiddleware for that. All Vue files typically reside within a ClientApp folder and then are building to the wwwroot folder. Using *.vue files is possible. Vue CLI is available and recommended to scaffold new application to the ClientApp folder (but further CLI seems is not needed). Vue router seems to be the only option for routing. SPA seems to be the primary choice as a structure (not sure, whether MPA is readily available option). Webpack is still used for building Vue app from the ClientApp to the wwwroot.
I started mu Vue journey with Option 1 even without webpack and npm, just with CDN tag on the one of the Razor pages and it works very well. For me Option 1 seems less complex while more flexible. My primary concern is that Microsoft uses Option 2 as a built-in templates for Angular and React in Visual Studio, so I probably is missing something and soon I will be pushed to rewrite my app to the Option 2.
What you guys think which option is better and whether my understanding explained above, is correct?
I have a React application and I want to reuse its compiled code into a dotnet MVC app. Here is what I am trying to accomplish:
I want to build a bundle.js from the React application
I want to publish that bundle.js into Azure CDN to be able to include this CDN in a web app and reuse the bundle.js
I am able to create the bundle. I just could not find any information about how to store that bundle into Azure CDN.
I was wondering if anyone did the same thing and could teach me how to do it.
Many thanks!
Okay first you need somewhere to host bundle.js. CDN is designed to cache content as opposed to actually hosting it.
You have numerous hosting options. You could include the bundle as part of your MVC app, as static content and have the CDN present your entire site, or you could use the Static Website and/or CDN features of an Azure Storage Account. Just two options there. See the following docs for more info on static website hosting:
https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website
I have a site which uses microsoft mvc 3 on the server side, jQuery Mobile on the client side and I want to combine it with PhoneGap and produce executes for Android and iOS.
Is it possible?
How?
Thanks
Yes, it is possible.
If you must use Phonegap, there are a couple of things to do:
First, you must create a project corresponding to each platform , following these instructions. Once you do that, you basically copy all the client side code (js, html, css) to the www folder of your project. This is one of the reasons, the app could load faster, since it's reading its resources from the local filesystem, and not receiving them from an http connection each time.
Second, you must find a way to provide your server side data to your app. If you are already using REST services or RPC methods to populate your website, then that's done, but if not, you must start by building them, and then calling them from your client (through ajax calls from jQUery most likely), and then rendering them through javascript (you can use the multiple templating libraries out there or just plain javascript, I recommend the latter only if the UI updates are minimal).
As you can see, the second part requires quite a little bit more work. Especially if you haven't built web services before.
The other option ,which does not require phonega/cordova is to use an embedded webview. Then you wouldn't have to do anything. It would work similarly to a browser (Loading the remote URL of your site), with the added advantage of being inside and android/ios app, and you could add other views or communicate with the embedded webview using native code. If you are planning to load html files from the filesystem and not from your server, you would have to do the same thing you have to do with phonegap.
It happened to me, if you have a web app depending on server code I would go with a WebView based app, and not a Cordova app.
It's really simple to create those webviews apps for Android or IPhone.
Here you have an example for building a webview based app on android
Here you have an example for building a webview based app on IOS
Hope it helps.
If you want to reuse your site you'll need a webview that browses it.
Phonegap wouldn't be needed if you use this approach, but the application will not be as responsive as a native app, and the IPhone moderators may reject your app for that reason (it happened to me).
Another approach would be that you recreate your site as a pure Javascript application and only communicate with your servers to execute some REST Services. In this case Apache Cordova makes sense.
I am deploying a Web app consisting of both a static (marketing) site and dynamic app.
My goals are:
Separate dynamic and static content. Updating the static site should not take a code redeploy; updating the app shouldn't touch the static site.
Making it appear that it all lives at the same URL e.g. www.mysite.com
Think how Twitter works: http://twitter.com/privacy goes to a static page controlled by legal/marketing, while http://twitter.com/ goes to your feed.
I see a few options, could use some help:
Appliance: route based on URL like NetScaler / F5. Way too expensive, and doesn't play well in cloud deployments (Heroku/Jitsu/AWS/etc)
Proxy: static site deployed to a different URL (e.g. web.mysite.com), and dynamic site knows special paths and retrieves and caches the data. It works, but is complex and messy.
CORS: All static served from static site www.mysite.com, but loads application templates, JS, CSS, etc. from alternate api.mydata.com, and dynamic data via REST using CORS.
3 sounds nice, but worried about CORS browser support and still get some pollution across static and dynamic sites.
FWIW, implementing dynamic in nodejs, but could just as easily apply to RoR or even JavaEE.
If you don't mind putting your static content in a specific subdirectory (like twitter's /privacy), then I think all you need to do is add that directory to your .gitignore (or other VCS ignore file), and deploy your app without that subdirectory. You'll need some other process to upload changes to the static content.
As for serving it, you should have a front end webserver (apache or ningx probably) or other proxy server serving all your static content anyway, including images and js/css from the dynamic part of your app. If your static site is .html etc anyway, then it should get served the same way, without touching your running application at all. You could also be more explicit in the web or proxy server configuration that it should serve everything in that subdirectory without forwarding the request to your application.
I need to create a few urls which for my gwt application. e.g currently login screen is
http://127.0.0.1:8888/abc.html?gwt.codesvr=127.0.0.1:9997
http://example.com/abc.html?gwt.codesvr=127.0.0.1:9997
i want to change it to
http://127.0.0.1:8888/accounts
http://example.com/accounts
so when user directly open this link
I have developed this applicatoin in gwt with jdbc
looking forward to your reply
I suggest you take a look at how GWT handles History. You can save states of your application by using History tokens(For ex: ../modulename#user1, ../modulename#user2) and by parsing these tokens you can direct your user to appropriate section of your application. Since GWT applications run on a single html page I beleive this would be the correct approach to implement your functionality. Last but not least these states are bookmarkable and supports browsers back button as well.
By the way about changing the Url, ?gwt.codesvr=127.0.0.1:9997 is added to the url in development mode and will not appear in production mode when you compile deploy your application.
Just create a subfolder named accounts and move the index.html file there. The webserver should not automatically serve the index.html file, when someone requests to see the folder.
You can create the history and add the token in them:
private static final String abc = "account";
History.newItem(abc ,true);