Quick, effective and efficient way to test your separately hosted css library on your client, during development
SCSS version of the article
Hi there, thank you for checking out my article. This is the SCSS version of this article, check the LESS version of this article here if you use LESS.
Appreciation
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.
I mustn't fail to mention Israel Obiagba and Joseph Obiagba. Thank you for your time, suggestions, and contribution to making the article better.
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 will be demonstrating with an angular CLI client since that's what I'm learning to use at the moment, but you can experiment with react, angularjs or any other frontend framework. This article does not cover git or automating Javascript development environment, neither does it attempt to teach anything from scratch. It is assumed that you have two ready-made (github) repos you are working with - the client and the library. That said, let's dive right in.
Initial code
I've created library-demo-scss repo and client-demo-scss 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 git@github.com:your-github-username/library-demo-scss.git
- Cd into the CSS library
cd library-demo-scss
- Clone your client there in the root of your library
git clone git@github.com:your-github-username/client-demo-scss.git
- Add the client's folder name
client-demo-scss/to the library's .gitignore file.
We'll assume that the CSS library (styles.scss file) initially contains the .danger-color class. The screenshot below shows the library's .gitignore file and the styles.scss 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 folder 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
.scss filefrom the CSS library using@importrule.
@import '../../../scss/styles.scss';
Add the import at the top of the main .scss file in the client. Use your own path to the library's styles.scss in case yours is different. The screenshot below shows the client's app.component.html file and styles.scss 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.
Conclusion
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.