Category: Development

Posted on

Dart SASS in WSL2

My Laravel project setup for Windows, Docker, WSL2 & PHPStorm

This is a minor update to an earlier post; the setup is simpler than previously described and the result is the same, Dart SASS in WSL2

You will need to download the latest release of dart sass from the official repo.

  1. Download and extract the dart-sass release you are going to use, at the time of this post I opted for https://github.com/sass/dart-sass/releases/download/1.26.10/dart-sass-1.26.10-windows-x64.zip
  2. Open your .bashrc file in WSL – vi ~/.bashrc
  3. Add export PATH="/path/to/dart-sass:$PATH" to the end of the file, in my case export PATH="/mnt/c/Users/USERNAME/Documents/GitHub/dart-sass:$PATH"

To test everything is working, open WSL and enter sass --version; you should see the version number.

Dart SASS is one the tools I install via WS. It is now longer part of y typically Laravel project setup, these days I have mostly switched to Tailwind for new projects.

Posted on

Connect multiple Docker compose apps

Much of the time I’m working on the Costs to Expect App and Website I code against the live Costs to Expect API. I’m reading data, so it makes sense to read live data, in my case the expenses for our children.

This approach isn’t suitable when I’m working on editing, creation, and deletion tasks; I don’t want lots of test data appearing on the API, and I don’t want to modify or remove live data.

In this instance, I want a local version of my Apps to use my local development instance of the API; this is simple to set up with docker networks.

I use Docker for development, the App, Website and API development environments are all Docker compose.

To connect two or more, compose apps, you need to create a shared network and then update each docker-compose file to use the newly created network.

To create a network, in your CLI enter.

docker network create <network-name>

Now, update your docker-compose files, we need to add a networks section.

  networks: 
    default: 
      external: 
        name: <network-name>

Now, when you bring your apps up, they will be able to communicate. Assuming your apps connect over HTTP, your apps can talk to each other using this format, http://:. In my case, my Website and App connect to the API using http://api:.