ButlerCC Webhosting

Free Webhosting for ButlerCC WebDev Students

Home > Tutorials and Resources > FireFTP Tutorial

FireFTP Tutorial

fireftp logoFireFTP is a free, secure, cross-platform FTP client (Addon or Extension) for Mozilla Firefox which provides easy and intuitive access to FTP servers. With FireFTP, transferring your files to a Web server is quick and efficient. FireFTP also includes more advanced features such as: directory comparison and synchronization, SSL encryption, search/filtering, integrity checks, remote editing, and much more!

Where to get FireFTP and how to install it

  1. Open Firefox, browse to https://addons.mozilla.org/en-US/firefox/addon/fireftp/ and click the Install Now button.
  2. The first time you install an addon, you need to click the security Options button at the top of the browser window and choose to Allow the site to install addons. Then, click the Install Now button again.
  3. In the dialog box, click Install.
  4. When the addon has been installed, click the Restart Firefox button to finish the installation.

To run FireFTP

  1. Open Firefox.
  2. From the Firefox Menu (upper left), choose Web Developer > FireFTP -- Opens FireFTP in a new tab of the current window.
    Note: In Firefox version 4 and older, choose Tools > FireFTP.

To setup an FTP connection

Before you can setup an FTP connection, you must acquire a domain name and a Web hosting account. ButlerCC Web Dev students are provided a free webhosting account and subdomain for the class. While these instructions are written for Butlercc Webhosting, the process is similar with many other webhosts, and can be easily adapted for use with other webhosting accounts.

Please check the posted Web Account Information for your class and make sure you have the following information:

Instructions

fireftp components

  1. In the FireFTP tab, click Create an account. Note: To edit an existing connection, select the connection and click Edit.
  2. In the Main tab of the Account Manager dialog box, enter your specific account information: fireftp main settings
    1. Account Name: Can be anything - just identifies this connection
    2. Host: jdoe.butlerccwebdev.net (your assigned subdomain)
    3. Login: username (your assigned account username - 8 characters max - the one you use to login to your cPanel)
    4. Password: your password (the one you set in your cPanel)
  3. In the Connection tab, and enter public_html in the Remote box. Note: All files and folders you want visible to users must be uploaded and stored inside the public_html folder.fireftp connection settings
  4. If you are unable to connect to the web server and have verified that all your account information is correct, clear the Passive Mode checkbox (switches to Active Mode) and try to connect again.
  5. When you are finished, click OK.

Upload files to Web Server

The instructions below show the steps required to upload the portfolio page and topten subfolders to the remote Web server.

FireFTP Connect and Upload

  1. Click Connect/Disconnect to connect to the Web server.
    Commands issued by FireFTP are displayed in the bottom pane. If you’ve set up your connection properly, you will see the contents of the public_html folder on the remote Web server displayed in the right pane.
  2. Click Browse and navigate to your flash drive.
  3. In the left pane (local computer) navigate to your XHTML Projects folder (the root folder for this site).
  4. In the right pane (remote Web server), verify the Location bar displays the /public_html folder (root folder of your account on the Web server). If necessary, select the public_html folder as shown. Note: All files must be uploaded to the public_html folder or one of its subfolders.
  5. In the local computer pane, select your index.html (portfolio page) and topten folder. Hint! Press CTRL + click each file/folder you want to upload.
  6. Click the Upload button (right arrow) to transfer the selected files to the root folder on the Web server. When the selected files/folders have been copied to the remote server, you should see them listed in the public_html folder.
  7. Click Disconnect to indicate you are finished.

Open your home page in a browser

  1. In a browser, enter your subdomain URL in the Address bar (something like http://jdoe.butlerccwebdev.net/)
  2. The remote Web server should return the index.html file, which should be your portfolio page.
  3. Bookmark the URL to make it easier to return later.
  4. Test the link to your topten project's index.html page.

That's it--you now have an official web site!

© 2010-2014, ButlerCC Webhosting. All rights reserved.