Saturday, August 27, 2016

Letsencrypt SSL certificates with nginx's proxypass

I was not able to directly use the instructions from the certbot site to successfully request an SSL certificate, instead I had to use their webroot plugin plus a few tweaks to my nginx configuration.

Background

For this project we were deploying a Pyramid based system which uses nginx's reverse proxy (proxypass). This approach will be useful in any scenario where nginx is using proxypass. The OS used is Ubuntu Trusty 14.04 but should work on Debian as well (some things are more straight forward on Ubuntu 16.04).

Here are all the key concerns:
  • Certbot/Letencrypt expects to find your certificate challenge data served under a folder called '.well-known'
  • By default all requests for my project are passed via a reverse proxy to our application.
This means that, in the context of my project, when a request is passed to /.well-known  instead of serving my certbot challenge information from a folder on the filesystem the request is handled by the proxy and passes it as a request to my application. 

The Procedure

The steps below assume that nginx is configured as follows:
A special configuration file located at /etc/nginx/sites-enabled/myproject.example.com which looks like this (be sure to change the server name to match the server you're working with):

Step 1 - Make nginx serve static files when requests are sent to /.well-known

To achieve this I created a folder /var/www/letsencrypt and made sure that it was owned by the webserver user.
sudo mkdir -p /var/www/letsencrypt
chown www-data:www-data  /var/www/letsencrypt

Then in my nginx configuration for my project I added the configuration below to ensure that requests made to myproject.example.com/.well-known would skip the proxy and be read from our /var/www/letsencrypt folder.

server {
       listen         80;
       server_name myproject.example.com;
       location /.well-known {
          alias /var/www/letsencrypt/.well-known;
       } 

Once that was in place I restarted nginx.

service nginx reload

Step 2 - Install Certbot


The part of the documentation that I read was silent about where to put the certbot-auto script. I decided to install certbot-auto in /usr/local/sbin, this means that it is in the system path and can be run as a command by itself (which feels nicer than needing to be in the folder when running the script).
cd /usr/local/sbin/
sudo wget https://dl.eff.org/certbot-auto
sudo chmod a+x certbot-auto

Step 3 - Request a certificate against the /var/www/letsencrypt 

Now you can easily request a certificate.

Note the use of --webroot in the command below, this ensures that the challenge information is added to the /var/www/letsencrypt folder. Also, I precede the command with sudo because installation of the actual certificates requires admin privileges. 
sudo certbot-auto certonly --webroot -w /var/www/letsencrypt -d myproject.example.com

Expected response

If everything was done properly you'll get a message like this:

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at
   /etc/letsencrypt/live/myproject.example.com/fullchain.pem.
   Your cert will expire on 2016-11-25. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot-auto
   again. To non-interactively renew *all* of your certificates, run
   "certbot-auto renew"

Step 4 - Configuring Auto-renewal of certificates

Once setup properly the auto renewal steps that I took were near identical to the documentation.
I first tested to see that an auto renewal would work without issue:

certbot-auto renew --dry-run

Once the dry run was succesfull I added a renewal command as a cronjob using the crontab -e command:

PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
@monthly certbot-auto renew --quiet --no-self-upgrade

Additional Notes

I ran across a few issues, mostly because I had a previous manual setup. As a result when I ran certbot-auto I ended up with multiple configuration files and certificates in the /etc/letsencrypt/renewal/ and /etc/letsencrypt/live/ folders.
I assume you have a basic understanding of Unix system administration, nowadays this is becoming more of a bad assumption but I mention it here for what it's worth.


Monday, March 7, 2016

Gloss - Build a dynamic site by assigning content areas to your static HTML theme

What if you could make a static HTML page into a living breathing dynamic site simply by "tagging" sections of your page as dynamic? Gloss aims to be just that, simply "tag" or "assign" sections of your static page with special gl- css classes and it will magically transform into a dynamic site. Currently we built Gloss as an extension of the Plone CMS and it has changed the way we look at the design/prototype/build workflow.

Here's a short video explaining Gloss.



For more information about Gloss visit the documentation page at http://the-gloss-project.readthedocs.org


Friday, February 12, 2016

Using Requirejs to load Jquery UI from a CDN

This post discusses how to use Require.js to load an external library.

One big benefit of Require.js is that it allows a developer to reliably load javascript modules without introducing dependency related conflicts. I needed to include Jquery UI into Plone 5 (which now manages the loading of javascript modules and dependencies using Require.js). If you're curious you can read more about use of Require.js in Plone.

In Plone 4.x you basically use the plain old javascript approach (with a bit of jquery magic) to load and run your scripts. Loading and using the Jquery UI datepicker might look like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
 $(document).ready(function(){
    $(function() {
    $( ".my-calendar-box" ).datepicker(
        { dateFormat: "dd/mm/yy" }
        );
  });
   
 });
</script>

With the introduction of Require.js in Plone 5 the code above would now look something like this:

<script>
require.config({
    "paths": {
      "jquery-ui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min"
    }
});
require([ "jquery", "jquery-ui" ], function( $ ) {
       $(".my-calendar-box").datepicker(
        {
            dateFormat: "dd/mm/yy"
        }
        );
});
</script>

Note that when we define the path to "jquery-ui" the ".js" is removed from the end of the path. We can now call our newly defined "jquery-ui" module by using a require() call.
Plone 5 ships with some common modules such as jquery so we only need to  require "jquery".

If you want to get a list of all the javascript modules that Require.js has already loaded, run the following command on the javascript console of your Require.js powered app:
require.s.contexts._.defined

It is more common to put all your require.js related code in a separate ".js" file and then load that file. I have notes on doing something like that with SemanticUI.

Thursday, January 21, 2016

From Zero to Plone - Towards faster on-boarding

About 4 months ago we took on a new developer and I started by explaining that it takes about 3 months to become confident with Plone. Being a confident developer he took this as a challenge, assuming that he would be over the learning curve within 3 weeks.

After 4 months plus of working with us I asked him to give me his feelings about my 3 month timeline. This was his response (with a few additions from me):

"I think I'm comfortable with it. However, it [depends on] the type of task you've given me... I might be uncomfortable with [doing a migration]. It's like giving a recently graduated doctor the task of performing a heart surgery as his first task at the hospital..."

So he's comfortable with some tasks but there are others that will require more experience.

I've actively been experimenting with ways of making Plone easier for at least 3 years (and less actively for longer than that). In that period I've come up with the idea of Plone Drills, created a Diazo Snippets Library and Chrome Plugin, worked out fast cloud based installation of Plone, done work on a Plone Newbie Developer Toolkit (Plone 4 only), contributed to Alex Clark's Plock Plone Installer project and spent a lot of time on a theming approach for Plone which "extends" Diazo called Gloss. I also created a short video series related to using Gloss with Webflow.

I'm still haunted by this problem space and the general idea of on-boarding web developers. It's led me to my latest side project, the aim being to provide a faster on-boarding experience for new Plone developers. I've been calling it a book but that might be a poor description since it will most likely involve more than just a text.

BTW... If you are interested in the fastest way to get going with Plone then I'd encourage you to sign up for my upcoming book/project/thing. You should see the option to sign up somewhere on this page.

Monday, December 14, 2015

Semantic UI + Plone + RequireJS (just a gist)

I wanted a way to include a jquery plugin in a Plone 5 add-on that I'm working on, but I really wanted to find the simplest way, without using bundles and registering resources with Plone's Genericsetup mechanism.
I was able to pull it off with standard page templates and static resources and it ended up being very close to the way it would be done without all the additional framework related code.

Perhaps I will go into more detail about this approach at a later date. But, following the principle of release early, release often, I'm posting a gist of what I've been doing.

Here's a screenshot of a page that's using the ratings component provided by SemanticUI (a jquery plugin).



I've posted the code with some explanatory notes as a github gist available here: https://gist.github.com/pigeonflight/69313231ad8c8a38082f

Hopefully it will save someone lots of time.

Thursday, November 26, 2015

Building a Self Hosted CMS Site using Webflow and Plone (Video Series)

One of my personal goals is to make it easier for persons to get started with web development technologies. I teach web programming at my local university, I blog about my preferred CMS (Plone). For front-end development I now point designers at Webflow. In line with that I've recently created a video series that shows how to use Plone as your CMS and Webflow for theme development.


Last month I spent 10 full days (and some nights) building out the initial videos which demonstrate the process of integrating Plone with Webflow.  I noticed a few days ago that there was additional money in my Paypal account, apparently as a result of a sale. I haven't exactly been over the top with my promotion and marketing since the launch, so it was an encouraging event.  While I did blog about it at medium.com, I never posted anything here on my personal blog. So this is my "official" blog announcement.

The video series focuses on using Plone 5 with Webflow.  Each video walks you through what you need to know in order to take advantage of Webflow for the look and feel of your site and Plone as a robust, self hosted CMS platform. The idea was to release new videos that will complete the series as I go, if you purchase today you lock into all the new videos for today's purchase price.
The topics covered so far:
  • Introduction
  • Installing Plone Sandbox
  • The Webflow Steps
  • Organize- Structuring your theme
  • What is Gloss?
  • Gloss Marker Classes
  • Marking your theme - Hands on Linking
Learn more on the "Webflow meet Plone" page.

I fell off a bit, I planned to add more videos to the series (for which I must apologize) I can safely promise the next video in the first week of December and more to come after that.

Monday, October 12, 2015

Taking Inspiration from the Webflow CMS (yes this is about Plone)

Webflow just released their CMS and it's slick. There are lessons for Plone and other CMS communities here. In case you didn't know who Webflow's target audience is you might want to watch this video.


I love this promotional video. Especially when he says that Webflow creates "Clean compliant HTML and CSS that I will NEVER EVER look at". That's the point, Webflow aims to free designers from depending on coders.

In achieving this goal the Webflow.com team does one thing very well, user interface (UI) and user experience (UX) design (maybe that's two things). The screen below is an example of how they manage dynamic data.


I've labelled what I think are the key aspects that drive this interface, (1) A clear link to an introductory tutorial especially important for first timers, but out of the way enough that regular users can just skip over it, (2) at the top of the next panel is the instruction to "Create Collection" this is effectively the "save" button, if you want to just accept the defaults, click this and you're done. (3) Some ready made "Collection Templates"  with predefined fields, you can select one of these and then further customize it to your liking. (4) "CMS Preview", a preview of the form, as it will be experienced by an editor of the site.

Collections & Collection templates... where have I seen this before?

The interface isn't just about being clean or slick, there is very purposeful choice of language. While many other platforms have gone with the idea of content types, they've made the underpinning concept "Collections", the whole focus is on creating collections of data such as recipes, events or blog posts and then displaying the individual items "Collection templates" or "Dynamic Lists".

In this paradigm what you might call a content type in a CMS like Plone or Drupal is now referred to as a "Collection template", which makes much more sense in the context of the the Webflow universe.

The interface also flows logically based on the idea of defining a "Collection" then a corresponding "Collection Template". Add to this logical flow very obvious visual cues and you have the makings of a beautiful interface.

Upon further reflection I realized that I had seen this somewhere before. In database programs like Filemaker Pro and Access. What Webflow has done is place the design firmly in the forefront. So a "Collection" is analogous to a database table, the "Collection templates" are associated with underlying forms which allow a user to add new records, finally custom display of the data is controlled visually through the same "Collection Templates" to make it display things the way we want. To top it off, an otherwise ordinary static page can also be made dynamic by embedding a "Dynamic List" which is effectively a feed from the table (uhm) collection.

Designer Friendly

It's clear that they've put a lot of thought into making it designer friendly.

I think the use of the term "Collection Template" instead of "Content Type" is a stroke of genius. It fits nicely into the visual designer paradigm and emphasizes the visual display of the content. Of course you'll need to define the fields of your content but that action is towards a specific end, templates are things that a designer interacts with all the time, by qualifying the name as a "Collection Template" there is no confusion with the other kinds of templates used in Webflow.

If you want to see where this really shines take a look at this video that explores Webflow Dynamic Lists:


After interacting with the Webflow system and then going back to Plone's dexterity content type editor I think there's room for UX improvement. The truth is Plone's Dexterity approach is far more capable and extensible but isn't as friendly for the visually oriented. The Webflow CMS wins in one important category, the ability to link a custom design process with real world dynamic content in a visual and easy way.

So now we have a really nice bicycle

The Webflow CMS is now a very slick bicycle, lightweight and fun to use. By contrast, your average CMS is more like an ugly car or helicopter, very capable but far less fun to use. Complexity is often a result of additional features and what we're witnessing with Webflow vs other CMSes is a slicker less complex ( though less feature rich) system when compared to older more capable but less slick CMSes. From the perspective of the Plone CMS I'd say we have a helicopter, not as slick as the Webflow bicycle but more powerful. Calling Plone an ugly helicopter is not meant to discourage the Plone team, but the fact is, while a lot of improvement has happened, there's a lot of UX work that will need to happen to bring the Plone experience on par with the Webflow experience, but we certainly have the tools make it happen. One thing I'm keeping my eyes on is the the newly emerging Mosaic drag and drop layout editor. Here's a video of Mosaic in action:


So why don't I just use Webflow by itself? For really small projects I may, but there are some limitations to committing to a bicycle, even a slick one. I consider Plone to be far more powerful and it has a mature ecosystem of add-ons, I can implement custom authentication for example to integrate it as an intranet solution or use it for file management, just to name a few things.

I suspect that this won't matter much for Webflow's core audience (the visual designers who want to ditch the coders), they will definitely adopt the new Webflow CMS.

As for me, my workflow is a mixture of Webflow for developing the design and interactions to generate clean compliant HTML and CSS. I then make my static Webflow site dynamic with Plone. This has worked beautifully for me over the past 2 and half years. Next on my agenda is to refining our tools and processes to make it even simpler for the visual designers that work with us to prepare layouts that work seamlessly with Plone.

Sign up for my upcoming Plone 5 Book & Video tutorials

plone 5 for newbies book and videos