Hello World App for AngularJS and WebApi - Template for new Apps
This is a standard WebApi application with AngularJS and gulp build pipeline used for the frontend.
All the frontend client files are in the
_client folder within the application.
The gulp compiled files are copied to the
app folder in the WebApi application. Running the application from VisualStudio will automatically run the index file found within this directory.
The build and release pipeline of choice has to exclude the
_client folder and include the
app folder. See the sample configuraiton below that does this when using msbuild
<ItemGroup> <ExcludeFromPackageFolders Include="_client" /> <FilesForPackagingFromProject Include="app\**\*"> <DestinationRelativePath>app\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath> </FilesForPackagingFromProject> <FilesForPackagingFromProject Include="index.html"> <DestinationRelativePath>%(Filename)%(Extension)</DestinationRelativePath> </FilesForPackagingFromProject> </ItemGroup>
Install node and npm
Gulp tasks download bower prerequisites, compile, minifiy and inject all the files. They also watch the files for any changes and automatically recompile and inject.
gulp - runs default gulp task. Compiles the client app, starts a livereload server and refreshes when the files change.
gulp build - builds the client app without starting the watcher
gulp vs - builds the app and starts a file watcher. This should be used when running the app from Visual Studio.
Running any task with
--env release will run a production build of the client app. This includes minifying and concatinating both client and vendor files
Running tests via Gulp
Gulp tasks are there. Description and sample coming soon
Gulp Config and Vendor Packages
Bower can be used to install any additional 3rd party packages for the frontend. Any packages installeda re not automatically added to the pipeline. In order to have the new pakcages consumed edit
gulp.config.js and add appropriate vendor files to
"vendorcss": [ "bower_components/semantic-ui/*.min.css" ], "vendorjs": [ "bower_components/angular/angular.min.js" ]