Jekyll2024-03-13T21:36:43-04:00https://www.ericrohler.com/Eric D. RohlerHi! I am Eric D. Rohler. I am continuously learning open source web development. Follow my blog so you and I can discover tips, tricks and learnings together.Eric D. Rohlerhttps://www.ericrohler.com/about/2022 Update on Professional Goals, Linux, Windows and .NET2022-02-13T07:16:00-05:002022-02-13T07:16:00-05:00https://www.ericrohler.com/blog/2022-update<p>Yes. I know. It has been over 3 years since my last post on here. Perhaps, people visiting the site have noticed. Perhaps, not. In any case, I am sure there are questions. What has Eric been doing? What is Eric working on? Any future plans? What happened with moving to Linux? In this post, I intend to answer those questions and, hopefully, revive my blog writing endeavor in the process.</p>
<h2 id="where-i-have-been-for-3-years-ish">Where I Have Been (For 3 Years-ish)?</h2>
<p>In January of 2019, I took a position at Progress Software Corporation as a Technical Support Engineer. I was promoted to a Senior within a year and have been doing that ever since. It is a great position that affords me the opportunity to experience a wide range of .NET technologies and experiences.</p>
<p>I support Telerik’s UI for ASP.NET AJAX, UI for Blazor, Reporting and Report Server. Additionally, I am picking up on some abandoned XAML skills with UWP and WPF. Doing this has allowed me to expand my web, backend and desktop development skills. It has enabled me to become a more well-rounded full-stack .NET developer.</p>
<p>Additionally, I was able to take on some side projects like blogging and development as well. I have written several blog posts for Telerik which cover a wide range of topics. Below is a brief list of my writings over the last few years.</p>
<ul>
<li><a href="https://www.telerik.com/blogs/using-telerik-reporting-with-kinvey-baas">Using Telerik Reporting with Kinvey’s BaaS - 2019</a></li>
<li><a href="/files/telerik_reporting_ebook.pdf">A Quick Guide to Expert .NET Reporting Tools - 2020</a></li>
<li>Telerik Reporting Web and Desktop Report Designers Blog Series - 2020
<ul>
<li><a href="https://www.telerik.com/blogs/web-and-desktop-report-designers-for-everyone-by-telerik-reporting">Web and Desktop Report Designer for Everyone by Telerik Reporting</a></li>
<li><a href="https://www.telerik.com/blogs/getting-started-web-report-designer-in-dotnet">Getting Started with the Web Report Designer in .NET</a></li>
<li><a href="https://www.telerik.com/blogs/getting-started-with-desktop-designers-in-dotnet">Getting Started with the Desktop Designers in .NET</a></li>
</ul>
</li>
<li>Sleek and Customizable UI Blog Series - 2021
<ul>
<li><a href="https://www.telerik.com/blogs/sleek-modern-ui-design-telerik-kendo-ui">Sleek and Customizable UI for Any Design System and Technology</a></li>
<li><a href="https://www.telerik.com/blogs/telerik-kendo-ui-theme-customization-web-desktop-demo">Telerik and Kendo UI Theme Customization: Web and Desktop Demo</a></li>
<li><a href="https://www.telerik.com/blogs/telerik-reporting-modern-ui-report-viewer-demo">Telerik Reporting Modern UI: Report Viewer Demo</a></li>
</ul>
</li>
</ul>
<p>I also had the pleasure of building out the new Composer experience in <a href="https://www.telerik.com/download/fiddler-everywhere">Fiddler Everywhere</a>. This was a completely new development experience for me. It included new technologies for me like <strong>Angular</strong> and <strong>Redux</strong>. This allowed me to modernize my front-end skills too.</p>
<p>All-in-all, this summarizes what I have been up to since my last post in 2018. I took a position with a very well-known company targeting .NET. I have been using my existing blogging skills to help expand my experience in writing and development. I am also learning new technologies that make me a more well-rounded developer. Given the knowledge I have gained, I am confident that I can move from the database to the server, front-end and to the desktop without too much friction.</p>
<h2 id="any-future-plans">Any Future Plans?</h2>
<p>This leads me to my future plans. Even over the last 3-ish years technology has changed dramatically. It’s important as ever to expand my skills and continue learning. I plan to grow my knowledge on the desktop space and continue advancing along with the .NET development. It is cross-platform now and that is a big advantage. <strong>HINT:</strong> I can use it on Linux. 😊</p>
<p>I also plan to continue writing on this blog. I have made some really cool advancements in my personal technologies with a privacy focus as well. I plan to explore more topics like the persona cloud with <a href="https://nextcloud.com/">Nextcloud</a>, self-hosting with <a href="https://www.unraid.net/">Unraid</a>, web tracker removal through <a href="https://pi-hole.net/">Pi-Hole</a> and a privacy-first modbile OS with <a href="https://grapheneos.org/">GrapheneOS</a>.</p>
<p>I have also considered recording videos or streaming my personal technologies and development experiences. Not sure if this will ever come to fruition but it would be interesting. The best learning moments are those that happen in real-time.</p>
<h2 id="still-loving-linux">Still Loving Linux?</h2>
<p>I am still using a loving Linux on my personal machines. I do use Windows for work. However, this is a limited use. My personal machines run Fedora and Ubuntu. Unraid and Pi-Hole are also Linux based as well. I even use the <strong>Linux Subsystem for Windows</strong> pretty regularly too.</p>
<p>Ultimately, each of my personal computers do include .NET and I would like to explore using .NET technologies on Linux more. Doing this will keep my development skills relevant in .NET across both Windows and Linux. I expect to write more about this in the future. In my opinion, gone are the days of Linux vs. Windows.</p>
<h2 id="conclusion">Conclusion</h2>
<p>This has been a quick update of my skills over the last few years. This post should answer help anyone looking to know what I have been doing, what my plans are in the future and if I am still a Linux user. As always, let’s keep on learning and growing.</p>Eric D. Rohlerhttps://www.ericrohler.com/about/It's been over 3 years since an update. Here is a summary of what I am doing now and what I plan to do in the future.Switched to Linux and a New Direction2018-10-01T06:16:01-04:002018-10-01T06:16:01-04:00https://www.ericrohler.com/blog/switched-to-linux-and-a-new-direction<p>I switched to Linux and it has been fun. But like all good things, how I adopted new tech, new skills and a new direction begins with a story.</p>
<h2 id="introduction">Introduction</h2>
<p>In August of 2017 I retired my Windows 10 Mobile phone that I held on to with the hopes of a revival of the Windows 10 on Mobile initiative. Sadly, it was DOA and I was a fool for thinking otherwise. However, I ended up picking up a Galaxy S8+. It wouldn’t be until January or February 2018 that I would begin to wonder what if I moved all of my services from Microsoft to Google. This would include Office 365 and OneDrive. After all, the services are quite comparable on a 1-1 basis. The migration from Microsoft to Google would be the catalyst of how I switched to Linux.</p>
<p>As I was making this change from one cloud platform to another, I started to think about all of the necessary steps I needed to make the switch. Including, 500GB/1TB of storage, 3.5GB of emails and several well established work-flows I had developed over the years. This made me anxious. I thought about data loss and changing my work-flows and what kind of effect this would have on my life. After the anxiousness, I got angry. I thought, how could I have let these companies acquire so much control over me that it would affect my life? Thankfully, I am a well-rounded techie and was well aware of Linux. Additionally, I had been using the Windows Subsystem for Linux at work managing servers and had become pretty accustomed to Ubuntu. Furthermore, Microsoft’s push of the .NET Core to the command line made me fall-in-love with the command line. What follows is the story about my accidental change from the dark to the light side where I highlight how I switched to Linux and what new direction is taking shape in my career and digital life.</p>
<h2 id="how-i-switched-to-linux">How I Switched to Linux</h2>
<p>After being frustrated with the notion of Google and Microsoft owning my digital life, in February of this year I researched Linux Laptops and found the Dell XPS 13 9370 was being released in a month. I ordered the laptop and started my journey into Linux. Doing this took me back to the early days of learning computers. This is when I would sit in my dorm room alone and tinker for hours trying new things and learning new skills. Ultimately, I settled on Fedora because of it’s developer focus. In addition, Fedora comes with Gnome and isn’t trying to be the next Windows or Mac like Ubuntu. It just seemed like a great fit.</p>
<p>I also discovered that Gnome integrated well with Online Services. Albeit, these services included Microsoft and Google but it also included NextCloud. If you haven’t heard of NextCloud, I highly encourage you to check it out at https://www.nextcloud.com. NextCloud is a privacy focused, self-hosted cloud platform. NextCloud gave me the opportunity to host my own cloud. The services included are Calendar, Mail, Files, Notes and many more.</p>
<p>This presents an excellent opportunity for consumer’s and business, alike. If you look at the economics of these cloud services like GSuite and Office 365. They are making a killing off of you. For example, 1TB of cloud storage is about $10.00 a month which is $120.00 a year. If you purchase this for 5 years, this is $600.00. Now, knowing that I realized I could save some money by hosting my own cloud where I access and manage my own files, calendar, notes, etc. What’s really great about this is that NextCloud doesn’t require a lot of processing power; this could be hosted on a <a href="https://www.raspberrypi.org">Raspberry Pi</a>. In addition, using NextCloud box requires you to deploy using their <a href="https://github.com/nextcloud/nextcloud-snap">Snap</a> package. Which is quite literally, easy to manage and update. So, I purchased a Raspberry Pi and the <a href="https://nextcloud.com/box/">NexCloud Box</a> which includes the connector, case, a 1TB Hard Drive and a 16GB mciroSD. The total cost of this hardware was about $110.00 plus shipping. This means I am saving $10.00 during the first year and $120.00 every year thereafter. That is a tremendous amount of savings coupled with the Gnome NextCloud integration makes my switch a 1-to-1 switch in-comparison to a vanilla Windows OS.</p>
<p>But few things are missing. Most importantly, my comfortable development environment and work-flows. I realized at this time when tackling the development environment issue that I hated developing in Windows. The only way it was made better was because of Visual Studio. However, using Visual Studio hides the complexities of doing actual development. The marketing teams at Microsoft will call this productivity but what they are doing is making lazy developers. You see Visual Studio includes a full on development environment and everything required to develop using the specified languages. But say you want to develop with Ruby or Python, etc. You would have to go an install something else and configure your path. Doing this usually involved a double install. What they should have done with Visual Studio is installed the languages and command line tools separate from Visual Studio. They could be going in that direction now but too little, too late. I discovered package management in Linux. In addition, I discovered that using Vim/NeoVim enabled me to develop at the speed of thought and with as few mouse clicks as possible. So, what all changed when I switched to Linux and what direction has been taking shape the last few months?</p>
<h2 id="a-new-direction">A New Direction</h2>
<p>This brings me to the conclusion. In this post, I wanted to tell my story of how I switched to Linux, what new work-flows were taking shape and what new skills I am discovering. I believe this story is complete. I started with identifying what new hardware I am using, my reasoning behind moving away from using Microsoft and Google services and my replacement for these services. Lastly, I provided an overview of my new development environment and work-flows. My new direction is to go into detail about these areas. I will be focusing on NextCloud and how it can be used for productivity and how it is an identical service compared to iCloud, Gsuite and Office 365 but without the spying and monitoring of your data. Furthermore, I will be blogging about my experiences using NeoVim and developing at the speed of thought. So far, this year has given me the opportunity to go outside of my comfort zone and keep on learning. This is how we improve, we must eradicate our comfort zones and push forward. Happy developing and, most importantly, keep learning.</p>Eric D. Rohlerhttps://www.ericrohler.com/about/I recently switched to Linux from Windows. Read this post to find out why, how and discover any tips, tricks and drawbacks I found.Exploring the Microsoft Graph2017-10-16T22:06:39-04:002017-10-16T22:06:39-04:00https://www.ericrohler.com/blog/exploring-the-microsoft-graph<p>While researching ideas and how-tos for the <a href="https://office365hack3.devpost.com/?ref_content=featured&ref_feature=challenge&ref_medium=portfolio">Hack Productivity</a> hackathon, I have continuously asked the question, how can I unlock the productivity power of Office 365? For example, how would it be possible to implement my productivity processes into Office 365 which is such a large system with so many elements? There is only one answer, the <a href="https://developer.microsoft.com/en-us/graph/">Microsoft Graph</a>. I have already gone over the opportunities for development with Office 365 in this <a href="https://www.ericrohler.com/blog/development-opportunities-in-office-365/">post</a>. Now let’s get started exploring the Microsoft Graph. However, we should review how it was before the creation of the MS Graph.</p>
<h2 id="the-past-was-not-so-great">The Past Was Not So Great</h2>
<p>Before the creation of the Microsoft Graph, every service had a separate endpoint to interact with the data. Office 365 is a vast platform, and there was an endpoint for SharePoint, Exchange, OneDrive, OneNote, etc. Essentially, a developer would need to build a wrapper for each API that connected each service. It was a headache. To compound the nonsense personal and business accounts authenticated against different endpoints. Clearly, a unified Graph endpoint was necessary. This leads me to the present.</p>
<p><img class="img-fluid" alt="old office 365 endpoints" src="/assets/img/20171016Exploringth/101717_0106_Exploringth1.png" /></p>
<h2 id="the-present-is-far-greater-and-improving">The Present is Far Greater (and Improving)</h2>
<p>Nowadays, we have a single API to call for each service including, authentication for personal and business accounts. As with any API, the Graph is versioned and allows for testing against the beta version. Let’s look at the service, as of 10/16/2017, what services are available in production and beta.</p>
<p><img class="img-fluid" alt="new microsoft graph" src="/assets/img/20171016Exploringth/101717_0106_Exploringth2.png" /></p>
<h3 id="services-by-version">Services by Version</h3>
<p>The <a href="https://developer.microsoft.com/en-us/graph/docs/concepts/overview">documentation</a> provides all the details you need. But here is a list for reference. Note that the beta services list is additive and includes everything in the production list.</p>
<h4 id="production-services">Production Services</h4>
<ul>
<li>Users</li>
<li>Groups</li>
<li>Azure Active Directory</li>
<li>Excel</li>
<li>OneDrive</li>
<li>OneNote</li>
<li>Outlook (calendar and email)</li>
<li>People</li>
<li>Personal contacts</li>
<li>Planner</li>
<li>SharePoint</li>
<li>Webhooks</li>
</ul>
<h4 id="beta-services">Beta Services</h4>
<ul>
<li>Intune</li>
<li>Teams</li>
<li>Organizational contacts</li>
<li>Outlook tasks</li>
<li>People and social</li>
<li>Project Rome</li>
<li>Reports</li>
</ul>
<h2 id="where-do-can-we-go-from-here">Where <del>Do</del> CAN We Go From Here</h2>
<p>As the graph keeps improving, possibilities become more realizable. I have been working with the Graph since it was announced and have been waiting on SharePoint Lists. For example, I do everything in Office 365, including blogging. However, I wanted to create a blogging application that exposed specific blog posts from the legacy SharePoint lists blog. Trying to do this before the Microsoft Graph was possible but too much unnecessary work. Although, doing this now would be pointless because Delve is the new SharePoint blogging platform. That is just one example. It is clear the potential that the Microsoft Graph enables.</p>
<h2 id="exploring-the-microsoft-graph">Exploring the Microsoft Graph</h2>
<p>Microsoft has done a great job providing documentation and samples for exploring the Microsoft Graph. Check out the <a href="https://developer.microsoft.com/en-us/graph/graph-explorer">Graph Explorer</a> to get a hands-on feel. It’s like using Fiddler, but with the all the calls preconfigured. Another great resource is the growing list of <a href="https://developer.microsoft.com/en-us/graph/code-samples-and-sdks">samples</a> on <a href="https://github.com/microsoftgraph">GitHub</a>. Already an ASP.NET developer? Check out the <a href="https://github.com/search?q=aspnet+sample+user:microsoftgraph&type=Repositories">ASP.NET Samples</a>.</p>
<h2 id="conclusion">Conclusion</h2>
<p>This concludes exploring the Microsoft Graph. Albeit, the exploration is very high-level, but it is enough to get an understanding of what services the Graph provides. This was intended to be a high-level introduction the Microsoft Graph and expect to dive deeper into solving actual problems using the Graph and ASP.NET Core in future posts. Happy coding!</p>Eric D. Rohlerhttps://www.ericrohler.com/about/Get started exploring the Microsoft Graph with this brief overview of services, capabilities and find links to samples.October 2017 Office 365 Updates2017-10-12T16:02:08-04:002017-10-12T16:02:08-04:00https://www.ericrohler.com/blog/october-2017-office-365-updates<p>Each month, the Office team at Microsoft releases updates to the Office desktop software and Office 365. <a href="https://www.linkedin.com/in/jimnaroski/">Jim Naroski</a> posts a video to the Office Videos <a href="https://www.youtube.com/playlist?list=PLXPr7gfUMmKwn422HmCx7b7D5qh9T6frb">YouTube channel</a> every month. This post is a summary of the October 2017 Office 365 Updates video and where to find more information. Enjoy!</p>
<h2 id="links">Links</h2>
<ul>
<li>
<p><a href="https://support.office.com/en-us/article/Get-creative-with-3D-models-ec5feb79-b0af-47f6-a885-151fcc88ac0a?ui=en-US&rs=en-US&ad=US">Insert 3D Objects</a></p>
<ul>
<li>Just like with images, you can insert 3D models into Word, PowerPoint. Use Microsoft’s new</li>
</ul>
</li>
<li>
<p>PowerPoint</p>
<ul>
<li><a href="https://translator.microsoft.com/help/presentation-translator/">Presentation translator</a> add-in</li>
<li><a href="https://appsource.microsoft.com/en-us/product/office/wa104379840?src=office&corrid=99d8a8ba-5d1b-45a3-beb7-bd524ba713db&omexanonuid=aefac1b7-cd35-401f-aec0-15655798613e">Live Survey</a> add-in</li>
</ul>
</li>
<li>
<p>Excel</p>
<ul>
<li><a href="https://blogs.office.com/en-us/2017/06/30/june-2017-updates-for-get-transform-in-excel-2016-and-the-power-query-add-in/">Get and Transform</a> Updates</li>
</ul>
</li>
<li>
<p>PowerBI</p>
<ul>
<li><a href="https://powerbi.microsoft.com/en-us/blog/filters-coming-for-phone-reports-on-ios/">Report filters</a> for iOS</li>
</ul>
</li>
<li>
<p>Outlook</p>
<ul>
<li><a href="https://blogs.office.com/en-us/2017/09/08/your-favorite-apps-now-in-outlook-on-android/">Android Add-ins</a></li>
<li>
<p>New Add-ins</p>
<ul>
<li>Team Project Management using <a href="https://www.wrike.com/vo/?utm_expid=75732941-97.JUpGMrzTREiJpOTrzMpZ_g.2&utm_referrer=https%3A%2F%2Fwww.bing.com%2F">Wrike</a></li>
<li>Track tasks with <a href="https://www.meistertask.com/">Meister Task</a>.</li>
<li>Insert gif files into emails with <a href="https://gfycat.com/">GyfyCat</a>.</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Teams</p>
<ul>
<li><a href="https://blogs.office.com/en-us/2017/09/11/expand-your-collaboration-with-guest-access-in-microsoft-teams/">Guest Access</a></li>
</ul>
</li>
<li>
<p>Yammer</p>
<ul>
<li><a href="https://mix.office.com/watch/1xouea2p1a7e5">Search, pick and insert gifs</a></li>
</ul>
</li>
</ul>
<h2 id="video">Video</h2>
<p>Prefer the video? Check out the video:</p>
<iframe src="https://www.youtube.com/embed/qwEWCuPxNyw" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>Eric D. Rohlerhttps://www.ericrohler.com/about/Check out the October 2017 Office 365 Updates the Office team at Microsoft has released to the Office desktop software and Office 365.Creating a Facebook Page Newsletter Signup Form2017-10-10T17:23:41-04:002017-10-10T17:23:41-04:00https://www.ericrohler.com/blog/creating-a-facebook-page-newsletter-signup-form<p>Recently, I started subscribing my blog visitors to a newsletter. Also, signup below and thank you. Anyway, I started using <a href="https://mailchimp.com/">MailChimp</a> which is a good service and offers a Facebook Page app for free. Alas, I went ahead and integrated MailChimp into my <a href="https://www.facebook.com/ericrohlertech">Facebook Page</a>. However, I found that there was limited customization to the form. For example, I couldn’t reorder or disable the fields. This left the form appearing very odd like asking for a date of birth. Don’t get me wrong, in some cases, that can be necessary but not mine. I wanted just a simple form with First Name, Last Name and Email. As a result, I scoured the interwebs and came across this <a href="https://www.sunarlim.com/2017/01/mailchimp-subscribe-form-php-jquery-api3/">post</a> which was exactly what I was looking for creating a newsletter signup for a Facebook page. Unfortunately, and as with many blog tutorials, they only take you so far and the rest you need to figure out on your own. That is like all of life overall, really. Anyhow, after reading through the post I found a few items I needed.</p>
<ol>
<li>I wanted to store my code publicly in <a href="https://github.com/edrohler/MailChimp-FB-Subscribe-Form">GitHub</a> and I don’t want to store my super-secret MailChimp API keys in code. This is just bad practice and never do it.</li>
<li>After a form completes successfully, it should clear the fields. That’s just good user experience and always do it.</li>
<li>I wanted to host this on Microsoft Azure because they have a free websites tier which includes SSL for the azurewebsite.net domain. Which is perfect for a simple Facebook App.</li>
</ol>
<p>All right that about sums it up, let’s start creating a newsletter signup for a Facebook page using MailChimp, PHP and jQuery.</p>
<h2 id="what-ls-needed">What ls Needed</h2>
<ol>
<li>A Facebook Page</li>
<li>A MailChimp Account</li>
<li>A Microsoft Azure Account</li>
</ol>
<p>Don’t have these? I recommend going to <a href="https://www.facebook.com/pages/create.php">Facebook</a>, <a href="https://login.mailchimp.com/signup/">MailChimp</a> and <a href="https://azure.microsoft.com/en-us/free/?v=17.39a">Azure</a> to create an account. I will not bore anyone with those details.</p>
<h2 id="software-i-am-using">Software I am Using</h2>
<ul>
<li>Visual Studio Code</li>
<li>FileZilla</li>
<li>Firefox Developer Edition</li>
</ul>
<h2 id="overview-of-steps">Overview of Steps</h2>
<ol>
<li>Gather MailChimp API Key and List Id</li>
<li>
<div>Create Azure Website
1. Add Api Key and List Id to Azure Website Application Settings
</div>
</li>
<li>
<div>Create Facebook App
1. Add Facebook App to Facebook Page
</div>
</li>
<li>Clone this <a href="https://github.com/sunarlim/mailchimp-subscribe-api-v3">GitHub Repository</a></li>
<li>Create validator.js File</li>
<li>Customize index.php File</li>
<li>Customize subscribe.php File</li>
<li>Add web.config File</li>
<li>Deploy to Azure</li>
<li>Test on Facebook Page</li>
</ol>
<h2 id="gather-mailchimp-api-key-and-list-id">Gather MailChimp API Key and List Id</h2>
<h3 id="getting-an-api-key">Getting an Api Key</h3>
<p>Navigate to your account</p>
<p><img class="img-fluid" alt="mailchimp account link" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe1.png" /></p>
<p>Select API Keys under Extras</p>
<p><img class="img-fluid" alt="mailchimp api keys link" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe2.png" /></p>
<p>Select create key</p>
<p><img class="img-fluid" alt="mailchimp creat api key button" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe3.png" /></p>
<p>Copy the provided API Key and store it somewhere safe.</p>
<h3 id="getting-your-list-id">Getting your List Id</h3>
<p>Navigate to your lists</p>
<p><img class="img-fluid" alt="mailchimp account lists link" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe4.png" /></p>
<p>Select your list</p>
<p><img class="img-fluid" alt="mailchimp list link" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe5.png" /></p>
<p>Choose List Name and Defaults from the settings drop down</p>
<p><img class="img-fluid" alt="mailchimp lists name and defaults link" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe6.png" /></p>
<p>In the top right column is your List ID section</p>
<p><img class="img-fluid" alt="mailchimp list id" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe7.png" /></p>
<p>Grab that and store it in a safe place, preferably, the same place as the API Key</p>
<h2 id="create-an-azure-web-app-in-the-free-tier">Create an Azure Web App in the free tier</h2>
<p>Select the large plus sign at the top left</p>
<p><img class="img-fluid" alt="azure new resource link" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe8.png" /></p>
<p>Search Web App</p>
<p><img class="img-fluid" alt="azure resource search ui" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe9.png" /></p>
<p>Enter the required information.</p>
<p>Two things:</p>
<ol>
<li>Turn on app insights it is an amazing resource for debugging, views and availability.</li>
<li>Make sure to create an App Service Plan in the free tier.</li>
</ol>
<p><img class="img-fluid" alt="azure create app service form" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe10.png" /></p>
<h3 id="add-api-key-and-list-id-to-website-settings">Add Api Key and List Id to Website Settings</h3>
<p>Select resource groups from the top left of the navigation bar</p>
<p><img class="img-fluid" alt="azure resource group navigation button" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe11.png" /></p>
<p>Select your new resource group</p>
<p><img class="img-fluid" alt="azure resource group link" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe12.png" /></p>
<p>Select Application Settings</p>
<p><img class="img-fluid" alt="azure web app application settings link" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe13.png" /></p>
<p>Scroll down to the App settings section and enter the following</p>
<p><img class="img-fluid" alt="azure app settings form" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe14.png" /></p>
<h3 id="delete-the-additional-default-documents">Delete the Additional Default Documents</h3>
<p>Keep the index.php but remove the rest.</p>
<p><img class="img-fluid" alt="azure web app default document list" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe15.png" /></p>
<p>Save your changes</p>
<p><img class="img-fluid" alt="azure app settings save button" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe16.png" /></p>
<h2 id="create-facebook-app">Create Facebook App</h2>
<p>This is straight forward. Head over to developers.facebook.com, setup your account and select add a new app.</p>
<p><img class="img-fluid" alt="facebook add a new app drop down" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe17.png" /></p>
<p>Add your display name and email.</p>
<p><img class="img-fluid" alt="facebook create a new app id form" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe18.png" /></p>
<p>Here it will land on the select product page, don’t bother with this. Just go to Settings.</p>
<p><img class="img-fluid" alt="facebook app settingsd navigation button" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe19.png" /></p>
<p>Select + Add Platform and choose Page Tab</p>
<p><img class="img-fluid" alt="facebook add platform ui" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe20.png" /></p>
<p>On the App and Page Tab section enter your app domain, Secure Page Tab URL and Page Tab Name</p>
<p><img class="img-fluid" alt="facebook page tab and app id settings" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe21.png" /></p>
<p>Save Your Changes.</p>
<h3 id="adding-the-app-to-your-page">Adding the App to your Page</h3>
<p>Simply, sign in, edit the below URL with the app id and secure page tab URL, navigate to it via web browser and select the desired page.</p>
<p><a href="http://www.facebook.com/dialog/pagetab?app_id=FB_APP_ID&next=FBAPP_SECURE_URL">http://www.facebook.com/dialog/pagetab?app_id=FB_APP_ID&next=FBAPP_SECURE_URL</a></p>
<h2 id="clone-github-repository">Clone GitHub Repository</h2>
<p>Navigate to your repos folder</p>
<p><img class="img-fluid" alt="command prompt to navigate to development folder" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe22.png" /></p>
<p><img class="img-fluid" alt="command prompt to clone git repo" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe23.png" /></p>
<h2 id="create-the-validatorjs-file">Create the validator.js File</h2>
<p>Below is the validator.js file. Just move the original code into this file and reference in the index.php file.</p>
<p><img class="img-fluid" alt="validator.js file snapshot" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe24.png" /></p>
<p>There is really no change compared to the original post. Furthermore, there was a comment on the post to clear the form upon successful submission. The writer said to just use the submit handler with some added code to the post function. However, this would clear the form each time and the end user would need to re-enter their information. Not a good user experience. I moved the functionality to the subscribe.php document on a failed submission as noted below.</p>
<h2 id="customize-indexphp">Customize index.php</h2>
<p>At this point, anyone can go and download my GitHub <a href="https://github.com/edrohler/MailChimp-FB-Subscribe-Form">repo</a>, deploy it to Azure and have an app up and running but I want to discuss the changes I made to index.php. Below is the code:</p>
<p><img class="img-fluid" alt="index.php file snapshot" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe25.png" /></p>
<p>First, I moved the jQuery script into an external file source appropriately named validator.js. Having JS in your HTML is untidy. Second, I moved the references to JavaScript files below the content in the body. This gives a perceived faster page load time.</p>
<h2 id="customize-the-subscribephp-file">Customize the subscribe.php File</h2>
<p>I improved the subscribe file with 2 changes.</p>
<h3 id="code-for-the-first-section">Code for the first section.</h3>
<p><img class="img-fluid" alt="subscribe.php file snapshot 1" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe26.png" /></p>
<p>The added section removes the Api Key and List Id hard coded variables. In addition, I search the folder for a debug.ini file to read debug settings if developing locally which I provide a detailed walkthrough <a href="https://www.ericrohler.com/blog/wordpress-development-environment-on-windows/">here</a> on a Windows machine. If the file is missing, I then do a switch case on the key/value pairs of server variables which includes the application settings we manually set in the Add Api Key and List Id to Website Settings section. This enables scalability and simple change configuration management.</p>
<h3 id="code-for-the-second-section">Code for the second section.</h3>
<p><img class="img-fluid" alt="subscribe.php file snapshot 2" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe27.png" /></p>
<p>In the second change, I echo out a script to clear out the form on success. If the MailChimp Api fails, I only output a dummy message. Before, it was reading out a verbose message which I do not want end users reading or even thinking about.</p>
<h2 id="add-custom-webconfig-file">Add Custom Web.config File</h2>
<p>The final file that I added is optional and only needed for hosting on Azure or IIS. The infamous web.config file. Below is the code.</p>
<p><img class="img-fluid" alt="web.config file snapshot" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe28.png" /></p>
<p>I created rules to force SSL redirect and rewrite all requests to index.php. This is because Facebook forces all apps to use SSL and Azure web apps provides a free SSL with the azurewebsites.net domain. In addition, I don’t want people hijacking requests using different default documents which is why I removed them in the Create Azure Web App step. I personally don’t think forcing SSL is a terrible thing. Every website should do it.</p>
<h2 id="deploy-to-azure">Deploy to Azure</h2>
<p>In the web app on Azure, navigate to your web app</p>
<p><img class="img-fluid" alt="azure web app link" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe29.png" /></p>
<p>Select get publish profile and save it in a safe place</p>
<p><img class="img-fluid" alt="azure web app get resource publish profile button" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe30.png" /></p>
<p>The publish settings file is just xml with a different file extension. In the publish settings file, search for FTP and grab the Host, Username and Password and enter them in your favorite FTP client.</p>
<p><img class="img-fluid" alt="filezilla ftp client site manager" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe31.png" /></p>
<p>Copy your files over to the wwwroot folder in Azure and voila! App deployed.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Navigate to the Facebook page and there it is.</p>
<p><img class="img-fluid" alt="newsletter signup form on facebook page" src="/assets/img/20171010CreatingaNe/101017_2105_CreatingaNe32.png" /></p>
<p>Now, go forth and style the form as desired. In fact, I plan to add the MailChimp icon so that end users are more comfortable providing their first name, last name and email.</p>
<p>For the record, I am aware that I could’ve just deployed the original post’s GitHub <a href="https://github.com/sunarlim/mailchimp-subscribe-api-v3">repo</a> with my super-secret keys in the code and it would work just fine. But I am a stickler for best practice and simplicity. Knowingly, it seems simpler to just put the repo out there but if I take extra care to deploy and configure the app properly, in the long-run, it is simpler. Trust me. Lastly, my GitHub repository is <a href="https://github.com/edrohler/MailChimp-FB-Subscribe-Form">here</a>. Please feel free to reach out if you have any questions. Happy dev’ing.</p>Eric D. Rohlerhttps://www.ericrohler.com/about/The default MailChimp Facebook integration form customization options are limited. Check out Creating a Newsletter Signup for a Facebook Page.Development Opportunities in Office 3652017-10-08T16:12:00-04:002017-10-08T16:12:00-04:00https://www.ericrohler.com/blog/development-opportunities-in-office-365<p>Office 365 is a vast platform and every project has a research phase to discover the best approach. This last week I have been researching development opportunities in office 365. In doing this, I found a great resource; the <a href="https://academy.techcommunity.microsoft.com/">Microsoft Tech Academy</a>. The resource includes free training itemized under pathways. I went ahead and organized my learning using the bookmarks, due date and pathways features. The pathways I will be completing are the <a href="https://academy.techcommunity.microsoft.com/pathways/learningpath/69ab589e-6f80-49e7-9b5b-4b0dd6160113">Microsoft Ignite 2017: Office Development</a> and <a href="https://academy.techcommunity.microsoft.com/pathways/learningpath/3e431b41-279f-4295-8d70-62688a655f58">Developing with the SharePoint Framework</a>. Additionally, I set a due date for October 26 and am registered for the <a href="https://www.eventbrite.com/e/office-365-developer-bootcamp-focus-on-sharepoint-framework-tickets-37672818414">Global Office 365 Developer Bootcamp</a> in Boston on the 27<sup>th</sup>. Furthermore, couple these learning opportunities with my experience using Office 365 and this should give me enough ammunition to make a serious dent in the hack productivity hackathon.</p>
<h2 id="where-to-start">Where to Start</h2>
<p>I am never afraid to review documentation, and no one should be. I have always appreciated Microsoft’s efforts in creating excellent documentation with walkthroughs. Honestly, that is the best way to learn. Head over to <a href="https://dev.office.com/docs">dev.office.com/docs</a> to find excellent documentation on development opportunities in Office 365. Office development includes e add-ins, connectors and the Microsoft Graph. For reference, I give the links here:</p>
<ul>
<li><a href="https://dev.office.com/docs/add-ins/overview/office-add-ins">Office Add-ins</a></li>
<li><a href="https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/sharepoint-add-ins">SharePoint Add-ins</a></li>
<li><a href="https://docs.microsoft.com/en-us/outlook/actionable-messages/">Office 365 Connectors</a></li>
<li><a href="https://developer.microsoft.com/en-us/graph/docs/concepts/overview">Microsoft Graph</a></li>
</ul>
<p>Moreover, I have found that Microsoft is grouping these development opportunities into 3 areas. The Microsoft Graph, Office Canvases and custom experiences. Let’s review these 3 areas starting with the Microsoft Graph.</p>
<h3 id="the-microsoft-graph">The Microsoft Graph</h3>
<p>This is the backbone of everything Office development. It is a single endpoint API to access data in Office. The capabilities of the Graph are quite large. Just to name a few, you can create, read, update and remove data about users, groups and mail. I am not going to go over everything available, but this is a suitable place to start when discovering what you can do with Office development. The below graphic, taken directly from Microsoft, provides an example of what possibilities exist with the Microsoft Graph. Additionally, the list of capabilities is always growing with each updated version.</p>
<p><img class="img-fluid" alt="microsoft graph graphic" src="/assets/img/20171008Development/100817_1856_Development1.png" /></p>
<h2 id="extending-office">Extending Office</h2>
<h3 id="the-office-canvases">The Office Canvases</h3>
<p>These are the SharePoint and Office Add-ins. Add-ins extend the existing applications like Word, Outlook, PowerPoint, Excel and SharePoint. These are applications that can run in Office clients or embedded in Office documents. The only requirements are a web server, HTML, JavaScript and CSS skills and a manifest. But the extensibility doesn’t stop there. At its simplest form, an Add-in would be just an HTML page but using the Microsoft Graph and developing a custom service is where the magic really happens. Honestly, this is a great replacement for VBA and COM add-ins. I got my start developing professionally using VBA and it was a headache to support and distribute updates. This new add-in model allows the ability write and update in one place using the Office Store. Read more about the platform <a href="https://dev.office.com/docs/add-ins/overview/office-add-ins">here</a>.</p>
<h2 id="custom-experiences">Custom Experiences</h2>
<h3 id="includes-the-kitchen-sink">Includes the Kitchen Sink</h3>
<p>To really build productivity a custom experience is necessary, and will be my focus for the Hack Productivity hackathon. For example, a custom experience might include a web application, add-ins and a mobile application. Additionally, when I think of custom experiences I think of services like <a href="https://www.wunderlist.com/">Wunderlist</a> which includes a mobile application, a website and an Outlook add-in. There are really no limits with this approach other than imagination.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Honestly, this has only scratched the surface of development opportunities in Office 365, but it gives a good starting point. More opportunities include Bots, Connectors, Power Apps and Flow but each of these integrate nicely with Add-ins and custom experiences. Furthermore, the Microsoft Graph is the basis for all development in Office 365. Moreover, building quality productivity in Office will need knowledge of the Microsoft Graph. Find out more about the Microsoft Graph <a href="https://developer.microsoft.com/en-us/graph/">here</a> and even try out its capabilities <a href="https://developer.microsoft.com/en-us/graph/graph-explorer">here</a>. Finally, I will be streaming my experience with the Hack Productivity hackathon every weekday, 12:30pm-2:30 Eastern, at any of my broadcast channels which you can find on my <a href="https://www.ericrohler.com/">homepage</a>.</p>Eric D. Rohlerhttps://www.ericrohler.com/about/Office 365 development platform is vast and deciding where to start can be difficult. Read this overview of the development opportunities in office 365.Let’s Build Some Productivity Tools in Hack Productivity 32017-10-02T20:34:04-04:002017-10-02T20:34:04-04:00https://www.ericrohler.com/blog/lets-build-some-productivity-tools-in-hack-productivity-3<p>I use Office 365 for business and personal use. This is because I live by the notion to run my life as if it were a business and am a big proponent of efficiency and productivity. Some tools that I have used are short-term and long-term goal sheets and daily to-do lists. I mainly type out my goals in a word document then create a weekly schedule using excel and hand type a daily to do list. I have done this since my freshman year in college. It has worked.</p>
<p>However nowadays, there are new tools at my disposal that I could be using and many of these are available with Office 365 Business Premium. These tools are, <a href="https://todo.microsoft.com/en-us">To-Do</a>, <a href="https://teams.microsoft.com">Teams</a>, <a href="https://tasks.office.com">Planner</a> and <a href="https://support.office.com/en-us/article/Publish-your-business-calendar-online-with-Microsoft-Bookings-47403d64-a067-4754-9ae9-00157244c27d?ui=en-US&rs=en-US&ad=US">Bookings</a>. These include everything any person or team needs to be productive. Unsurprisingly, there is no such thing as a perfect solution which brings me to the purpose of this post. I am taking part in the Office 365 Hack Productivity Hackathon. The purpose of the hackathon is to build upon the incredible productivity tools available in Office 365. This is not limited to the tools that I previously mentioned. The submissions can be integration’s, new apps or office add-ins, etc. It looks to be a great opportunity for anyone interested in building office tools. I am looking forward to exploring some of my ideas of how to improve a few tools through workflow integration and application.</p>
<h2 id="learn-more">Learn More</h2>
<p>If this interests you, I highly recommend following this <a href="https://office365hack3.devpost.com/">link</a>. In addition to the information provided at the link, there is a <a href="https://developer.microsoft.com/en-us/office/events">Office 365 Developer Bootcamp</a> where you can get your hands dirty developing and learning. Follow the link to find where these events are found. For the record, I took part in the first annual <a href="https://global.azurebootcamp.net/">Global Azure Bootcamp</a> in 2013 and it was incredibly rewarding.</p>
<h2 id="conclusion">Conclusion</h2>
<p>I learn by doing as I am sure many developers and designers do. Participating in this hackathon is a great way to learn by doing. You can also win cool prizes which include cash, a Surface Book and SWAG! Interested in teaming up? Find me on the devpost link and I will be happy to share ideas and see what we can build.</p>
<h3 id="shameless-plug">Shameless Plug</h3>
<p>If you are a business owner and you want to operate more efficiently I can get you setup with Office 365 just follow this <a href="https://portal.office.com/partner/partnersignup.aspx?type=Trial&id=bca07180-f745-4c04-9142-150c0caa1af5&msppid=4676872">link</a> for a trial and my dedicated support which includes setup and configuration. Additionally, I will train your users how to be more productive in Office 365.</p>Eric D. Rohlerhttps://www.ericrohler.com/about/Join me and let's hack productivity and improve on our productivity skills by participating in the Hack Productivity 3 Hackathon.Setup Orchard Core Development Environment2017-09-29T16:35:16-04:002017-09-29T16:35:16-04:00https://www.ericrohler.com/blog/setup-orchard-core-development-environment<p>If you’ve been following along, I am certain you have started to understand my slight frustration with WordPress. I am not sure I am going to fully abandon the application because there is a need for it. But, at the heart of my development skills, I am a <a href="https://www.microsoft.com/net">.NET</a> developer and I learned my web development on <a href="https://www.asp.net/">ASP.NET</a> and <a href="https://en.wikipedia.org/wiki/C_Sharp_%28programming_language%29">C#</a>. Which brings me to the purpose of this post.</p>
<p>I am looking for a CMS that meets a few requirements. First, it should be easily extendable. Second, it should be fast and last it should be modern. Alas, I am going to start working with <a href="https://github.com/OrchardCMS/OrchardCore">Orchard Core</a> which is currently in <del>alpha</del> beta, meaning, it is not ready for production. The Orchard CMS meets my criteria because its sole purpose is to be extendable which satisfies my first requirement. The latter two points are satisfied using Orchard Core which is the 2<sup>nd</sup> version. Orchard Core was rebuilt using ASP.NET Core which is the next iteration of ASP.NET and it is <a href="https://msit.powerbi.com/view?r=eyJrIjoiYTZjMTk3YjEtMzQ3Yi00NTI5LTg5ZDItNmUyMGRlOTkwMGRlIiwidCI6IjcyZjk4OGJmLTg2ZjEtNDFhZi05MWFiLTJkN2NkMDExZGI0NyIsImMiOjV9">faster</a> and <a href="https://github.com/aspnet/home">modern</a>. You can review the links for details on how it achieves these requirements. In this post, I am going to walk through how to setup Orchard Core for development.</p>
<h3 id="what-you-will-need">What You Will Need:</h3>
<ol>
<li>Text Editor: <a href="https://code.visualstudio.com/">Visual Studio Code</a> or IDE: <a href="https://www.visualstudio.com/vs/community/">Visual Studio Community</a> (These are FREE!)</li>
<li><a href="https://www.microsoft.com/net/download/core">.Net Core SDK and Runtime</a></li>
<li><a href="https://git-scm.com/">Git</a></li>
<li><a href="https://nodejs.org/en/">Node.js</a></li>
<li><a href="https://github.com/OrchardCMS/OrchardCore">Orchard Core Source Code</a></li>
</ol>
<h3 id="prep">Prep</h3>
<p>Organize your development folder. I use a folder titled, dev, on an external HD. From here I store all my cloned git repositories in a folder titled repo.</p>
<p><img class="img-fluid" alt="organize dev folder" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar1.png" /></p>
<h2 id="getting-the-source-code">Getting the Source Code</h2>
<p>Fire up your favorite command line application. I just use PowerShell because. To open your native command line shell in windows, press windows key + x + a</p>
<p><img class="img-fluid" alt="open command line" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar2.png" /></p>
<p>Navigate (cd) to your dev folder</p>
<p><img class="img-fluid" alt="cd into dev folder" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar3.png" /></p>
<p>Grab the repo link</p>
<p><img class="img-fluid" alt="copy git clone link" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar4.png" /></p>
<p>Git clone the repo link</p>
<p><img class="img-fluid" alt="clone the repository" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar5.png" /></p>
<p>Navigate into the Orchard Core directory</p>
<p><strong>TIP</strong>: when you are typing you can partially type Orchard and tab to list the folder</p>
<p><img class="img-fluid" alt="tab shortcut when partially typing" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar6.png" /></p>
<h2 id="building-the-source-code">Building the Source Code</h2>
<p>Call dotnet restore</p>
<p><img class="img-fluid" alt="dotnet restore" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar7.png" /></p>
<p>Call dotnet build</p>
<p><img class="img-fluid" alt="dotnet build" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar8.png" /></p>
<h2 id="launching-the-site">Launching the Site</h2>
<p>Navigate to \src\OrchardCore.Cms.Web\</p>
<p><img class="img-fluid" alt="cd into OrchardCore.Cms.Web" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar9.png" /></p>
<p>Call dotnet run</p>
<p><img class="img-fluid" alt="call dotnet run" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar10.png" /></p>
<p>When it’s ready to go you will see this notification</p>
<p><img class="img-fluid" alt="dotnet run command line response" src="/assets/img/20170929SetupOrchar/092917_2031_SetupOrchar11.png" /></p>
<p>And voila! You have Orchard Core up and running.</p>
<h2 id="conclusion">Conclusion</h2>
<p>That development environment is incredibly easy to setup. It took me less than half an hour and I didn’t fumble with anything. I imagine some are saying, yeah but it is .NET and easy on Windows. All I have to say to you now is, the modern .NET is cross-platform and doesn’t play favorites when it comes to operating systems. So, Macintosh, any Linux flavor and Windows are all easy to get started on. Learn more here and if you really want to learn the new Orchard Core CMS check out this video. After watching the video, I realized how great Orchard Core is compared to WordPress and will be doing all of my development on that platform going forward.</p>Eric D. Rohlerhttps://www.ericrohler.com/about/Getting started with Orchard Core Development is pretty quick, painless and cross-platform. Follow this walk through to learn more.Setting Up a WordPress Development Environment on Windows2017-09-25T11:56:51-04:002017-09-25T11:56:51-04:00https://www.ericrohler.com/blog/wordpress-development-environment-on-windows<p>Let’s face it, in today’s information age, content is king. To put it more accurately, anyone trying to be a successful on the interwebs needs to quickly create and present great content. Therefore, content management systems (CMS) are heavily used. I don’t know how accurate this is but it has been said that WordPress is the most user-friendly and most used CMS on the internet. However, WordPress has been traditionally hosted on Linux servers. It should be no surprise that I am a Windows user and host everything on Microsoft Azure. Per my <a href="https://www.ericrohler.com/blog/migrating-a-wordpress-db-from-mysql-in-app-to-mysql-on-azure/">previous post</a> and thanks to Azure’s new MySQL services, you can host a WordPress in Azure’s App Service which is actually an instance of Internet Information Services (IIS).</p>
<h2 id="where-i-am">Where I am</h2>
<p>So, here I am a Windows user with a background in .NET and I have a WordPress on Azure which uses IIS and MySQL. Unfortunately, most of the features available in WordPress just do not meet the needs of, well, anyone. There is always a need to add plugins and create themes. Think about it, you have authentication, SEO, email/SMTP and marketing plugins and if every website looked the same the internet would be boring. In addition, themes out-of-the-box are too simplified. Now, many of the plugins and themes are free until you want to customize to your liking and then you pay and it is ridiculous. Yes, I am calling your overpriced plugins or themes ridiculous. Accept it. I get it, everyone needs to make a living but for small businesses and users your pricing models are excessive.</p>
<h2 id="side-note">Side Note</h2>
<p>I imagine you are getting a sense of my frustrations with WordPress. But before you ask, I have used <a href="http://projectnami.org/">project nami</a> which is a great platform if you don’t mind waiting to use some plugins following a new release of WordPress. Additionally, I have used other .NET Framework blogging engines but the development efforts have been extensive because of the lack of plugins or themes. Lastly, the market for good WordPress plugins and themes is HUGE because everyone seems to want a WordPress and everyone seems to build poor themes and plugins. As a result, I ultimately chose WordPress, that is, until the new version of <a href="http://www.orchardproject.net/">Orchard</a> is available, wink, wink.</p>
<p>Anyway, fortunately, I am a developer and can build plugins and themes myself. Because, as the adage goes, if you want something done your way then do it yourself. (I know that is not the actual adage but this is the more honest form) This brings me to the purpose of this post. After a few months of using WordPress I need a way to develop plugins and themes. But remember, I am a Windows user with my WordPress on IIS. So, let’s get started building a WordPress development environment on Windows.</p>
<h2 id="overview">Overview</h2>
<p>What you Need:</p>
<ul>
<li>Any text editor but I recommend <a href="https://code.visualstudio.com/">Visual Studio Code</a></li>
<li><a href="https://www.microsoft.com/web/downloads/platform.aspx">Web Platform Installer</a> (WPI)</li>
<li><a href="https://www.iis.net/">Internet Information Services (IIS)</a></li>
<li><a href="https://wordpress.org/download/">WordPress Source Code</a></li>
<li><a href="https://dev.mysql.com/downloads/mysql/">MySQL</a></li>
<li><a href="https://dev.mysql.com/downloads/workbench/">MySQL Workbench</a></li>
</ul>
<h3 id="short-version">Short Version</h3>
<ol>
<li>Download and Install
<ul>
<li>Visual Studio Code</li>
<li>Web Platform Installer</li>
<li>WordPress Source Code</li>
<li>MySQL
<ul>
<li>Note: always create a username and password during your install for admin on your dev MySQL; do not use root.</li>
<li>MySQL Workbench</li>
</ul>
</li>
</ul>
</li>
<li>Install IIS from the Windows Features option in Windows 10</li>
<li>Install PHP from Web Platform Installer
<ul>
<li>Note: There is an <a href="https://phpmanager.codeplex.com/workitem/2653">issue</a> with the PHP Manager for IIS that requires a <a href="https://answers.microsoft.com/en-us/windows/forum/windows_10-other_settings/php-manager-for-iis-on-windows-10/33ef32f0-6a86-4803-abc1-6de81110f9a8">registry hack</a></li>
</ul>
</li>
<li>Unpack WordPress to specified dev folder
<ul>
<li>Create <a href="https://docs.microsoft.com/en-us/iis/application-frameworks/install-and-configure-php-on-iis/install-and-configure-php">phpinfo.php</a> and debug.ini files for development purposes
<ul>
<li>Debug.ini contains db connection using custom <a href="https://gist.github.com/edrohler/48d4d758eea499c16b761abccfb4309e">wp-config.php</a>, see below for details</li>
</ul>
</li>
</ul>
</li>
<li>Create Web Application in IIS
<ul>
<li>Point it to your dev folder for WordPress</li>
<li>Add SSL binding and dev cert when creating IIS application
<ul>
<li>Just make a habit to NOT EVER OPERATE A WEBSITE WITHOUT SSL.</li>
</ul>
</li>
</ul>
</li>
<li>Edit host file in <code class="highlighter-rouge">C:\Windows\System32\Drivers\etc</code> folder with binding from IIS web application</li>
</ol>
<h3 id="long-version">Long Version</h3>
<h4 id="download-and-install-all-the-goods">Download and Install all the goods</h4>
<p>(see overview above)</p>
<h4 id="install-iis-using-windows-features">Install IIS using Windows Features:</h4>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW1.png" alt="turn windows features on or off" /></p>
<p>Hit your Windows Key + S and search for features to turn on additional Windows features</p>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW2.png" alt="select IIS" /></p>
<p>Click the Internet Information Services check box.</p>
<p>NOTE: You don’t need EVERYTHING under this node. Just click it once and all that you need will be included</p>
<h4 id="open-iis">Open IIS</h4>
<p>Once installation is complete you can open IIS by searching for IIS and opening the IIS Manager app</p>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW3.png" alt="open IIS app" /></p>
<h4 id="install-php-and-php-manager">Install PHP and PHP Manager</h4>
<p>Open WPI (Windows + s) and search for web</p>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW4.png" alt="open WPI" /></p>
<p>When you install PHP from WPI it includes everything you need. Thank you, Microsoft!</p>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW5.png" alt="install php from WPI" /></p>
<p>NOTE: There is an <a href="https://phpmanager.codeplex.com/workitem/2653">issue</a> with the PHP Manager for IIS that requires a <a href="https://answers.microsoft.com/en-us/windows/forum/windows_10-other_settings/php-manager-for-iis-on-windows-10/33ef32f0-6a86-4803-abc1-6de81110f9a8">registry hack</a></p>
<p>I don’t endorse hacking the registry and it could damage your machine. Just a heads up, you do this at your own risk.</p>
<h4 id="unpack-wordpress-into-specified-dev-folder">Unpack WordPress into specified dev folder</h4>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW6.png" alt="unpack WordPress" /></p>
<p>Add phpinfo.php and debug.ini to dev folder</p>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW7.png" alt="add phpinfo.php" /></p>
<h5 id="a-note-on-these-files">A note on these files:</h5>
<ol>
<li>The files should only be used in development, seriously. Keep them out of your source code.</li>
<li>The phpinfo.php file is for checking your server settings. It is one line of code.</li>
<li>The debug.ini file contains your development server info to read into your wp-config.php file.</li>
</ol>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW8.png" alt="create debug.ini" /></p>
<p>Before you launch the application make sure you create the database schema in your MySQL instance.</p>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW9.png" alt="creeate MySQL schema" /></p>
<p>Download and use this <a href="https://gist.github.com/edrohler/48d4d758eea499c16b761abccfb4309e">wp-config.php</a> file instead of the file included in the source. Delete the wp-config-sample.php file too.</p>
<ol>
<li>The wp-config.php file is so that you can deploy your WordPress on any server and read settings from the server config there.</li>
<li>If you use git for source control, be sure to add the 2 files to your .gitignore. DO NOT DEPLOY THEM!</li>
</ol>
<h4 id="create-the-application-in-iis">Create the Application in IIS</h4>
<p>Right-click add website in IIS manager</p>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW10.png" alt="add website in IIS" /></p>
<p>Create a name for your site, add the physical path and ensure you use https and create a host name</p>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW11.png" alt="add website dialog" /></p>
<h4 id="edit-the-hosts-file">Edit the hosts file</h4>
<p><img class="img-fluid" src="/assets/img/20170925SettingUpaW/092517_0140_SettingUpaW12.png" alt="edit hosts file" /></p>
<p>Add the ip: 127.0.0.1 and the host name you chose above.</p>
<p><code class="highlighter-rouge">EX: 127.0.0.1 wordpress.dev</code></p>
<h2 id="conclusion">Conclusion</h2>
<p>You can now launch your development WordPress website. After the initial setup you will be at the admin dashboard and ready to go. With the exception of the PHP Manager bug, it is actually pretty simple and there are other ways to do this but doing it this way keeps everything nice and tidy; no additional programs to install and I can just copy each new WordPress build over the existing files. Anyway, I will most likely be moving off WordPress at the beginning of next year and will probably start developing on <a href="https://github.com/OrchardCMS/OrchardCore">Orchard Core</a> before then but this is here for anyone that needs it and my reference should I come back to WordPress. If you have any questions please don’t hesitate to reach out. Happy building!</p>Eric D. Rohlerhttps://www.ericrohler.com/about/I have been using WordPress for a few months and want to build stuff. Let's get started building a WordPress development environment on WindowsMigrating a WordPress DB from MySQL in-app to MySQL on Azure2017-05-13T03:15:05-04:002017-05-13T03:15:05-04:00https://www.ericrohler.com/blog/migrating-a-wordpress-db-from-mysql-in-app-to-mysql-on-azure<p>Let me tell you a secret. I have been running my blog on the MySQL in App instance provided with each Azure App Service web application for the last few months. Yes, I know that is not a best practice. However, I didn’t want to have to do the ClearDb or host a Linux VM options and I knew Azure would have a MySQL service someday. Today, 5/10/2017, Microsoft announced a new service available in-preview on Azure. They are offering a Database-as-a-Service (DBaaS) for MySQL and PostgresSQL in addition to the SQL Server service. Get excited! You can read all about the service, pricing and documentation <a href="https://azure.microsoft.com/en-us/services/mysql/">here</a>. This post is about migrating a WordPress db from the MySQL in App instance to this new service. You can read more about the in-app instance <a href="https://blogs.msdn.microsoft.com/appserviceteam/2016/08/18/announcing-mysql-in-app-preview-for-web-apps/">here</a>, but the goal of the in-app feature was only for development. Hence, the need to migrate, asap.</p>
<h2 id="overview">Overview</h2>
<h3 id="software-tools">Software Tools</h3>
<ol>
<li>Any web browser</li>
<li>Visual Studio Code</li>
<li>MySQL Workbench</li>
<li>Any ftp client</li>
<li>Optionally, phpMyAdmin</li>
</ol>
<h3 id="steps">Steps</h3>
<ol>
<li>Assumptions and Preparations</li>
<li>Create an Azure Database for MySQL</li>
<li>Export and Importing the Existing Database</li>
<li>Deploy WordPress to Staging Environment</li>
<li>Swap Production and Staging Environments</li>
</ol>
<p>Let’s begin.</p>
<h2 id="assumptions-and-preparations">Assumptions and Preparations</h2>
<p>I am assuming a couple of things about the audience for this post. First, that you have a valid Azure subscription and know what PaaS means. Second, you are familiar with administering a WordPress blog running in an Azure App Service using the Standard pricing tier.</p>
<p>This last bit of preparation is configuration. Let me start by saying, configuration management is difficult even for small apps. I originally deployed this app with the idea of only having a staging site and a production site. However, this was not feasible as there was some weird issues with the MySQL in-app between the 2. As a result, I just use my development environment as the testing ground before production. Additionally, I don’t install any plugins in dev they are all installed in prod, backed up and copied down to dev. Anyway, I originally configured the wp-config.php file to dynamically read the server environment variables so that I wouldn’t have to reconfigure each environment. Because that is a pain. Below is the code I used for this. Once I got this working it was nice not to have to remember configuration settings for each environment. You are welcome to use this. If you only have one deployment I don’t think you will have to but you can. Here is a <a href="https://gist.github.com/edrohler/48d4d758eea499c16b761abccfb4309e">gist</a> for you.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo1.png" alt="custom wordpress config file" /></p>
<h2 id="create-an-azure-database-for-mysql">Create an Azure Database for MySQL</h2>
<p>This step is simple enough. Just search for the service and follow the prompts. However, once the database completes deploying there are 2 things required.</p>
<ol>
<li>Ensure the force SSL is disabled.</li>
</ol>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo2.png" alt="azure enable ssl settings" /></p>
<ol>
<li>Add a firewall rule to allow all IP’s. This was s setting I discovered by creating a Web App + MySQL test application in Azure from the Marketplace.</li>
</ol>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo3.png" alt="azure mysql db firewall settings" /></p>
<h2 id="exporting-the-existing-database">Exporting the Existing Database</h2>
<p>There are 2 options, maybe more and not even one is better than the next. I will discuss the options I tried and note the one that I went with because it’s easier.</p>
<h3 id="option-1-using-phpmyadmin">Option 1: Using phpMyAdmin</h3>
<p>This is the less preferred method because I am not really a fan of phpMyAdmin but it is the method provided in the WordPress codex <a href="https://codex.wordpress.org/Backing_Up_Your_Database">here</a>.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo4.png" alt="phpmyadmin export tables" /></p>
<p>Exporting this way will provide you with a SQL file that you can then run against your new database.</p>
<p><strong>NOTE</strong>: This script shows creating the database. Just manually create your database in your new SQL Database for MySQL via MySQL workbench. Also, don’t use localdb. That is for demo purposes.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo5.png" alt="phpmyadmin export sql file" /></p>
<h3 id="option-2-using-the-azure-portal">Option 2: Using the Azure Portal</h3>
<p>This is the preferred method and extremely simple. It’s like the Azure devs knew that the in-app instance would need an export function. It’s as simple as just entering the security credentials to the MySQL Server and clicking a button. So, here are some pictures for reference.</p>
<p>Note: I initially had an issue with connecting to the SQL database for MySQL doing this. However, I disabled the force SSL and added the firewall rule and it worked seamlessly.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo6.png" alt="azure mysql in app export" /></p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo7.png" alt="azure mysql in app export form" /></p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo8.png" alt="azure mysql in app export screen" /></p>
<h2 id="deploy-wordpress-in-staging-environment">Deploy WordPress in Staging Environment</h2>
<p>This next step you’ll want to test out your work to see if all went well. Luckily, Azure App Service has an excellent feature for that; deployment slots. It’s easy to create a deployment slot. In the production app blade select the section for deployment slots and add a slot. I cloned the source configuration so that things would be identical to test out.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo9.png" alt="azure create web app deployment slot form" /></p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo10.png" alt="azure web apps deployment slot screen" /></p>
<p>In the staging deployment turn off the MySQL in App feature.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo11.png" alt="disable azure web app mysql in app" /></p>
<p>Also in staging, delete the old application settings specific to the MySQL in App instance and add your connection string. The format of the connection string is Database={dbName};Data Source={dbHost};User Id={userName};Password={password}</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo12.png" alt="delete azure web application settings" /></p>
<p>This next step requires and FTP client. I use FileZilla but whatever your preference is will work fine. Make sure to configure the ftp client to connect to production and staging. Connect to production and download the production WordPress application code.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo13.png" alt="filezilla file download" /></p>
<p>Now, connect to staging and upload the application code.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo14.png" alt="filezilla ftp file upload" /></p>
<p>In the wp-config.php file, ensure the database connection string key matches the key from the application settings. Reupload the wp-config.php file via ftp client, if necessary.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo15.png" alt="wordpress config settings file" /></p>
<p>Test the staging URL and make sure everything works. Click links, read posts, etc. If all goes well, move to the last step.</p>
<h2 id="swap-production-and-staging-environments">Swap Production and Staging Environments</h2>
<p>Swap staging and production. This is easy enough, just click the swap button via the staging or production website overview blade. Below is a sample of what the swap button looks like.</p>
<p><img class="img-fluid" src="/assets/img/20170513MigratingWo/051317_0658_MigratingWo16.png" alt="azure web app deployment slot swap" /></p>
<h2 id="conclusion">Conclusion</h2>
<p>Migrating a database is easy in MySQL and I really enjoyed using the MySQL Workbench tool. Additionally, now the site is scalable. Where before it wasn’t because each MySQL in-app instance was unique to the website instance. Meaning, if the site scaled to 100 instances there would also be 100 MySQL in app instances. This alleviates this issue. However, I doubt many users will need to do this but it is documented here. Enjoy.</p>Eric D. Rohlerhttps://www.ericrohler.com/about/Walkthrough for Migrating a WordPress DB from MySQL in-app to MySQL on Azure for MySQL using the azure portal, an ftp client and MySQL Workbench.