Build a Facebook clone from scratch with PHP — Part 7

All parts

It’s time to deploy FaceClone and invite friends to test it out!

Hosting

The FaceClone app has been running on our local computers all the while. For it to be accessible by anyone and everyone, it needs to run online. In other words, we need to host it. There are many hosting services out there. For this tutorial, we’ll be using 000webhost. 000webhost is free and offers an easy-to-use interface. Feel free to try out other web hosting services afterwards.

Domain name

Every website needs an address from which to access it. 000webhost provides us with a domain name out of the box: APP_NAME.000webhost.com. This would suffice, for now. If you want a more professional domain name like facecloneapp.com or thefaceclone.co.uk, you’ll have to purchase it from a domain name registrar and “point it” to your web host’s servers. But that’s beyond the scope of this tutorial so we’ll pass. Most domain registrars provide elaborate tutorials on how to setup domains with web hosts so it’s really no biggie.

000webhost

Visit https://www.000webhost.com and sign up for an account. You may need to verify your account by email.

Login and create a new website using the dialog as shown below:

Create a new website on 000webhost

NB: Note the password you set. We’ll use it in a bit.

Say you named your site faceclone-app, you can check it out using the address faceclone-app.000webhost.com.

000webhost’s new website page

FTP

Remember FileZilla from Part 1? We’ll be using FileZilla, a File Transfer Protocol (FTP) app to upload FaceClone to 000webhost.

First go to settings on 000webhost. Make sure FTP transfer is set to on. Also take note of the FTP host name and username.

Now start FileZilla.

Slot in hostname, username and password (the password for your 000webhost site) in the fields a top the screen and click Quick connect.

The left part of FileZilla represents your local computer while the right side represents the remote computer (000webhost’s server). If you’re able to connect successfully, the file system of your site’s server would open up on the right side.

NB: You must be connected to the internet for this to work.

Navigate your computer’s file system to the folder where the FaceClone source code is located. Select all the files and folders there and copy them to your website’s server’s public_html folder.

Once the copying is done, try refreshing your 000webhost website page e.g faceclone-app.000webhost.com. You should see something similar to this:

Everything seems to work f… The DB’s not working. That’s a problem! 😑

DB setup

We need to setup a database on 000webhost to store FaceClone data. Our website’s database server rejected the database parameters we have in the source code i.e root as username with no password. That configuration was for the local database server. We need to change the parameters.

To create a database on 000webhost, navigate to the Manage database tab and click on New Database. You need to set a database name, user and password.

Note that a prefix was added to the database name and user. We’ll be using these values (including the db password you set) to configure the FaceClone app.

Navigate to the File manager tab and click Upload files now. You’ll be redirected to https://files.000webhost.com where you should see all the files uploaded via FTP.

Right click on functions.php and click edit.

Change the database params as appropriate, save and close.

Change the params in functions.php

Now try refreshing your app’s url…

Hurray! It works!!!

Import schema

We’re not done yet. We need to import the database schema in the new database we created on 000webhost. The schema can be found here.

Navigate to the Manage database tab, click on the Manage dropdown for your FaceClone database then select PhpMyAdmin.

Use your database user and password for PhpMyAdmin.

PhpMyAdmin login

PhpMyAdmin home

Select your FaceClone database from the sidebar and click on the import tab.

Select the schema from your computer and click go…

Perfecto!

Test out the whole app to ensure there are no breaking errors lurking around… 😏

Remember to change Show errors in the settings to Off when you’re done testing the app.

Awesome!

P.S. You can share links to your FaceClone app in the comments.

Next steps

The repo for the version of FaceClone running on 000webhost can be found here: https://github.com/nicholaskajoh/faceclone-site.

It’s open to everyone for bug fixes and new features. If you have any ideas and want to code, head over there and contribute to the project.


A big thanks to you if you followed through to this point! 🎉🎉🎉

I wish you success in your software development endeavours. Keep building!!!


Last modified on 2023-03-14