Introduction

In this guide, we're going to show you how to connect your cPanel to VS Code. This connection will allow you to securely access and manage your website files directly from your IDE, with the added benefit of real-time updates on your live server. With register.lk's reliable hosting services, setting up this connection is straightforward, providing a seamless experience for developers at all levels.

1. Setup FTP Account

The first step in connecting your IDE to cPanel is setting up an FTP account. Here's how:

• Log into cPanel and navigate to FTP Accounts: Start by logging into your cPanel. In cPanel, head to the "Files" section and select "FTP Accounts".

• Create an FTP Account:
  1. Choose a username and set a strong password in the FTP Accounts section.
  2. Select the directory where your website files are stored.
  3. (Optional) Set a quota for the FTP account.
  4. Click "Create FTP Account".

Pro Tip: Make sure the directory is correctly set up to avoid any issues when accessing files through VS Code.

2. Install FTP Simple Extension in VS Code

With your FTP account ready, the next step is to set up your IDE for file transfer.

• Launch VS Code: Open VS Code on your computer.
• Install FTP Simple:
  1. Click on the "Extensions" tab in VS Code.
  2. Search for "ftp-Simple" and hit "Install".
  3. Confirm the installation.

3. Configure FTP Simple in VS Code

Now, it's time to configure the FTP settings in VS Code.

• Go to 'Configure FTP Client' in cPanel: Under the relevant FTP account that you created in the previous step, click on the 'Configure FTP Client' link. This will provide you with the necessary FTP account details.

• Open Configuration: In VS Code, press F1, type "ftp-simple : Config - FTP connection setting," and select the option.

• Edit Configuration File:
  1. Assign a name to your host.
  2. Host: Enter your shared IP (the shared IP address is located under General Information on the cPanel main page).
  3. Set the port to 21.
  4. Enter the FTP account username and password (you can copy these from the 'Configure FTP Client' section in cPanel).
  5. Specify the directory path and enable autosave by setting it to 'true'.
  6. Turn off confirmation prompts by setting confirm it to 'false'. (Disabling confirmation prompts can streamline your workflow by automatically uploading changes without additional prompts.)


• Save Configuration: Save your changes.

4. Connect VS Code to cPanel

Now, let's establish the connection between your IDE and cPanel.

• Open Remote Directory: Press F1, search for "ftp-simple : Remote directory open to workspace" and select it.
• Choose Directory: Pick the directory you configured in the previous step.
• View Files: Your workspace in VS Code will now display all files from the selected directory.

5. Test Connection

To ensure everything is set up correctly:

• Make Edits in VS Code: Open a file in your workspace, make some changes, and save.
• Verify Changes: Refresh the relevant page on your live server to see if the changes are reflected in real-time.

Conclusion

By connecting your IDE to cPanel, you've streamlined your web development process, significantly reducing the risk of errors and improving deployment speed. This setup allows you to manage your files more efficiently and ensures that updates are made seamlessly in real-time. However, always remember the importance of regular backups when working directly with server files. Backups provide a safety net, protecting your work from unexpected issues. At register.lk, we're committed to supporting your development journey with reliable hosting solutions that make managing your website easier and more secure.