Angular Theme for Blogifier - Jump Start
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
ng command line utilities. When done, verify from command prompt that you have them up and running:
Here I create new
myapp application in the
c:\demo folder and start it on port 4200
ng new myapp cd myapp ng serve
Open web browser and navigate to
http://localhost:4200 to verify application is running.
Build application. This will combine and compress application resources and create new folder
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.
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.
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.