WordPress Development Environment on Pop OS
Tags: wordpress, development, popos
Published: 2022-02-13 07:43:49

## 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](https://github.com/jeffreyvr/tailpress) 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](https://support.system76.com/articles/package-manager-pop/)


# 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

``` 

## THEN


```
sudo apt install pop-desktop

``` 

## Removing Nodejs and Npm
[Source](https://stackoverflow.com/questions/32426601/how-can-i-completely-uninstall-nodejs-npm-and-node-in-ubuntu)

```
sudo apt-get remove nodejs npm node
sudo apt-get purge nodejs

``` 

## 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*
``` 

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

``` 

### 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](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-composer-on-ubuntu-20-04)


### Installing PHP and Additional Dependencies

First, update the package manager cache by running


```
sudo apt update

``` 

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

```
sudo apt install php-cli unzip

``` 

### Downloading and Installing Composer


```
cd ~

``` 


```
curl -sS https://getcomposer.org/installer -o /tmp/composer-setup.php

``` 

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`

``` 

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


```
echo $HASH

``` 


```
Output
e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a

``` 

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;"

``` 

You’ll see the following output:

```
Installer verified

``` 

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

``` 

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

``` 

To test your installation, run:


```
composer

``` 

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
...

``` 



### Then install Nodejs & npm

[Source](https://ashokma.com/2019/02/18/install-nodejs-and-npm-pop-os/)

Start by updating the packages list by typing:


```
sudo apt update
``` 

### Install nodejs using the apt package manager:


```
sudo apt install nodejs npm
``` 

### To launch:


```
nodejs
``` 

### To verify:


```
node -v && npm -v 
``` 


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

[Source](https://github.com/jeffreyvr/tailpress)

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

``` 

Clone repo


```
git clone https://github.com/jeffreyvr/tailpress.git && cd tailpress
``` 

Run

```
rm -rf .git
``` 

Run


```
npm install
``` 

Run


```
npm run watch
``` 
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!