Hello Readers!!
Welcome back with another new learning. In the previous blog, we learned about two ways of web development: Coding and non-coding. As a WordPress developer, I will tell you all the interesting facts, and simple ways to start your workspace. The First and Main step in web development is setting up a local development environment for creating and testing websites or applications before deploying them to a live server. Working in a local environment helps you to experiment, debug, and develop without affecting the live one.
In this blog, let's walk through how to set up a local web development environment for common web technologies like HTML, CSS, JavaScript, PHP, and databases like MySQL. In the end, let’s have a working environment about how to setup a local environment, and develop and test web applications.
Before going to know how-to, let’s know why:
Learning: You can develop your own space in a risk-free environment.
Offline Development: You can develop a website without an internet connection
Development Speed: Working locally helps to speed up our site when your whole storage is your local machine.
Easy Fix: The local environment helps you to fix your site easier than a site that is hosted live.
Let’s dive into our live experiment:
Step 1: Choose a Local Development Environment Tool
Run your website locally, needs a local server environment that includes PHP, MySQL, and Apache (or Nginx). There are a lot of local servers like Flywheel, XAMPP, Docker, and MAMP. One of the main local server environments is:
XAMPP: A free, open-source software package that includes Apache, MySQL, and PHP. It is available for Windows, macOS, and Linux.
Step 2: Install XAMPP
- Go to the XAMPP website and download the version depending on your operating system (Windows, macOS).
- Open the downloaded installer and follow the instructions to complete the installation process.
- Once done, open the XAMPP control panel. In the XAMPP Control Panel, click Start next to Apache (webserver) and MySQL (database server). The green indicator should light up, showing that both services are running.
Step 3: Setting up the First Local Website
Navigate to the Web Directory:
- On Windows, go to C:\xampp\htdocs.
- On macOS, go to /Applications/XAMPP/htdocs. This is the folder where all of your local websites will stored.
Create Your Project Folder:
Inside the htdocs directory, create a folder for your new project. For example, create a folder named firstwebsite.
Step 4: Download WordPress
Download WordPress:
Go to wordpress.com and download the latest version of WordPress. Extract the WordPress ZIP file, which contains all of WordPress’s core files.
Move WordPress to the XAMPP Web Directory:
Copy the extracted WordPress folder to the htdocs directory inside your firstwebsite folder in XAMPP installation directory.
Step 5: Open Your Local Website:
Open your web browser and go to http://localhost/firstwebsite. You should see the webpage displaying the WordPress site.
Step 6: Set Up a Local Database
If you plan to develop a dynamic website that requires a database (such as a blog, CMS, or user registration system), you’ll need to create a local database.
Access phpMyAdmin:
In the XAMPP Control Panel, click on Admin next to MySQL. This will open phpMyAdmin in your web browser at http://localhost/phpmyadmin.
Create a Database:
Inside phpMyAdmin, click the Databases tab.
In the "Database name" field, enter a name for your new database, for example, test_db, and click Create.
Access Your Database:
You can now use this database in your local web project by connecting to localhost using PHP or another back-end technology.
- Go to the wp-config-sample file, duplicate it, and save it as wp-config.
- Now, Edit the wp-config file and set your database name, username, and password.
Fill in the details and click install WordPress.
Login using your credentials and let’s get started!!.
Conclusion
Now you've successfully set up a local development environment using XAMPP, created a basic static website, and experimented with PHP and MySQL for dynamic content. You also tested JavaScript to interact with the user.
By following this process, you have easily set up a fully functional local development environment where you can build, test, and debug your websites or web applications in a safe and efficient manner in your own way. Happy coding Buddies!