This is the first tutorial, it's goal is to help understand how theming engine works in Blogifeir and get started on theme development quickly and easily. Tutorial does not get into much details, just steps through creating and deploying Angular CLI application as Blogifier theme. Building blog theme itself is a subject for another topic.

First of all, follow steps here to install npm and ng command line utilities. When done, verify from command prompt that you have them up and running:

data/rtur/2019/8/ang-cli-pre.png

Here I create new myapp application in the c:\demo folder and start it on port 4200

ng new myapp
cd myapp
ng serve

data/rtur/2019/8/ang-cli-serve.png

Open web browser and navigate to http://localhost:4200 to verify application is running.

data/rtur/2019/8/ang-cli-new.png

Build application. This will combine and compress application resources and create new folder c:\demo\myapp\dist\myapp

ng build --prod

Copy folder to your Blogifier application under the Blogifier\src\App\wwwroot\themes. Start Blogifier and navigate to admin/themes. You should see new myapp theme in the list.

data/rtur/2019/8/ang-cli-themes.png

Click the star on myapp theme to select it as active current theme for a blog. Then click little globe icon in the left low corner on the side bar to lunch blog in the new tab. You should see your angular application running at the root of your blog.

data/rtur/2019/8/ang-cli-home.png

Not a very useful blog just yet, but this is a good proof of concept showing how everything works together. To sum up, any Angular application can serve as Blogifier theme once you put it in the themes folder.

Themes that come with Blogifier out of the box are CLI applications with source code hosted at https://github.com/blogifierdotnet/themes. You can look them up as a reference for your own themes. Because they are pure Angular CLI applications, they can be developed completely on its own, and then built and deployed to main Blogifier application.

Even more, because Blogifier APIs support CORS (cross origin requests) you can point your CLI app to http://blogifier.net and build your theme against APIs exposed by that site, so front-end developer/designer doesn't even need .NET framework running locally. But this is one of the topics for the next tutorial.

Diagram below shows how Github repositories set up for front-end development and Blogifier itself work together. Code in the themes repository can be updated at any time, build to distribution folder and deployed to Blogifier repository.

data/rtur/2019/8/ang-cli-diagram.png