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
Related
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.
I just published my Aspnetzero solution to my hosting provider site.
I have multiple apps setup on my website. They are located in the example.com/apps/app1 folder structure.
So my aspnetzero site is on example.com/apps/aspnetzeroapp folder.
As I expected, this is breaking all of the URL references (Images, nav menu links etc.) on my published app.
I have updated the appsettings.json files with the URLs as shown below.
"App": {
"WebSiteRootAddress": "https://example.com/apps/aspnetzeroapp/",
"RedirectAllowedExternalWebSites":"https://example.com/apps/aspnetzeroapp/"},
Question: Can someone tell me all the changes, within the aspnetzero template code, that I need to make in order for my app to work given the above folder structure?
Update: I found this thread on the ABP support forum. I am having all the same issues with images and API endpoints. In that thread there is a link to a GIT code repo for a fix that was implemented by the ABP team. I cannot see it as I don't have an active license. Could that solution apply to my issue?
I decided on the easier option. I setup a new domain and deployed my app at root of the new domain. Its all working fine now!
I'm building a JS SDK (Library) and I'm planning on giving the users only a JS loader which in turn should load all the assets from a CDN (so we can deploy new code without asking clients to download new versions of the SDK).
The Assets include all the SDK Code, some CSS files, config files and some graphics.
The Javascript code depends on the config files (which should be loaded prior to using the SDK) and the library load should fail if any of the assets fails (for example, a jpeg can't be downloaded).
Just a note - I can't use an IFrame as I need to interact with the hosting page.
How can I accomplish this? Any best practices?
Thanks
easyXDM is a Javascript library that enables you as a developer to easily work around the limitation set in place by the Same Origin Policy, in turn making it easy to communicate and expose javascript API’s across domain boundaries.
When making a iphone app with Phonegap / Cordova is it possible to attach a web based CMS to it, to pull the data down from, so that a non technical user could update the app ?
Usualy you'd just build them using html, css, jquery/js but i wandered if there was an easier way to update them ?
Rather than a CMS, you should look into static site generators. I use Jekyll for all my PhoneGap apps, including one that has a non-technical user updating the content.
Content pages are set up as markdown files with a yaml header - not quite as user friendly as a full CMS, but still pretty easy to edit.
I have jekyll set up as a build step, so all the generated html files get packaged and deployed to the device as part of a single click build process.
You could export static html from a web based CMS, but that will likely be more trouble than it is worth by the time you debug all the bits that were designed to work online only.
Loading the pages directly from the web will work just fine technically, but runs into several of the app store rules - no significant added functionality, no offline access and possibly downloading executable code.
You could use a normal cms on a server like a webpage so normal joomla wordpress etc.
Then you add the url to the phonegap whitelist and load it like the normal phonegap html url.
With DrupalGap, it is possible to create iOS (and Android, etc) mobile applications using PhoneGap and a Drupal powered website.
What is Drupal?
Drupal is an open source content management platform powering millions
of websites and applications. It’s built, used, and supported by an
active and diverse community of people around the world.
Why Drupal?
Use Drupal to build everything from personal blogs to enterprise
applications. Thousands of add-on modules and designs let you build
any site you can imagine.
What is DrupalGap?
DrupalGap is an open source mobile application development kit for
Drupal websites. It uses Drupal, PhoneGap, jQuery Mobile and jDrupal.
With the DrupalGap Mobile Application Development Kit and API,
developers can create custom multi-platform mobile applications that
communicate with their Drupal websites.
Helpful Links
DrupalGap Getting Started Guide
DrupalGap SDK on GitHub
I've created a basic website using the Orchard CMS, and attempted to deploy it to my shared host, Softsys, using Web Matrix (via FTP). Currently, the site technically "works", however it looks like all styling has been removed (even from the dashboard).
Is there a step or files that I missed while deploying the site? I know "Web Deploy" is probably the preferred method of deploying, but I'm pretty new to this, and was not sure what the login specifics were, or how to obtain them for web deploy.
Here is a screenshot of what the site currently looks like deployed:
Edit: it turns out that the problem was on my host's side, for some reason the virtual directory was not being created properly - I still am curious what the proper/best practice method to deploying is however.
It looks like you have no theme applied. Check whether you have your theme existing in ~/Themes folder and properly enabled in the admin Dashboard. Maybe the /Themes folder content hasn't been copied?
UPDATE
If your hosting provider allows the option to deploy sites via WebDeploy - that would be the best one.
The easiest and most straightforward way to deploy Orchard site is to:
Have the ASP.NET application properly configured in IIS and accessible. If you use hosting - provider does that for you. If you'd have a dedicated server - you have to set up an application yourself.
Grab the deployment package from Codeplex, or build one from the sources.
Copy the whole package to your site's root (via FTP or WebDeploy).
Run it and proceed with the setup.
Basically - these are the same steps as for every "ordinary" ASP.NET application.
You probably need to set IIS user to have write access to some of the folders: Themes, Media and App_Data.