VSTS Continuous Integration - ASP.NET Core and Angular 4 project -


i have asp.net core web app (vs2017) , develop angular 4 front-end project (vs code) should part of core web app. , need set ci whole thing. so, when changes in either of projects, builds angular 4 first, gets artifacts , puts them asp.net core project, build , publish azure.

at moment, have angular 4 project in separate repo. so, ideally, can set ci on repo , make publish artifacts azure storage (for example). then, i'd have ci setup asp.net core repo trigger build, first step 'get angular 4 artifacts , put them in here'. this:

  1. if file changes in ng4 repo => build , yield build
  2. it should trigger build of aspnetcore repo
    • grab ng4 build , copy inside aspnetcore folder structure (like wwwroot)
    • build aspnetcore repo
    • ...
  3. test, deploy, etc

so question - how can vsts?

ok, said have 2 projects - asp.net core mvc project (core-p) , angular 4 project (ng-p). reside in separate repo's in vsts. goal automate build , publishing of whole project azure app service.

here's how made work:

first. ng-p

build tasks:

  1. 'npm install @angular/cli@latest -g' - add npm task, set npm command install, set arguments @angular/cli@latest -g.
  2. 'npm install' - installs that's needed ng project.
  3. build angular 4 project production. made simple build.cmd runs ng build --aot --output-path dist --base-href work. notice --output-path dist: project output put 'dist' folder (which default angular-cli guess, want make sure). besides, use --base-href work option here, angular 4 app available [mydomain.com]/work in core-p project.
  4. archive files - archive in dist folder (the compiled app). tick replace existing archive.
  5. put archive azure blob storage. find convenient use azure blob storage make artifact available cope-p build definition. first, blob storage ready, no set required (except need have azure storage account). besides, it's pretty secure, dist.zip not publicly available. can use any other method sharing artifacts between builds. azure file copy task has required params - storage acc name, key, destination container name. set them accordingly, you'll need them in corresponding task core-p build.
    1. trigger core-p build - when ng-p has artifact uploaded azure blob storage, need trigger build of core-p. in order that, need install trigger build task extension vsts marketplace.

second. core-p

so, have built ng-p , it's available core-p build process dist.zip file sitting in azure blob storage (or other place choose). now, created build definition asp.net core (preview) template. go , create 1 project , change following.

tasks:

  1. restore (.net core preview) - 1 created template. not change it.
  2. build (.net core preview) - same

  3. now, need grab dist.zip. in case, grab azure blob storage somehow (if used other way share dist.zip, you'll need use own task it). managed used azure powershell inline script this:

    $an = "[your_azure_storage_acc_name]" $ak = "[storage_acc_key]" $ctx = new-azurestoragecontext -storageaccountname $an -storageaccountkey $ak

    $blobs = get-azurestorageblob -container "ng-p-dist" -context $ctx $destfolder = "$env:build_artifactstagingdirectory"

    new-item -path $destfolder -itemtype directory -force $blobs | get-azurestorageblobcontent -destination $destfolder -context $ctx

this download dist.zip , puts in build.artifactstagingdirectory directory.

  1. extract files - task extracts dist.zip $(build.artifactstagingdirectory)/$(build.repository.name)/wwwroot/js/app. archive file patterns param set $(build.artifactstagingdirectory)/dist.zip, , destination folder $(build.artifactstagingdirectory)/$(build.repository.name)/wwwroot/js/app

  2. powershell script - remove dist.zip, don't need anymore. one-liner:

    remove-item "$(build.artifactstagingdirectory)/dist.zip"

    1. test .net core preview - original template.
    2. publish .net core preview - same
    3. publish artifact - same

so, creates asp.net core mvc project angular 4 app inside. now, have add 2 things setup:

  • cope-p should have trigger based on dist.zip change. so, whenever ng-p changes, creates new dist.zip. , should automagically trigger cope-p build. guess there web hooks involved. i'll add when figure out.
  • since i'm new build/release pipeline, have publish project azure app service. should easy, since it's standard task vsts. haven't had change there.

so, hth


Comments

Post a Comment

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more