I'm rewriting some templates and functionality previously developed using AngularJS 1.x which are currently managed and developed as static assets in an ASP.NET MVC application and are used alongside razor syntax (.cshtml). There are no components either. Imagine the AngularJS modules as a huge bunch of jQuery code linked and coupled with views.
This time, I'm implementing everything we need in a Vue 3 app in a separate git repository and I'm also using Vuex 4.
I'm hoping to be able to do the following:
Build the Vue app
Load the assets in BundleConfig.cs
Link the assets to my _layout.cshtml to have them on all my pages.
Use the components wherever I need them.
I'm going well on developing the components and functionalities within its standalone project, yet I'm facing several problems and/or ambiguities.
I have pages that are mostly if not entirely rendered by the client-side. These pages may or may not be handled by a client-side router such as vue-router.
I also have pages that are mostly rendered by the server and then stuff is added or dynamic contents are loaded by the client-side. These pages can't use a client-side router.
I'm not using a router and I'm having a hard time developing and testing those pages that are mostly rendered by Vue.
if I use a router I think I won't be able to do what I'm planning to do about those pages that are mostly rendered by the server. I really need all pages (whichever kind they are) to have access to my Vuex store.
What do you recommend I do to make it easier for myself both in development and production?
Should I create several static HTML files for each of my pages in Vue's public directory tweak Webpack's configuration in order to simulate what will happen in production (use within the ASP.NET project)?
Should I start having a router, put all pages that are mostly CSR under its control, and somehow configure it to have nothing to do with my other pages that are mostly SSR?
I need to be able to debug and test stuff when I run npm run serve and then do what I'm tasked to do. Unless the whole plan is a bad/wrong idea somehow.
I might also be able to build my Vue app as a library and then, in the ASP.NET project, init a small Vue app that imports that library and that itself is bundled with the back-end project. The whole reason I'm doing this is to make the client-side stuff reusable and easy to maintain. I don't want to take a GET SHIT DONE approach.
Thanks
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 am about to start work on a non SPA ASP.NET MVC application and I was wondering what the best practices are for bundling and minifying.
I've been using webpack for react but this does not seem to fit in with a non SPA website or would this be a good fit?
I've used requirejs in the past where I used the data-main attribute to specify a file for the current view but I'm not sure how this would work with minified code where we would potentially only have 1 file.
I know .NET has its own ScriptBundler but is this still supported and should I perhaps use gulp instead?
If you're using ASP.NET MVC 5 or lower, then you can use both gulp and the script/style bundlers.
For instance, you could use gulp to do the minifying and use the script/style bundling to do the rest. This way you can use the non-minified scripts and styles during development (debug mode) whereas you only use the minified and bundled scripts in release mode.
Depending on your requirements, you can make multiple bundles and add those to your views. Performance wise, I'd suggest you use 2 bundles per page: 1 script bundle (near the closing body tag) and 1 style bundle (in the head section). Don't forget about common scripts and styles: those can be located the _Layout partial view. So you end up with 2 bundles per type per page.
I use this approach for my own projects. However, for ASP.NET Core applications, you should consider only using gulp. As far as I know, there isn't a real replacement for the bundling as we know it in ASP.NET MVC 5 applications, it just works a bit differently. But if you use gulp already, then you won't have big problems migrating to asp.net core (which you will at some point I guess).
I'm building a CDN, and looking for a ways to utilize .NET minification/bundling mechanism (System.Web.Optimization) there.
The question is how can I return minified bundle from MVC controller.
Note: I'm looking to use native .NET 4.5 capabilities, I do not want 3rd party solutions.
I'm only looking for ways to utilize this on CDN side. Not on client application side.
Additional question: If the above is possible at all, please explain how can I take advantage of caching, which is normally achieved through adding unique query string parameter to request.
The asp.net bundling and minification uses WebGrease internally.
Grab it off nuget and add just start using it. It looks like the codeplex site doesnt have any examples on there so you will need to look at the source code or download/decompile the asp.net source code to see how they use it.
For the query string parameter I believe that is mainly to prevent/aid client side caching it doesnt neccessarily have anything to do with your server side.
You haven't said how you plant to serve up the JS files from your custom CDN so I can't help much with the caching, I would highly suggest not serving them through mvc though, there will be a lot of extra things happening in the pipeline that you dont really need if all you're doing is serving static files.
Perhaps look at having some process that parses the files and sticks them in a certain directory that IIS can serve directly without delegating to asp.net
I want to build a simple site with MVC but then render the "pages" and corresponding "assets" (js, css, images, etc) to what one might call a "static site".
In other words, I don't want to deploy to an IIS server that supports MVC. I simply want to build the site in MVC then somehow parse those pages into static html/css/etc files and upload the site to a regular LAMP host.
Is there an easy way to automate this? NuGet package? Binary? MVC extension like maybe a handler add-on that can render out the static site in a single pass?
About 10 years back, I used to download whole websites for offline use using HTTrack Website Copier. May be you could download your own website which gives you nice hierarchy of your static web pages. If you think all your webpages are reachable through the homepage links, menu links etc then you can download most of your website. Basically you can google for web crawlers/ offline browsers/website downloaders etc. and run them to get your job done.
Alternatively if you know the pattern of urls, you could give it to download manager to download them. Not sure if it works with your website, but I do it sometimes.
HTH
If your site depends on a database or some other dynamic source it will be close to impossible to dump all possible combinations of pages into static files. If on the other hand your site is pretty much static, saving the rendered HTML/JS/CSS source into files and uploading it to a LAMP server won't be too hard.
You may wanna look at Pretzel, a .Net static site generator.
Update: Apparently it doesn't work on ASP.Net projects: Issue #123. It only supports Razor language for authoring content pages.
If the reason for doing this is performance related why not just use output caching and the like, that way the pages will be extremely fast (you could set the cache timeout to a very long period of time) and you don't need to run some tool to do the conversion and have to store your html separate to your source code.
Of course you will still need to run IIS/.net
You have three options:
Create your website using plain html, css, jquery and images. You can use Visual Studio Code as IDE to create the files. One issue might be to manage common header/footer for your website. But you can solve it by injecting html header/footer using jquery.
Use a CMS (content management system) like Umbraco to host your static site. Umbraco indexes and caches pages to improve performance. You have great control on what to publish on your website etc.
Create the website using .Net + MVC and use tools like HTTrack to download a static copy of the website. You can even automate the process using commands and triggering it after every deployment or build etc.
I am considering using .NET MVC for my next web app but one of the requirements is that there should be minimum work involved from the clients side (who will be maintaining the site).
They are used to simple HTML sites where all they have to do in order to make a minor change is to modify an html in notepad and upload it.
What parts of an .NET web app needs to be compiled? Is it only the .cs parts of it? Can all the rest be updated freely by modifying files with e.g. notepad?
Also, in an MVC environment, is more of the view related code in compiled files?
How is this kind of maintenance usually done in such cases where the client will take over the site on delivery (and are not interested in needing VS installed and needing to compile!)?
If you really need a web application, then in order to make changes to the 'application' part, they're going to need to be able to recompile.
If they're going to make visual changes, then your best bet is to provide a method for them to edit the HTML of the site. You can make changes to the views (.aspx files) in ASP.NET MVC without having to recompile. If you make changes to your controllers or your Model, then you'll have to recompile.
If this is a major requirement for your client, you can build the site using ASP.Net Web Forms instead of ASP.NET MVC in which case changes to the .cs files will be compiled on the fly when the page is first accessed. Note that this only applies to the .cs files in your Web Forms project. Any .cs files in referenced assemblies will need to be pre-compiled.
That said, I suspect your client is primarily interested in modifying the look/feel/content of a page, so they would probably be satisfied modifying the .aspx files in either a Web Forms or MVC app.
If they have the budget for it, sounds like the best solution is to build a Content Management System, so they don't have to edit files ever again.