the best development experience for WordPress
This project aims to bring the best features of the latest tooling to Wordpress theme development. Namely, this project brings the hot module replacement experience provided by Webpack, mixed with SCSS and Babel, Eslint super setup along with the superpowers of Docker containers.
- docker
- docker-compose
And optionally dns-proxy-server to resolve for you hostnames and have a better experience.
Download or clone the project from GitHub specifing a custom directory name for your project, ideally the directory should be named as the hostname of the website you are creating, so for example name it example.com.
git clone https://github.com/b4dnewz/webpack-wordpress.git <my-project>
Than you need to install the node dependencies necessary for development, such as webpack and all his loaders and finally the images needed for the container, in case you don't have it already.
Before installing the dependencies and starting the project it should be configured with the new name and informations, to do so you have two main options:
You can manually execute the node setup script by moving inside the project folder and running node ./setup.js, or you can use the preinstall script and directly type:
cd example.com
npm install
This will run the setup script if not already called once and it will ask you some questions in order to customize the project before installing modules.
You can manually update your files by replacing the occurences of wordpress.development hostname is the .env file or any other file and you can set the package.json properties to match your project name and author informations, for example:
{
"name": "example.com",
"description": "The example.com website development image",
"version": "0.1.0",
"author": "My Company"
}When your project is ready start the WordPress instance by running docker compose, it will pull the required images (if not already present) and start a dedicated network with the site and database instances.
docker-compose up
Once docker has done and all containers has been created open a web browser and visit the address http://localhost:8080 or the port you specified in the configuration, and you will see the site, hooray!.
If you are using dns-proxy-server as suggested, you can also reach the website using the hostname (project name) you entered during the installation process, so based on the example before http://example.com should be reachable and should contain your WordPress site.
If a new instance is started you should see the WordPress installation page, if not stop and remove the containers and repeat the steps from the beginning.
Be sure to setup WordPress with the correct url to avoid unwanted redirects, for example if you are not using the dns proxy setup the website on localhost:port otherwise on hostname where hostname is the name of your project specified in the .env file.
Now you should have a fully running dockerized WordPress website, inside a new git repository with a development workspace ready to be used, next step in the actual project development.
If you want to benefit all the cool things offered for development, open another terminal and type:
npm run start
yarn run start
To start the development server than visit http://localhost:8088 or the port you specified in the configuration, you should see the proxied website with the hot module replacemente enabled and livereload for HTML and PHP file changes.
Note that is you are using dns-proxy-server you can directly query the hostname you specified during the initial setup and reach your WordPress website.
That's it.. if you liked it leave a star and talk to a friend about it.
For the theme development, clone the repository on your machine, enter the root directory and start the example website after pulling the required images.
git clone https://github.com/b4dnewz/wordpress-development.git
cd wordpress-development
docker-compose up
After docker-compose has pulled all the images and created the containers, you can visit the default hostname at wordpress.development and play around with the theme or test the configuration trying to find some potential issues or updates, that are mainly use-case needs.
If you want to contribute to the source code of the default theme that comes with the project or propose your configuration or updates, please follow the contributing guide shown below.
These are a few things that I think would make this tool just that much better
- add a cool banner and good documentation
- add build test and travis ci integration
- Create an issue and describe your idea
- Fork the project (https://github.com/b4dnewz/wordpress-development/fork)
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Publish the branch (
git push origin my-new-feature) - Create a new Pull Request
This project is released under MIT LICENSE from Filippo b4dnewz Conti.