Publish Angular application with Angular CLI and AspDotNet Core

Publish Angular application with Angular CLI and AspDotNet Core

A few months back I showed how to bootstrap an Angular application using Angular CLI. Apart from bootstrapping and serving, Angular CLI is also capable of packing the application and get it ready to be published in order for us to serve it on our own webserver. Today we will see how the process of publishing can be done in three steps

1. Prepare the project for packing
2. Create a host
3. Publish the application

1. Prepare the project for packing

In order to ease the understanding, we start by separating our client Angular application and Host application.
The client will go into /client while the host into /host. Here a preview of how the structure will look like:

- MyApplication
    | - /.git
    | - /client
            | - /e2e
            | - /node_modules
            | - /src
            | - ...
    | - /host (nothing here yet)
            | - /Host
            | - MyApplication.Host.sln

In order to create this structure we can start by creating the main application folder /MyApplication. Then we navigate to it and execute the following command:

ng new MyApplication -sg -sc -dir client

Where -sg stands for skip-git, -sc for skip-commit and lastly we change the directory of the files to /client.
Next from the root we can git init to create the git files. For the .gitignore, we can copy it from another project like this collection of .gitignore from github https://github.com/github/gitignore.

Now that we have proper folder separation we can build using ng build from within the client which creates a /dist folder with the application packaged for publishing.

The output folder can be modified in Angular CLI configuration, we will do it later. For now we can leave it as is.

2. Create the host

Under the host folder, we can create an empty AspNetCore application. Don’t forget untick Create directory for solution.
This application will be our webserver hosting our Angular application.
When creating the application, it auto-creates an /wwwroot folder. This is the root of the web application. All files inside this folder will be served by the host.
This comes on point since what Angular CLI builds is a set of static files; html and js files, therefore all we need to do is to have the /client build the content of its /dist straight into /wwwroot of the host and have the host serves those static files.

To serve the files, we can make use of the AspNetCore.StaticFiles library which comes preinstalled with AspNetCore.All when creating an AspNetCore project by registering it on our app builder pipeline:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseFileServer();
}

UseFileServer will serve the /wwwroot and find the index.html file.

AspNetCore.StaticFiles comes with multiple extensions for the app builder which are useful in different scenarios:

  • UseDefaultFiles will find index.html
  • UseStaticFiles will serve /wwwroot, the files will be accessible by direct url
  • UseDirectoryBrowser will enable browsing on the directory
  • UseFileServer will combine all three where browsing needs to be explicitly set to true

More info on the official documentation of AspNetCore here.

In our case all we need is UseFileServer. We are now ready with a working client and host. What we need to do next is prepare for publishing.

3. Publish the application

First thing we need to do is to setup Angular CLI to write the /dist to the /wwwroot folder of our host.
This can be done by modifying the outDir in the .angular-cli.json to output to /wwwroot:

{
    "apps": [
        {
            "ourDir": "../host/Host/wwwroot"
        }
    ]
}

The .angular-cli.json schema can be found on Angular CLI github here.

Now that we have that we can ng build, it will compile pack and copy to the wwwroot. Then we can dotnet publish on the host which will pack every library together with the /wwwroot is the publish folder. And that’s it we have our package ready.

To run it, navigate to the /publish folder of your AspNetCore app and execute dotnet Host.dll. And that’s it, we have a running hosted Angular application!

Conclusion

Today we saw how we could publish and host an Angular application using Angular CLI functionalities together with an AspNetCore host application. The steps can quickly be implemented and automated for continuous delivery. Hope you liked this post as much as I like writting it. Sse you next time!

Comments

Post a Comment

Popular posts from this blog

A complete SignalR with ASP Net Core example with WSS, Authentication, Nginx

SignalR with ASP Net Core SignalR is a framework from ASP NET Core allowing us to establish a two way communication between client and server. This two way communication allows the client to send messages to the server but more importantly allows the server to push messages to the client. SignalR makes use of Websocket when available else it falls back to SSE or pulling. Today we will focus on how to setup SignalR to work with WSS, Websocket secure and how we can authenticate the user requesting to connect to our SignalR hub via Webscoket. Getting started with SignalR SSL encryption for Websocket Secure WSS Websocket Authentication with Identity Server 4 SignalR behind Nginx 1. Getting started with SignalR The Hubs are the main components of SignalR. It is an abstraction of a two way communication available for both client and server. Public functions from the hub can be called from the server code and can be called from the client. The frontend NPM package @aspnet/signalr
Keep reading

Microsoft Orleans logs warnings and errors

Microsoft Orleans logs warnings and errors Microsoft Orleans is a framework which helps building distributed system by implementing the actor model together with the concept of virtual actors, taking care of availability and concurrency. If you are unfamiliar with Microsoft Orleans, you can look at my previous blog post explaining the benefits of Microsoft Orleans . Even though Orleans promises to abstract the distributed system problems, there are instances where errors arise without us being able to understand what is going on. Lucky us, the logs are well documented… but only for those who can decrypt them. Today I will go through some of the errors and warnings which can be seen from silo and client so that you too can undestand what is going on. Enjoy! The code used to produce those errors can be found on my GitHub https://github.com/Kimserey/orleans-cluster-consul . 1. Client logs Logs on client appears with address {ip}:0 . 1.1. Can’t find implementation of interface An un
Keep reading

One way to structure Web App built in F# and WebSharper

Image
Architecture for Web App built in F# and WebSharper F# + WebSharper is an awesome combination to build web application . The only problem is that if you want to build a web app larger than a to-do list, it’s hard to find examples to use as references. It is even harder to find tutorials that touches on overall design and answer questions like: How should I start? Where should I put the code? How should I separate the code, put it in different files, with different namespaces or modules? How many layers? Asking these questions at the beginning of the development is important. All these questions if answered correctly will lead to a good structure for the application. Answered incorrectly, or not even asked, will most likely lead to unmaintainable/fragile/rigid (or whatever bad adjectives for coding) code. Over the last few months, I have been working on a web app built in F# with WebSharper and came out with an architecture that caters to extensions and decoupling. Today, I wil
Keep reading