Modern Web Development Workflow backed by .NET

#modernDotNetMODERN WEB DEVELOPMENT WORKFLOW

BACKED BY .NET

why is change so scary?

@JEFFREYSTRAUSS ARANA SOFTWARE

C#

all the thingsC#

Studio is forC# all the things

Studio is for all the things

+ =

Use the best tools

Cis for Studio#

Isolate the Client...

...for less code.

...for better testing.

...for better communication.

But my boss will...

But my client will...

But Studio can...

But I know Studio...

our workflow

Our Workflow

getting started

! nodejs.org free | MIT license

Bower! bower.io free | MIT license " npm install -g bower

bower install jquery"

bower install jquery#2.1.4

jquery#2.1.4 bower_components/jquery

"

bower install jquery"

bower update <package> bower uninstall <package> bower list

"

gulp.js! gulpjs.com free | MIT license " npm install -g gulp

#

a task: read, concatenate, write

#

$

streams from task to task

//gulpfile.js

var gulp = require('gulp'); var coffee = require('gulp-coffee'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify');

gulp.src('app/js/**/*.coffee')

gulp.src('app/js/**/*.coffee') .pipe(gulp.dest('dist/js'));

gulp.src('app/js/**/*.coffee') .pipe(coffee())

.pipe(concat('app.js'))

.pipe(uglify())

.pipe(gulp.dest('dist/js'));

#$

gulp.task('coffee', function() { gulp.src('app/js/**/*.coffee') .pipe(coffee())

.pipe(concat('app.js')) .pipe(gulp.dest('test/js')) .pipe(uglify()) .pipe(gulp.dest('dist/js'));

});

gulp.task('watch', function() { gulp.watch('app/js/**/*.coffee', ['coffee']); });

%

gulp coffee watch"

Kudu& projectkudu/kudu free | apache license " npm install -g azure-cli

azure site deploymentscript"

:: 6. Publish to wwwroot call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 --fromDir "%DEPLOYMENT_TEMP%" --toDir "%DEPLOYMENT_TARGET%" --previousManifest "%PREVIOUS_MANIFEST_PATH%" --nextManifest "%NEXT_MANIFEST_PATH%" --ignore ".git;.hg;.deployment;deploy.cmd"

'

'

'

'

'

./staging/ ├── bin ├── css ├── img ├── js ├ about.html ├ index.html └ web.config


./wwwroot/ ├── bin ├── css ├── img ├── js ├ about.html ├ index.html └ web.config

∠


./wwwroot/ ├── app_data ├── bin ├── css ├── img ├── js ├── log ├ about.html ├ index.html └ web.config

∠



∠

./staging/ ├── bin ├── css ├── img ├── js ├ index.html └ web.config


∠



∠


./wwwroot/ ├── app_data ├── bin ├── css ├── img ├── js ├── log ├ index.html └ web.config

∠

:: 6. Publish to wwwroot call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 --fromDir "%DEPLOYMENT_TEMP%" --toDir "%DEPLOYMENT_TARGET%" --previousManifest "%PREVIOUS_MANIFEST_PATH%" --nextManifest "%NEXT_MANIFEST_PATH%" --ignore ".git;.hg;.deployment;deploy.cmd"

'

'

'

'

'

deploy"

! jetbrains.com $129 | Commercial

building an app

demo code! queenseight.com & aranasoft/queenseight

Visual Studio Solution ├── Processor Project ├── Processor.Tests Project └── API Project

./ ├── Processor ├── Processor.Tests ├── API └ QueensEight.sln

./ ├── Processor ├── Processor.Tests ├── API ├── Web └ QueensEight.sln



./Web/ ├── app ├── config ├── tests ├── vendor ├ bower.json ├ package.json └ gulpfile.js

./Web/app/ ├── css ├── img ├── js ├── pages └── static

./Web/app/ ├── css │ ├ _mixins.scss │ ├ _variables.scss │ └ app.scss ├── img ├── js │ ├ app.coffee │ ├ controllers.coffee │ ├ directives.js │ └ templates.coffee ├── pages └── static

./Web/app/ ├── css │ ├ _mixins.scss │ ├ _variables.scss │ └ app.scss ├── img ├── js │ ├ app.coffee │ ├ controllers.coffee │ ├ directives.js │ └ templates.coffee ├── pages └── static

gulp build"

#

$ )

#

$ )

#

*

#$ )

#

*┌ ┤ └

./Web/ ├── app ├── config ├── dist ├── generated ├── tests ├── vendor │ └── components ├ bower.json ├ package.json └ gulpfile.js

./Web/ ├── app ├── config ├── dist ├── generated ├── tests ├── vendor │ └── components ├ bower.json ├ package.json └ gulpfile.js

./Web/generated/ ├── css │ └ app.css ├── img ├── js │ └ app.js └ index.html

./Web/dist/ ├── css │ └ app.css ├── img ├── js │ └ app.js └ index.html

gulp run"

$*+, !%)

$*+, !%)

⌘S

┌ │ ─┼ │ └

*$

+% -

┌ │ ─┼ │ └

)

LiveReload! livereload.com free | MIT license , browser extension

- ┌ │ ─┼ │ └

*$

+%

┌ │ ─┼ │ └

!-)⌘S

gulp run --proxy"

$*+, !%)

.

$*+, !%)

deployment

Kudu " deploy

:: deploy.cmd

:: 1. Restore NuGet packages "%NUGET_EXE%" restore "%DEPLOYMENT_SOURCE%\QueensEight.sln"

:: deploy.cmd

:: 1. Restore NuGet packages "%NUGET_EXE%" restore "%DEPLOYMENT_SOURCE%\QueensEight.sln"

:: 2. Build .NET Project with MSBuild "%MSBUILD_PATH%" "%DEPLOYMENT_SOURCE%\API\API.csproj" /t:Build;pipelinePreDeployCopyAllFilesToOneFolder /p:_PackageTempDir="%DEPLOYMENT_TEMP%"; AutoParameterizationWebConfigConnectionStrings=false; Configuration=Release; SolutionDir="%DEPLOYMENT_SOURCE%\" %SCM_BUILD_ARGS%

'

'

'

'

'

'

:: 3. Restore npm packages call :ExecuteCmd !NPM_CMD! install

:: 3. Restore npm packages call :ExecuteCmd !NPM_CMD! install

:: 4. Build Web Client project with gulpJS call .\node_modules\.bin\gulp build

:: 5. Consolidate project output call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%\Web\dist" -t "%DEPLOYMENT_TEMP%" -p "%DEPLOYMENT_SOURCE%\Web\generated\manifest" -n "%DEPLOYMENT_SOURCE%\Web\generated\manifest" -i ".git;.hg;.deployment;deploy.cmd"

'

'

'

'

'

:: 6. Publish to wwwroot call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_TEMP%" -t "%DEPLOYMENT_TARGET%" -p "%PREVIOUS_MANIFEST_PATH%" -n "%NEXT_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd"

'

'

'

'

'

./ ├── artifacts │ └── wwwroot ├── Processor ├── Processor.Tests ├── API ├── Web └ QueensEight.sln

./artifacts/wwwroot/ ├── bin ├── css │ └ app.css ├── img ├── js │ └ app.js ├ Global.asax ├ index.html └ web.config

your workflow

future workflow

/ ? 1

┐ │ ┼ │ ┘

/ ? 1

┐ │ ┼ │ ┘

┐ │ ┼ │ ┘

┌ │ ┼ │ └

learn more! bower.io ! gulpjs.com & projectkudu/kudu

demo code! queenseight.com & aranasoft/queenseight

walkthrough& aranasoft/todo-azurewebsites

try out our workflowNEXT STEPS

build your own workflow

make awesome

@je f f re y s t r au s s #mode rnDo tNe t

[email protected]

Modern Web Development Workflow backed by .NET

Software