Posted on

WAMP Virtual Hosts

CategoriesDesktop Setup, Tools, WAMP

Setting Up Overall Structure

Keep localhost homepage in default location on C drive. Set up all websites to be virtual hosts that you configure from the localhost homepage which will be the name of website ending in .local.

Update httpd-vhosts.conf to make files.local URL point to the D drive. This will make WordPress sites work when the database is not updated with new domain. Add this code to the file:

<VirtualHost *:80>
   DocumentRoot "d:/sites"
   ServerName files.local
   <Directory "/">
      AllowOverride All
      Require local
      Allow from All
      Require local
   </Directory>
</VirtualHost>

Add an htaccess to C:\wamp64\www so that all localhost links except the homepage rewrite to files.local which points to D drive

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://files.local/$1 [L]

Setting Up HTTPS

  1. Download and Install OpenSSL
    OpenSSL is available in both 32 and 64 bit. Make sure you select the correct installer for your version of Windows. You can find the latest version of OpenSSL here https://slproweb.com/products/Win32OpenSSL.html. Navigate to your downloads folder and double click the installer. When Installing OpenSSL leave all settings default.
  2. Create Your Key and Certificate
    Open your start menu and Load Command Prompt as an Administrator and run the following commands.

    First, we will need to change our directory to where we installed OpenSSL.
    cd D:\Program Files\OpenSSL-Win64\bin

    Next, we will create our private key. You will be asked for a passphrase. Make it anything you want just make sure you remember it for the next step.
    openssl genrsa -aes256 -out private.key 2048
    openssl rsa -in private.key -out private.key

    Next, we will create our certificate. You will be asked several questions on this step. You can put whatever you like or just hit enter to leave it at default. The only one that really matters is Common Name (e.g. server FQDN) you will need to type “localhost” for this.
    openssl req -new -x509 -nodes -sha1 -key private.key -out certificate.crt -days 36500
  3. Move your Key and Certificate
    Create a folder named “key” in the C:\wamp64\bin\apache\apache2.4.23\conf directory.

    Navigate to c:/program files/openssl-win64/bin/ to find the certificate.crt and private.key that you just created. Both of these need to be moved to the new folder c:/wamp64/bin/apache/apache2.4.41/conf/key/.
  4. Edit Your httpd.conf File
    Open c:/wamp64/bin/apache/apache2.4.23/conf/httpd.conf and un-comment (remove the #) the following 3 lines:
    LoadModule ssl_module modules/mod_ssl.so
    Include conf/extra/httpd-ssl.conf
    LoadModule socache_shmcb_module modules/mod_socache_shmcb.so
  5. Edit Your httpd-ssl.conf File
    Open up C:\wamp64\bin\apache\apache2.4.23\conf\extra\httpd-ssl.conf and replace content with:
Listen 443

DocumentRoot "c:/wamp64/www"
ServerName localhost:443
ServerAdmin info@christinewilson.ca
SSLSessionCache "shmcb:${SRVROOT}/logs/ssl_scache(512000)"
ErrorLog "${SRVROOT}/logs/error.log"
TransferLog "${SRVROOT}/logs/access.log"
SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"

<VirtualHost localhost:443>

	DocumentRoot "c:/wamp64/www"
	ServerName localhost:443
	ServerAlias localhost
	ServerAdmin info@christinewilson.ca
	ErrorLog "${SRVROOT}/logs/error.log"
	TransferLog "${SRVROOT}/logs/access.log"

	SSLEngine on
	SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
	SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"

	<FilesMatch "\.(cgi|shtml|phtml|php)$">
		SSLOptions +StdEnvVars
	</FilesMatch>

	<Directory "d:/sites">
		SSLOptions +StdEnvVars
		Options +Indexes +Includes +FollowSymLinks +MultiViews
		Require all granted
		AllowOverride All
	</Directory>

	BrowserMatch "MSIE [2-5]" \
			 nokeepalive ssl-unclean-shutdown \
			 downgrade-1.0 force-response-1.0

	CustomLog "${SRVROOT}/logs/ssl_request.log" \
			  "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

</VirtualHost>

<VirtualHost files.local:443>
 
	DocumentRoot "d:/sites"
	ServerName files.local:443
	ServerAlias files.local
	ServerAdmin info@christinewilson.ca
	ErrorLog "${SRVROOT}/logs/error.log"
	TransferLog "${SRVROOT}/logs/access.log"

	SSLEngine on
	SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
	SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"

	<FilesMatch "\.(cgi|shtml|phtml|php)$">
		SSLOptions +StdEnvVars
	</FilesMatch>

	<Directory "d:/sites">
		SSLOptions +StdEnvVars
		Options +Indexes +Includes +FollowSymLinks +MultiViews
		Require all granted
		AllowOverride All
	</Directory>

	BrowserMatch "MSIE [2-5]" \
			 nokeepalive ssl-unclean-shutdown \
			 downgrade-1.0 force-response-1.0

	CustomLog "${SRVROOT}/logs/ssl_request.log" \
			  "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

</VirtualHost>

Adding New Websites

Open hosts file in C:\Windows\System32\drivers\etc\hosts to point new domain name to localhost:

127.0.0.1	mongooseandmink.local

Add Virtual Host on localhost homepage for http.

Add Virtual Host on https by opening up C:\wamp64\bin\apache\apache2.4.23\conf\extra\httpd-ssl.conf and add:

<VirtualHost mongooseandmink.local:443>
 
	DocumentRoot "D:/sites/ouioui"
	ServerName mongooseandmink.local:443
	ServerAlias mongooseandmink.local
	ServerAdmin info@christinewilson.ca
	ErrorLog "${SRVROOT}/logs/error.log"
	TransferLog "${SRVROOT}/logs/access.log"

	SSLEngine on
	SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
	SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"

	<FilesMatch "\.(cgi|shtml|phtml|php)$">
		SSLOptions +StdEnvVars
	</FilesMatch>

	<Directory "D:/sites/ouioui">
		SSLOptions +StdEnvVars
		Options +Indexes +Includes +FollowSymLinks +MultiViews
		Require all granted
		AllowOverride All
	</Directory>

	BrowserMatch "MSIE [2-5]" \
			 nokeepalive ssl-unclean-shutdown \
			 downgrade-1.0 force-response-1.0

	CustomLog "${SRVROOT}/logs/ssl_request.log" \
			  "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

</VirtualHost>

Websites with Old WordPress Database

For WordPress websites with old database (URL is localhost still), Update the htaccess to remove the folder

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /ouioui/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /ouioui/index.php [L]
</IfModule>

Update wp-config file to use new domain name:

define( 'WP_HOME', 'http://mongooseandmink.local/' );
define( 'WP_SITEURL', 'http://mongooseandmink.local/' );
Posted on

Questions for interview

CategoriesBack End, Development, WordPress Functions and Hooks

1. You’re the lead developer on a new project that requires a CMS (content management system).  What tech stack would you use and why?

Generally I would make sure that whatever stack I chose didn’t create issues with updates in the future. Who will be doing future updates? What technologies do those employees already know? I would get an overview of what they are doing now and where they want to be in the future technology wise. So I’d first follow the direction of the current environment around me.

Otherwise because I know the LAMP stack, I’d be choosing this option since I can follow in more detail.

There are two major CMS I would choose from: Drupal or WordPress

If the project needs to have a customized website that needs to handle a lot of data I’d choose this as WordPress we are usually installing ACF to deal with fields. Drupal has a better method built into their CMS.

WordPress I’d choose for most other websites as you can still customize everything and there is a lot of documentation online and many people who know how to develop in WordPress.

For retail websites I may choose Shopify since they focus on ecommerce only.

2. (scenario) : We’re creating a blogging platform for teams in government departments who want to publish articles on a regular basis. We are using a WordPress multisite installation so that we can create a new instance per team and let them self-administer. We want to improve the flow for adding new users. The following questions relate to the end-to-end developer experience of creating a new flow for adding users (eg, user roles, database structure, data input, testing changes). They are oriented towards WordPress but are generic enough to be relevant to any CMS framework.

3. (scenario): We have a small web application which is missing functionality and has some bugs.  We need your help. The current page looks like https://codesandbox.io/s/pedantic-fast-2pcw9

Figure out the database structure of multisites

Do unit tests for WordPress and React

Posted on

Child Themes and Theme Structure

CategoriesBack End, Development, WordPress Functions and Hooks

How to create a child theme

  • Create a folder in your themes directory giving it the name of new theme.
  • Create style.css file and print this inside where template references the name of the parent theme that’s referenced in enqueue:
Theme Name:   Theme Name Here
Theme URI:    https://www.themeurl.com/
Description:  A Parent child theme 
Author:       Christine Wilson
Author URI:   https://www.christinewilson.ca
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  themenamehere
  • Create a file called functions.php and add enqueue scripts info:
/* enqueue scripts and style from parent theme */
    
function main_scripts() {
    wp_enqueue_style( 'themenamehere', get_stylesheet_uri(),
    array( 'twenty-twenty-one-style' ), wp_get_theme()-&gt;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'main_scripts');

Theme structure

Here’s all the possibilities inside your theme:

Possible folder structure (taken from WordPress)

assets (dir)
      - css (dir)
      - images (dir)
      - js (dir)
inc (dir)
template-parts (dir)
      - footer (dir)
      - header (dir)
      - navigation (dir)
      - page (dir)
      - post (dir)
404.php
archive.php
comments.php
footer.php
front-page.php
functions.php
header.php
index.php
page.php
README.txt
rtl.css
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css
Posted on

Why host images on a separate subdomain?

CategoriesBack End, Development, Linux
  • A separate domain prevents your domain’s cookies from being sent for every image request, where they’re not needed. Reduces the bandwidth overhead for each request.
  • Most browsers will only make a certain number of HTTP requests at one time to a particular domain, so serving images and other static content off a second domain potentially doubles the number of HTTP requests at one time.
  • You can conceivably use a different, lighter weight webserver like nginx/lighttpd to serve the static content.
Posted on

How to optimize WordPress site performance?

CategoriesBack End, Development, Processes, WordPress Functions and Hooks
  • Use a CDN
  • Use a caching plugin or edit .htaccess to cache different file types for different lengths of time and use gzip, etc
  • Use a simple theme/framework
  • Split comments, products and long posts into smaller pages
  • Use less plugins and only use well established ones
  • Keep WordPress updated
  • Host images on a subdomain

  • A separate domain prevents your domain's cookies from being sent for every image request, where they're not needed. Reduces the bandwidth overhead for each request.
  • Most browsers will only make a certain number of HTTP requests at one time to a particular domain, so serving images and other static content off a second domain potentially doubles the number of HTTP requests at one time.
  • You can conceivably use a different, lighter weight webserver like nginx/lighttpd to serve the static content.
Posted on

Add a User to a Group

CategoriesBack End, Development, Linux

Add an Existing User Account to a Group 

usermod -a -G examplegroup exampleusername

Change a User’s Primary Group

usermod -g groupname username

View current user’s groups

groups

To view the numerical IDs associated with each group, run the id  command instead: 

id

View groups of another user:

View groups of another user:

groups exampleusername
id exampleusername

View all groups of the system:

getent group
Original article