Before/After TYPO3 Upgrade Case Study

A long term customer, Cumhuriyet Anaokulu, a German/Turkish preschool in Izmir had been promoting their school using one of our EkspressWeb TYPO3 starter websites. As technology improved and with more people using mobile devices to view websites, they needed an upgraded design to reach these people as well as an upgraded version of the TYPO3 CMS framework.

Infrastructure

TYPO3 is continuously developed and while EkspressWeb was built on version 4.5, the current version at the time of the upgrade was 8.7. Work is currently being done on TYPO3 version 10 with an expected LTS release in April 2020. See the TYPO3 roadmap for more information.

As we do with most live websites, we duplicated the original website to a development subdomain and applied the TYPO3 core updates (4.5 to 6.2 to 7.6 to 8.7). In addition to the core updates, many of the extensions were also updated to their latest versions.

Content

TYPO3 is good at separating content from design and so with the exception of some custom content elements for layout, the customer was able to reuse all of their existing content.

Design

The original design templates made navigating and reading the content on mobile devices difficult. Google’s Mobile-Friendly Test tool was helpful in highlighting the major problems with the original design. Most of these were solved with the TYPO3 Bootstrap package extension and customizations of this to maintain the style of the original site with a fresh look.

Before

Original site, based on EkspressWeb starter package

More views of the old website can be found on the Wayback Machine.

After

Upgraded site with fresh design, based on Bootstrap package
Mobile navigation was almost impossible on the original site. Now there is a dynamic menu with access to all pages.
The site is now easily readable on tablet devices.

Development

The website uses standard TYPO3 extensions for delivering the content and no custom software development was required for this project.

Results

You can view the current Cumhuriyet Anaokulu website at https://www.cumhuriyetanaokulu.org/startseite/

For help on upgrading your TYPO3 website, please contact us.

Adding a self-signed SSL Certificate to localhost

In my localhost development environment, I sometimes need SSL configured for a site so I can test things as close as possible to how the production site will operate.

In my environment, Apache is configured in /usr/local/etc/httpd and the self-signed SSL certificates are stored in /usr/local/etc/httpd/ssl/<local_domain>/.

Here is the recipe to add a self-signed SSL certificate so Chrome and other browsers will allow access to the secure locally hosted site:

Add the following inside the <VirtualHost *:443> </VirtualHost> configuration for the local_domain in /usr/local/etc/httpd/extra/httpd-vhosts.conf

SSLEngine on
SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
SSLCertificateFile /usr/local/etc/httpd/ssl/<local_domain>/domain.crt
SSLCertificateKeyFile /usr/local/etc/httpd/ssl/<local_domain>/domain.key

Create domain.conf with the following content:

[req]
distinguished_name = req_distinguished_name
req_extensions = v3_req

[req_distinguished_name]

[v3_req]
basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = <local_domain>

Generate the key:

sudo openssl genrsa -out domain.key 2048

sudo openssl rsa -in domain.key -out domain.key.rsa

sudo openssl req -new -key domain.key.rsa -subj /CN=<local_domain> -out domain.csr -config domain.conf

sudo openssl x509 -req -extensions v3_req -days 3650 -in domain.csr -signkey domain.key.rsa -out domain.crt -extfile domain.conf

Add the key to the keychain in OSX:

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain domain.crt

Restart Apache

sudo apachectl -k restart