Today I had the opportunity to speak at the Open Source Conference in Hokkaido. It was a great conference with a lot of developers and IT Pros who are passionate about using and contributing to Open Source Software.

I'll post more highlights from the conference later, but below are my notes so attendees can try the same steps I showed in the session.

We will update with additional translation to Japanese in the next week or so.

Open Source Software and Microsoft Azure

OSC Hokkaido 2014

Drew Robbins
@drewrobbins
http://drewby.com

Outline : 本日のアジェンダ

  • Overview of Microsoft Azure : Microsoft Azure の概要
  • Create Websites using Open Source CMS : オープンソースCMSを使った Web サイト作成
  • Use "Monaco" to Create New Websites : Visual Studio "Monaco" を利用した Web サイト作成
  • PHP and Web Application Frameworks : PHP および アプリケーションフレームワークの利用
  • Use NodeJS and Express : NodeJS & Express の利用
  • Dev/Test/Prod with Git and Visual Studio Online : Git と Visual Studio Online を使った 開発/テスト/発行

Resources : 情報リソース

Notes

Here's a list of additional Open Source Software on Microsoft Azure http://azure.microsoft.com/en-us/community/open-source-software/

Sign up for a Microsoft Azure Trial Account

  1. Open your web browser to http://microsoftazure.com
  2. Click the Free Trial button at top of the page
  3. Click Try It Now
  4. Login with a Microsoft Account
  5. Enter your contact info and account verification information.
  6. Agree to the User Agreement
  7. Click sign-up

Create a New Wordpress Blog in 3 Minutes

  1. From the Management Portal, click New -> Compute -> Web site -> From Gallery
  2. Filter the list of Apps by click CMS in the left column
  3. Choose WordPress from the list
  4. Click the Next arrow button
  5. Type a name for your site which will become the URL: [site name].azurewebsites.net
  6. Select to use an Existing MySQL Database or Create a New one
  7. Enter your Deployment Settings (a list of phrases to protect your Wordpress web site)
  8. Click the Next arrow button
  9. Select your existing MySQL Database or enter the details for a new MySQL Database
  10. Agree to the terms of ClearDB's service.
  11. Click the Checkmark button to complete the form and start creating your site
  12. Once the WordPress site is running, cick the URL on the dashboard to browse to it
  13. Enter a Site Title, Username, Password and Email address
  14. Click Install Wordpress
  15. You can now use your new WordPress blog on Microsoft Azure Websites

Creating a Web site from scratch using HTML and Javascript

  1. From the Management Portal, click New -> Compute -> Web site -> Quick create
  2. Type a name for your site which will become the URL: [site name].azurewebsites.net
  3. Click Create Web Site
  4. Once the Web site is created, click the Name of the web site to open the dashboard
  5. Switch the Configure view
  6. Scroll down and turn on Edit in Visual Studio Online
  7. Click Save (at bottom)
  8. Switch to the Dashboard view
  9. Under Quick Glance, click Edit in Visual Studio Online
  10. This will open a new window to the "Monaco" editor
  11. Create a new HTML page by clicking New File (next to Explore) and naming it index.html
  12. Type Ctrl+Space and type html and hit enter. This will add a code snippet to the editor.
  13. Notice you can hit Tab to change between the templated values (Title, Style, Script, etc)
  14. Enter a title and change main.css to styles.css
  15. In the body of the html, type Ctrl+Space and type ol and hit enter
  16. Position your cursor at the beginning of the first li element
  17. Hold down Alt and Control and press arrow down two times. This create a multi-line insertion.
  18. Type Session and delete the "item" text. All three lines should be edited simultaneously
  19. Create a new CSS page by clicking New File and naming the file styles.css
  20. Enter a body element with a background-color style.
  21. Notice as you are entering text that you can click Tab to cycle through options and click right-arrow to choose a token.
  22. Click Run in the left menu bar to browse your website.

Creating a Web site using CakePHP and PHPUnit

  1. From the Management Portal, click New -> Compute -> Web site -> From Gallery
  2. Filter the list of Apps by click App Frameworks in the left column
  3. Choose CakePHP from the list and click the Next arrow button
  4. Type a name for your site which will become the URL: [site name].azurewebsites.net
  5. Select to use an Existing MySQL Database or Create a New one
  6. Enter your Deployment Settings (a pair of strings to protect your CakePHP web site)
  7. Click the Next arrow button
  8. Select your existing MySQL Database or enter the details for a new MySQL Database
  9. Agree to the terms of ClearDB's service.
  10. Click the Checkmark button to complete the form and start creating your site
  11. Once the Web site is created, click the Name of the web site to open the dashboard
  12. Switch the Configure view
  13. Scroll down and turn on Edit in Visual Studio Online
  14. Click Save (at bottom)
  15. Switch to the Dashboard view
  16. Under Quick Glance, click Edit in Visual Studio Online
  17. This will open a new window to the "Monaco" editor
  18. Click Run in the left menu bar (or Ctrl+F5) to browse your website.
  19. Switch back to Monaco
  20. Click Open Console in the left menu bar (or Ctrl-Shift-C)
  21. To install Composer (package manager), type
    curl -sS http://getcomposer.org/installer | php
  22. To create a shorter user command for Composer, type
    echo @php composer.phar %* > composer.bat
  23. Install PHPUnit, type
    composer require phpunit/phpunit=3.7.*
  24. Click Quick Open in the left menu bar (or Ctrl-E) and type Core.php in Quick open box
  25. Insert the following line into core.php
    require_once dirname(__DIR__) . '/../vendor/autoload.php';
  26. Return the console and generate a model, view, controller using a table in your database, type
    lib/cake/console/cake.bat bake all [Name of model]
  27. Click Run in the left menu bar (or Ctrl-F5) to browse your website.
  28. Add your model name to the end of the URL to view the generated page
  29. Switch back to the Monaco editor
  30. Click Quick Open (Ctrl-E) and type your Model name
  31. Look for the [Model]ControllerTest.php file and open
  32. Comment out the Fixtures section by selecting it and typing Ctrl-/
  33. Click Quick Open (Ctrl-E) and type @: to view symbols of the open file
  34. Select testDelete. Replace the body of testDelete with
    $test->assertEquals(0, 1-1);
  35. Click Run (or Ctrl-F5) to browse to your site
  36. Add app/webroot/test.php to the end of the url
  37. Click the Controller test link
  38. Note that one test passed (the one you implemented)

Creating a Web site using NodeJS, Express, Less and Git SCM

  1. From the Management Portal, click New -> Compute -> Web site -> Quick create
  2. Type a name for your site which will become the URL: [site name].azurewebsites.net
  3. Click Create Web Site
  4. Once the Web site is created, click the Name of the web site to open the dashboard
  5. Switch the Configure view
  6. Scroll down and turn on Edit in Visual Studio Online
  7. Click Save (at bottom)
  8. Switch to the Dashboard view
  9. Under Quick Glance, click Edit in Visual Studio Online
  10. This will open a new window to the "Monaco" editor
  11. Click Git in the left menu bar (or Ctrl-Shift-G)
  12. Click Initialize git repository.
  13. Type a commit message and hit enter
  14. Uncomment the name/email lines of the configuration file. Type your name and email.
  15. Click Ctrl-S to save
  16. Type the commit message again and hit enter
  17. Click Open Console (or Ctrl-Shift-C)
  18. Install express generator, type
    npm install -g express-generator
  19. Generate an express website, type
    express -f
  20. Install the required NodeJS packages, type
    npm install
  21. Click Run (or Ctrl-F5) to browse to your site
  22. Back in Monaco, click Open Console (or Ctrl-Shift-C)
  23. Install the LESS compiler, type
    npm install less
  24. Click Explorer in the left menu bar (or Ctrl-Shift-E)
  25. Expand the folder public and stylesheets
  26. Right-click style.css and rename to style.less
  27. Click style.less to open in the editor
  28. Insert a line at top to create a variable, type
    @mycolor: green;
  29. In the body element, add a new background-color style, type
    background-color: @mycolor;
  30. Click Open Console (or Ctrl-Shift-C)
  31. Switch to the stylesheets directy, type
    cd public/stylesheets
  32. Compile the styles.less file, type
    lessc style.less style.css
  33. Click Git (or Ctrl-Shift-G)
  34. Type a commit message and hit enter.

Using Git and Visual Studio Online to collaborate

This section leverages the previous project (Express website). This section assumes your have git tools installed on your local machine.

  1. Open your browser to visualstudio.com
  2. If you do not already have an account, then create one.
  3. Navigate to your Visual Studio Online account (https://[accountname].visualstudio.com)
  4. Under Recent projects & teams, click New
  5. Enter a project name and select Git in the Version Control pulldown
  6. Once the new project is created, click Navigate to project
  7. Click Code at the top to switch to source control view
  8. Below Push and existing repository, copy the two command lines show (git remote... and git push...)
  9. Switch back to Monaco (the instance from the previous section)
  10. Click Open Console (or Ctrl-Shift-C)
  11. Paste the two lines copied from Visual Studio Online
  12. Switch back to Visual Studio Online
  13. Below Clone the empty repository, copy the one command line (git clone...)
  14. Open a command prompt or terminal window on your local machine
  15. Paste the command line in to clone the repository
  16. You now have a local working copy of the project
  17. Make edits and git commit / git push back to Visual Studio Online
  18. In the Monaco editor, click Git (or Ctrl-Shift-E)
  19. Click the Elipsis (...) and click Pull
  20. Your changes should now show up in the Monaco version of your project