I have an MVC project in an Area of a larger solution. I would like to add an Angular App inside that area and add it to my MVC project. This is not a .Net Core Mvc project. How would i tell my project to use webpackdevmiddleware? I.E.
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions{
HotModuleReplacement = true
});
Since i would be adding the Mvc app in an area and my folder structure looks like so.
Where should i run my ng new command?
IE
C:\Project\Areas\Mvc ng new AngularApp
or
how do i set the directory so that the app is created in my MVC folder?
would it be easier to just create an angular .net core app instead? Inside the areas folder?
If anyone is trying to figure out how to do this i found a guide that works HERE.
This particular example uses a gulp task to pull in the necessary node_modules and transpile your app into javascript. I am on the lookout at the moment for an example that does the same thing using webpack. Essentially you add a tsconfig.json, a package.json, a gulpfile.js, and then a tsconfig.js as well as your app files in typescript. This does not use the angular cli at all.
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 using Razor templates (cshtml) to build HTML for use in emails. While I can get this all to work and I can send email from a ASPNetCore 3.0 web application I want to actually send email from another process which is NOT a web application. Ideally I would like to queue email, which can be triggered from any number of backend processes, and then send those from a timer like service which runs as a windows service or possibly a back-end worker running in Azure via something like Functions.
Is there any way to leverage razor templates from within a RCL in a .NetCore console or other application which is NOT hosted in AspNetCore??
I think there isn't a way to do this i am sry. :(
If I understand your question correctly, you can use RazorEngine, which I used in .NET Framework 4.6.2 Class Library. There is a .Net Core Nuget as well.
I referenced such Class Library projects from Console Applications, Windows Services and Azure Cloud Services (Worker Roles).
In my setup, I had to mark Razor files as Content so they are copied over to the bin folder. Also, it got more complicated if library is referenced by another library and then that library is used; content did not get copied over or it got flattened out (all razor views ended up in the root of the bin folder vs following directory structures), for which there is a fix by editing project file and adding your own copy build tasks. Or I had to embed razor views into DLL.
There might be improvements to this in recent years, as I said I used RazorEngine few years back. And it might be different in .Net Core RCL as well, but I believe it is possible.
Nowadays, I am using 3rd party services like SendGrid or MailJet. For me, using them avoids majority of the above issues and offers better insight into emails/templates/campaigns to Marketing and other non-tech users. They can edit and modify templates to their liking without (m)any code deployments.
You have to run the code through ASP.net core engine so that Razor code get converted into html.
Otherwise use simple html template.
I'm looking for some best practices and instructions on how to set up and integrate angular-cli (webpack) with Visual Studio 2015 in MVC 5 (not Core).
I realize there's a similar question asked here (how to set up asp.net angular 2 project using Angular-Cli with ASP.NET Core in Visual Studio 2015?), but that was for Asp.net Core only. My project could not move over to Core yet due to server technical issues.
Here is my solution:
Keep an empty index.html
Run ng build to generate index.html with scripts and styles links injected
Create a Gulp/Grunt task to extract all the scripts and styles links from index.html to a json file say manifest.json.(Here I use Cheerio and Gulp-asset-manifest )
Write logic to read manifest.json and output to your MVC views with Razor syntax
It works perfectly for my ASP.net MVC 5 project.
However it cannot work with route lazy load until publicPath is supported, because the url for chunk js files is loaded from root folder not dist folder.
For example:
The correct chunk js files should be:
www.example.com/MyApp/dist/[id].chunk.js
But it will load from:
www.example.com/MyApp/[id].chunk.js
I already created a PR to add pulishPath for angular-cli to solve this issue.
https://github.com/angular/angular-cli/pull/3285
Update:
The PR for publicPath has been merged, lazy loading is no long an issue.
My approach to integrating Angular/CLI and MVC:
The idea here is to separate the front end development experience from the MVC part, so you don’t have to deal with any of the Visual Studio BS, and enjoy the benefits of the Angular CLI and VS Code.
My app is a hybrid app - most pages and main navigation is classic MVC, but some views are in fact single page applications, where the NG app is embedded into an existing view.
I created a new project in the solution to store the SPAs. (You can exclude this project from the solution build)
In the new project, I created a directory for each SPA. Each one of these folders is a standard CLI project (created using ng new)
Development of the ng stuff is done with VS Code, serving the app using ng serve. The development experience with VS Code is awesome!
When we want to embed the app into the MVC view, we first build it for prod using ng build --prod. This creates the bundles in the dist folder.
In the MVC app, I prepared a folder under Scripts\Frontend for each SPA
A gulp task in the MVC project is responsible for copying the bundles from the SPAs' dist folders into the appropriate folders under Scripts\Frontend. Using Task Runner, the task was bound to to Before Build, so it is automatically executed whenever the app is built.
The important gulp command is:
gulp.src('../FrontEndProj/spa1/dist/*bundle.*')
.pipe(gulp.dest('Scripts/Frontend/spa1'));
of course, you need to delete the existing files etc.
In bundles config, I've created a bundle for the styles and a bundle for the scripts. Since prod bundle names are generated with hash by the CLI, I use wildcards:
bundles.add(new script("~/Scripts/spa1/js")
.IncludeDirectory("~/Scripts/Frontend/spa1", inline.*")
.IncludeDirectory("~/Scripts/Frontend/spa1", "polyfills.*")
.IncludeDirectory("~/Scripts/Frontend/spa1", "vendor.*")
.IncludeDirectory("~/Scripts/Frontend/spa1", "main.*"));
(Note that the order you add the files to the bundle is important!)
bundles.add(
new StyleBundle("/Scripts/spa1.css")
.IncludeDirectory("~/Scripts/Frontend/spa1", "*.css")
In your view, add the ng app directive and use the bundles:
#section head {
#Styles.Render("~Scripts/spa1/css")
}
<app-root>Loading...</app-root>
#Scripts.Render("~/Scripts/spa1/js")
I use a slightly different approach to Chang Liu.
After I run ng build -- prod, I copy the files to the root folder,and change the href attribute in index.html to correspond to my IIS virtual directory.
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 started downloading the MVC Template, and created a new project using this template. I Compiled the application, and everything went fine so far.
My question is, where could i find the new sonic.exe file that generates the MVC DAL?
Is that the old sonic.exe?
So long as you're not using Express then the classes are created when you build your applicaion. Sometimes this doesn't work and you'll need to right click on the Models/Classes.tt and choose 'Run custom tool'.
You should then have a Classes.cs file nested under the Classes.tt file and the DAL objects are defined in there.