DEV Community

Cover image for WordPress Development Environment on Pop OS
Teszáry Péter
Teszáry Péter

Posted on

WordPress Development Environment on Pop OS

#wordpress #development #popos

WordPress Boiler Plate Chase part 2.

The devil is in the small details...

So reflecting on my previous article (WordPress Boiler Plate Chase), I might find some solution to it. Also, it has a short story, that has happened this weekend.

So previously I've started to breathe life into Sage's boilerplate, with no luck. I thought it was some specialized dependency problem, that was caused by Pop OS. So I decided to look into a different way for no, cause I want to make some progress. I'll get back to is when I am feeling comfortable with packages and dependencies like composer and node.

VS Code extensions are not working

I found a Tailwind boilerplate which looks good, and it was easy to install (I thought). BUT. Then I've wanted to install the Tailwind CSS Intellisense extension to my VS Code, because I am a bit lazy with remembering CSS classes, so it might help. I am using Tailwind with my WordPress projects, and I really like it, but it is easier to cheat a bit with a classes-helper like that.

Ao after the installation an error message came up.

Tailwind CSS: Can't resolve 'lodash' in ....

Or something like that. I've tried to get it back from my browser history, but It was just too many records. Anyways, I could not find the answer. But. I thought that might be a problem with Pop Os again. I've tried to uninstall, and reinstall Nodejs & npm again. Auto removes, purge and clear everything with an auto fix as well. Nothing worked. So I thought I will install the good old Ubuntu on my laptop again (the problems above were on my desktop PC).

I have installed ubuntu beside my Pop Os, cause I did not want to go through the install processes of each Os week after week. I have installed 20.04 of Ubuntu, unfortunately. I did not check the version on the bootable Pendrive. So I had to upgrade after installation.

Years passed while the terminal was updating the stuff. I decided to watch the Shang-Chi movie, and come back in the morning. In the morning everything was fine. I have installed Nodejs and npm. I have installed Local by Flywheel (as I told you I am lazy) and VS code (and also some Ubuntu tweaks). Fresh WordPress install with the TailPress theme/repo in it. Great. Almost everything is green. Even the npm watch is working!!!

Then I wanted to install Tailwind CSS Intellisense with this fresh installation. Same error as previously. I made a coffee.

So the problem might not be with Ubuntu or Pop Os either. After some investigation, I have found the right solution with the right installation methods. I will create a Shell script later on and update the post with it.

First of all, you have to clear all that you (probably) have done, to solve the problem.

Source

CLEAR EVERYTHING 

sudo apt clean
sudo apt update -m
sudo dpkg --configure -a
sudo apt install -f
sudo apt full-upgrade
sudo apt autoremove --purge
Enter fullscreen mode Exit fullscreen mode

THEN 

sudo apt install pop-desktop
Enter fullscreen mode Exit fullscreen mode

Removing Nodejs and Npm

Source

sudo apt-get remove nodejs npm node
sudo apt-get purge nodejs
Enter fullscreen mode Exit fullscreen mode

Now remove .node and .npm folders from your system 

sudo rm -rf /usr/local/bin/npm 
sudo rm -rf /usr/local/share/man/man1/node* 
sudo rm -rf /usr/local/lib/dtrace/node.d 
sudo rm -rf ~/.npm 
sudo rm -rf ~/.node-gyp 
sudo rm -rf /opt/local/bin/node 
sudo rm -rf opt/local/include/node 
sudo rm -rf /opt/local/lib/node_modules  

sudo rm -rf /usr/local/lib/node*
sudo rm -rf /usr/local/include/node*
sudo rm -rf /usr/local/bin/node*
Enter fullscreen mode Exit fullscreen mode

Go to home directory and remove any node or node_modules directory, if exists.

You can verify your uninstallation by these commands; they should not output anything.

which node
which nodejs
which npm
Enter fullscreen mode Exit fullscreen mode

And now, start it over, but first of all with Composer

NOTE: YOU HAVE TO INSTALL ALL THE FOLLOWING GLOBALLY!

So, not from VS Code's terminal in the theme folder of your WordPress theme

Like this

Source

Installing PHP and Additional Dependencies

First, update the package manager cache by running

sudo apt update
Enter fullscreen mode Exit fullscreen mode

Next, run the following command to install the required packages:

sudo apt install php-cli unzip
Enter fullscreen mode Exit fullscreen mode

Downloading and Installing Composer 

cd ~
Enter fullscreen mode Exit fullscreen mode 
curl -sS https://getcomposer.org/installer -o /tmp/composer-setup.php
Enter fullscreen mode Exit fullscreen mode

Next, we’ll verify that the downloaded installer matches the SHA-384 hash for the latest installer found on the Composer Public Keys / Signatures page. To facilitate the verification step, you can use the following command to programmatically obtain the latest hash from the Composer page and store it in a shell variable:

HASH=`curl -sS https://composer.github.io/installer.sig`
Enter fullscreen mode Exit fullscreen mode

If you want to verify the obtained value, you can run:

echo $HASH
Enter fullscreen mode Exit fullscreen mode 
Output
e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a
Enter fullscreen mode Exit fullscreen mode

Now execute the following PHP code, as provided in the Composer download page, to verify that the installation script is safe to run:

php -r "if (hash_file('SHA384', '/tmp/composer-setup.php') === '$HASH') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
Enter fullscreen mode Exit fullscreen mode

You’ll see the following output:

Installer verified
Enter fullscreen mode Exit fullscreen mode

To install composer globally, use the following command which will download and install Composer as a system-wide command named composer, under /usr/local/bin:

sudo php /tmp/composer-setup.php --install-dir=/usr/local/bin --filename=composer
Enter fullscreen mode Exit fullscreen mode

You’ll see output similar to this:

Output
All settings correct for using Composer
Downloading...

Composer (version 1.10.5) successfully installed to: /usr/local/bin/composer
Use it: php /usr/local/bin/composer
Enter fullscreen mode Exit fullscreen mode

To test your installation, run:

composer
Enter fullscreen mode Exit fullscreen mode

Output:

Output
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.10.5 2020-04-10 11:44:22

Usage:
  command [options] [arguments]

Options:
  -h, --help                     Display this help message
  -q, --quiet                    Do not output any message
  -V, --version                  Display this application version
      --ansi                     Force ANSI output
      --no-ansi                  Disable ANSI output
  -n, --no-interaction           Do not ask any interactive question
      --profile                  Display timing and memory usage information
      --no-plugins               Whether to disable plugins.
  -d, --working-dir=WORKING-DIR  If specified, use the given directory as working directory.
      --no-cache                 Prevent use of the cache
  -v|vv|vvv, --verbose           Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
...
Enter fullscreen mode Exit fullscreen mode

Then install Nodejs & npm

Source

Start by updating the packages list by typing:

sudo apt update
Enter fullscreen mode Exit fullscreen mode

Install nodejs using the apt package manager: 

sudo apt install nodejs npm
Enter fullscreen mode Exit fullscreen mode

To launch: 

nodejs
Enter fullscreen mode Exit fullscreen mode

To verify: 

node -v && npm -v
Enter fullscreen mode Exit fullscreen mode

Then you can install the Tailwind boilerplate into your WordPress theme folder:

Source

Open the themes folder in VS Code (where all your themes are NOT the exact theme order (in case it does not exist yet))

Open a terminal in VS Code

composer global require jeffreyvanrossum/tailpress-installer
Enter fullscreen mode Exit fullscreen mode

Clone repo

git clone https://github.com/jeffreyvr/tailpress.git && cd tailpress
Enter fullscreen mode Exit fullscreen mode

Run

rm -rf .git
Enter fullscreen mode Exit fullscreen mode

Run

npm install
Enter fullscreen mode Exit fullscreen mode

Run

npm run watch
Enter fullscreen mode Exit fullscreen mode

to start developing

And now you can use Tailwind CSS Intellisense...

Hope it helps!

Comment if it is! :)

Good Luck!

If there is something wrong, don't hesitate to comment it under, so I can correct my article. Thanks!

Top comments (0)

Read next

devashishnayak profile image

Elevate Your VS Code Terminal with a Sleek Starship Prompt

Devashish Nayak -

stacy-roll profile image

How to get the Ctrl + C event in rust? 🔭🔮

Stacy Roll -

dgihost profile image

WP Forms and its importance? How to secure your WP Forms?

Gurpinder Singh -

misterion96 profile image

The Front-End Development we’re used to is dying

Maksim Dolgih -