What is the preferred way to go for creating a multi-tenant application with angular 4 (or above) as frontend?
I want tenant-specific content to be served via an API (like the stylesheet or a tenant-specific header/navigation) and store it in a database.
Currently, I use aspnetzero but I am stuck with the custom stylesheet. The Css is available at an Url from the backend (aspnetzero) and I get this Url from my abp session. But how do I link this css file without getting FOUC (flash of unstyled content)? Currently, I just use the link tag and set href to an angular-component variable that stores the url to my css file (it is set in ngOnInit). But then i get FOUC.
Maybe my whole architecture is wrong in my attempt. I am definitely open to entirely different approaches!
Related
I'm trying to integrate a vue.js application into a typo3 page.
I have a full functional TYPO3 instance where I can create own pages, edit the content and more. Now I want to add an existing vue.js application within this page.
Therefore I created an extension which added all necessary resources (js, css) and added an own content type which controls the integrations and configurations. The content type outputs a vue.js entry point. So far everything works. Smaller vue.js applications works as they should.
Now comes the challenge: When I want to create a more complex application which relies on the router functionality, I run into a problem.
Let's assume, I integrate my application into the page /shop and my application tries to render a product under /shop/product/some-id. This doesn't work. The URL processing is done by TYPO3 (as designed).
I tried to find a solution within the documentation but I'm not sure what I should search. I need a way to output the same page (/shop) regardless the following path. Does someone have a hint?
I found a solution. Within TYPO3 v8 is it possible to use the realurl extension for this purpose.
It is possible to define an own decode preprocessing function and analyse the current url.
$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['realurl']['decodeSpURL_preProc'][] = RealUrlManipulation::class . '->decodeSpURL_preProc';
Within this method is it possible to change the url for TYPO3 inner processing and set it to an known url.
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.
Say I made a website with Wordpress, and created a few pages say www.foo.com/bar1 and www.foo.com/bar2. I have no idea where they stored this, since there is no /bar1 and /bar2 directory. Unlike when I created a site from scratch and added new directories like /public_html/bar1.
So how do I configure it like this without Wordpress?
It depends on the technology\framework you're using. Google 'Routing'.
Example for Asp.Net: https://msdn.microsoft.com/en-us/library/cc668201.aspx
When you create a page using WordPress, your all page will have a dynamic content with same layout from page.php file which is a mandatory file of a theme and served according to the routes. You will not see the page.php in URL or page. WordPress saves your page title in database and servers it accordingly (check the permalink section of WordPress).
When you create a custom site from scratch you can do the same by creating a file and re-use it according to the routes. You don't need directory for that.
Note: File extensions like .php .html are removed using .htaccess file.
Maybe you can use a framework like ZK framework to create a div content and refresh it according to the request. This way, you may not have to update any url in your application. You just refresh an inner div by dynamicaly including a new view.
Maybe this would help:
https://www.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Include
I am struggling to get some performance in my MVC application.I am loading a partial page (popup) which is taking hardly 500ms. But each time the popup loads it also downloads 2 jQuery files as well.
is it possible to use the jQuery from cache or from parent page?
I have attached the image in red which shows 2 additional request to server.
In order to improve the performance you can try with the following approaches:
see if your application server supports GZip and configure the application/server to return the responses always archived in Gzip
Use minified version of JQuery
there are also Packing libraries where you can pack all the imported resources, such as CSS files and JS files, and the browser will do only 1 request per resource type. For instance, in Java we have a library called packtag.
In general, I recommend you using Google Chrome browser and its performance analyzer. It will give you good hints.
In the Bundle config use this code
BundleTable.EnableOptimizations = true;
and also indclude both files in single bundle.
Does the popup use an iframe or does it's content just get added to the DOM of the current page?
If it gets added to the current page you could try just adding the script references to the parent page instead. It might not always be the best idea if the parent page has no need for those two files, but if the parent page also uses the jQuery validation then the popup will be able to use the parent's reference to the script file.
For an iframe I'd suggest looking at Gzip and minification to make the scripts load faster.
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);