XF on localhost

XF on localhost

Finally we get to the last stage which is to install XF.

The first thing to do is to copy the files to the correct location which is in the C:\xampp\htdocs directory.

I just keep it simple and use \xf but you can use whatever you wish so go ahead and create the folder.

xf-directory.png


Then extract the contents of the XF zip archive package(s). It should look like this when done:

xf-files.png


Now you just navigate to https://localhost/xf (or whatever you named the directory) in your browser and the install script should automatically kick in.

xf-installation.png


Enter the details for the MySQL user name, MySQL database name, and MYSQL password which you defined in the previous section for setting up XAMPP and the localhost environment.

When it comes to setting up the Administrator account you can skip the email address as it's not required.

Once XF is installed note that it is being served over https and is secure.

secure.png


As this is a test installation, you may want to add some additonal switches to the src/config.php file.
The full list of available switches is here: https://xenforo.com/xf2-docs/manual/config/

I usually just disable mail sending, enable debug and development mode, and add a cookie prefix so I can have multiple localhost installations.

PHP:
$config['enableMail'] = false;

$config['debug'] = true;

$config['development']['enabled'] = true;

$config['cookie'] = array(
'prefix' => 'xf_',
'path' => '/',
'domain' => ''
);

The xf_ prefix needs to be unique for each localhost installation if you have more than one.

Then you are ready to continue installing any add-ons, setting up options, etc.

If you have XFES and you followed the steps to install Elasticsearch, it will work out of the box - it just needs to be enabled.

xfes.png


Congratulations!

You now have a shiny new localhost installation.

If you want multiple local installations you just need to create a database and user, and a new folder and files in the C:\xampp\htdocs directory for each one.
  • Like
Reactions: levi45 and Earl
Now we need to configure XAMPP and set up the localhost environment.

Note: Depending on your Windows settings, you may receive warnings related to the firewall. If that happens, you will need to allow access in order for XAMPP to work.

XAMPP​

Start the XAMPP Control Panel. It should look like this:

xampp-control-panel.png


Click on the Config button at the top right and set up the options as you wish. I typically set it up so Apache and MySQL auto start and set Notepad++ as the editor.

xampp-config.png


Windows may throw an error when trying to save the config due to write permissions on the xampp-control.ini file.

xampp-ini-file-error.png


If that happens you will need to grant write permission to the file, or you can try editing the file directly. This is what the ini file for my installation looks like after saving the settings. I have marked the lines which relate to the settings I changed with a 🔵.

xampp-control-ini-file.png


As this is the first time XAMPP is being used though, you will need to start the services manually.
You do that by clicking on the Start buttons for Apache and MySQL.

xampp-start.png


Now we are ready to start setting up the localhost environment.

Localhost​

Open a new browser window or tab.
Note: If you are using Chrome, you can set up separate profiles (most likely with other browsers too) - I have one set up just for localhost to ensure there is no chance of getting mixed up with any production sites.

The first thing to do is to create the MySQL database. That is done using phpMyAdmin.
You can either navigate directly to https://localhost/phpmyadmin/ (oooh look, shiny https lock :cool:) or you can click on the Admin button for MySQL on the XAMPP Control Panel.

xampp-mysql-admin.png


Note that the buttons are hard coded to http but it doesn't really matter how you access phpMyAdmin locally so either method is fine.

Once phpMyAdmin is loaded, click on the Databases tab at the top and create a new database with the name xf and collation of utf8mb4_unicode_ci.

create-database.png


The new database will then appear in the sidebar on the left.
Click on it, then click on the Privileges tab at the top, and then Add user account at the bottom.

create-database-user.png


Then create the new database user account.
The only fields you need to fill in are: User name, Password, and Re-type (password). Make a note of the password - it will be required when installing XF.

Ensure Grant all privileges on database xf is checked and check the Global Privileges Check all field.
You should see this:

database-user.png


It's not visible on the above screenshot but there is a Go button at the bottom right which needs to be clicked to save the changes.

go.png


Almost there ...


Step 5 - Install XF
Create directory C:\elasticsearch.

Extract the contents of the Elasticsearch archive package and copy them to that directory.
It should look like this:

elasticsearch-directory.png


Click on the C:\elasticsearch\bin\elasticsearch.bat file to start the server.

elasticsearch-bat-file.png


If Windows throws the following error, click on More info and then Run anyway.

windows-run-error.png


The elasticsearch server should then start and if successful should look something like this:

elasticsearch-server.png


That's it!

That window will have to remain open while using localhost - closing it will shut down the elasticsearch server.


Step 4 - Localhost Setup
Step 5 - Install XF
  • Like
Reactions: KSA
This is the most complicated part of the process so these steps must be followed exactly.

Create V3 File​

Using Notepad++ (or a similar program), create a file called v3.ext with the following contents:
Code:
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost

v3-file.png


The DNS entry must correspond with what you use for 'localhost' when you access it via a browser. This will typically be, err, localhost.

You can have as many entries as you like, with each subsequent entry on a separate line and the DNS record incremented, for example:
Code:
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = test
DNS.3 = something.else

For the vast majority of cases though, DNS.1 = localhost is most likely all that is needed.

Once the file has been created, copy it to C:\xampp\apache\.

v3-directory.png


Edit Certificate Creation File​

Next, edit the C:\xampp\apache\makecert.bat file - it's the file 6 up from the bottom in the above screenshot.
You can right click on it and open it with Notepad++ to do that.

Change line 9 to this:
Code:
bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 3650


Add this to line 10:
Code:
bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 3650 -extfile v3.ext


The file should then look like this:

makecert-file.png


Create Certificate​

Once the file has been edited and saved, click on it.

You will see the following window:

makecert.png


This is where we populate the certificate with the data.

Still with me? I said it was complicated.

The PEM pass phrase is only used as part of the generation process and can be any 5 digits - I just use 12345.

Once the PEM has been entered and verified, you will then be prompted to start entering the data.

This is what I use:
Code:
Country Name: UK
State Name: Lon
Locality Name: London
Organization Name: My Company
Common Name: localhost
Email Address: test@example.com

You can use whatever you like but you must ensure that the Common Name matches the domain you entered in the v3.ext file. In this case it's localhost.

There are some other fields you are prompted for but you can just leave them blank (by hitting Enter or Return).

For the final step, you will need to enter the PEM again - in this case 12345.

Install Certificate​

The last thing to do is install the certificate.

Click on C:\xampp\apache\conf\ssl.crt\server.crt.

server-certificate.png


You will see this window:

certificate.png


As you can see from the information, the certificate isn't trusted. So that's the next thing which needs to be done.

Click on the Install Certificate... button.

Select Local Machine and click Next.

local-machine.png


Select Place all certificates in the following store and click the Browse... button.

Then select Trusted Root Certification Authorities and click OK.

store.png


Then click the Next button again and then Finish.

There should be a message popup stating that the import was successful.

Phew! 😰

Close the certificate and once again click on C:\xampp\apache\conf\ssl.crt\server.crt

You should now see that the certificate is trusted and installed and is valid for 10 years (that's the 3650 which was entered in the makecert.bat file previously).

certificate-installed.png


Now localhost is fully httpsified (real word).

See, told you it was easy! :D


Step 3 - Install Elasticsearch
Step 4 - Localhost Setup
Step 5 - Install XF
  • Like
Reactions: Cl0udzz and KSA
Click on the XAMPP installer to start the installation routine.

For a basic installation, these are the components which are required:

xampp-components.png


You can of course install anything else you think you may need.

Install at C:\xampp like so:

xampp-directory.png


Note: Do not install at C:\Program Files if you have UAC in use on your Windows system, as it will affect the operation of XAMPP.

Once installed, you may want to change some of the PHP configuration settings.
That is done by editing the C:\xampp\php\php.ini file.

Two changes you do have to make though if you want to enable push notifications, are to uncomment the gmp and openssl extensions.
Those lines are marked with a 🔵 in the screenshot below.
Just remove the ; from the beginning of the lines and save the file.

php-ini.png


That's it as far as the basic installation and set up of XAMPP is concerned.

You can now optionally create an SSL certificate (recommended if your site is currently served over https), install Elasticsearch (if you have XFES), or proceed directly to setting up the local environment ready to install XF.


Step 2 - Create SSL Certificate
Step 3 - Install Elasticsearch
Step 4 - Localhost Setup
Step 5 - Install XF
  • Like
Reactions: KSA
Top Bottom