Quick, effective and efficient way to test your separately hosted css library on your client, during development
LESS version of the article
Hi there, thank you for checking out my article. This is the LESS version of this article, check the SCSS version of this article here if you use SCSS.
The article is my way of saying thank you to Ushahidi, mentors Anna Losif and Romina Suarez for their patience and guidance while contributing to ushahidi for the first time in October 2020 - it was my first ever contribution to open source and to a very large code base for that matter. This was during the Outreachy 3-weeks contribution period.
I didn't get selected as intern, but the feedback they provided really helped me improve and inspired me to do more - should talk about this in another article I will write later on and link to this article whenever I'm done. I hope this helps to make the work of contributors easier on the platform.
Who is this article for?
It can be really tasking to copy or install CSS files into the client and restarting the client every time you make a single change to your separately hosted CSS library, and need to test these changes in the client. I found this quick and smooth method while working on the less-css-helper-library, where the changes made to the CSS library are immediately seen in the browser on save during development in nodejs environment. I have written my findings in this article for documentation purpose and for anyone who may need it. That is, anyone who has css library hosted separately from the client app.
What this article is about and not about
I've created library-demo-less repo and client-demo-less repo to use as example, they will represent my own separate CSS library and separate client. You can use them as your template to setup your github client and library repos, incase you want to follow the tutorial step by step. Or you can just refer back to them as you read through.
- Clone the CSS library
git clone firstname.lastname@example.org:your-github-username/library-demo-less.git
- Cd into the CSS library
- Clone your client there in the root of your library
git clone email@example.com:your-github-username/client-demo-less.git
- Add the client's folder name
client-demo-less/to the library's .gitignore file.
We'll assume that the CSS library (styles.less file) initially contains the
.danger-color class. The screenshot below shows the library's .gitignore file and the styles.less file opened in my vscode editor (split screen mode).
We can't see git transactions for the client because we added it to the library's .gitignore file. We want to be able to see this as we make changes to our project. We also want to have a feel that we are working on two separate repos, not one. On to the next step.
- Open up the client in another window in your editor.
In vscode, you can do this by clicking on
file at the top left of the editor, click on
new window and then click on the
open folder button to select the client folder. Alternatively, you can just cd into the client folder and type in
code . command to open it up in a new window. Opening the client folder in a separate window will help us see git transactions (modified, untracked etc.), for changes made to the client on the left side of the editor (see screenshot below).
Let's also assume that the client initially has the h1 and button elements as shown in the screenshot below. The
.danger-color class has also been applied to the h1 element in the client.
- import your main
.less filefrom the CSS library using
Add the import at the top of the main
.less file in the client. Use your own path to the library's styles.less in case yours is different. The screenshot below shows the client's app.component.html file and styles.less file opened in my vscode editor (split screen mode).
Don't forget to install your packages and start your script both for client and the library. Output in browser should now show that h1 has a red colour:
Making and testing changes
Let's now add
.btn-style to the library and add the class to the button element in the client (see separate windows opened for the client and the library in the screenshot below). Save your changes and reload your browser.
Voila! The button has changed! Once you are satisfied with the changes made, you can now commit your changes in the client and push to github straight away. Also just cd into the library, commit and push your changes.
So like I wrote earlier, you can try to implement it in whatever framework you use. I also mentioned that I found this method while working on the less-css-helper-library. The article is to also help to make contributions to the project easier.
If you like the project and wish to contribute, find the repo and repos for some other nice projects at Code Collabo - an open source community I created for developing cool real world projects and for collaboration.
Freely share this post and let me know what you think in the comments.