DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Check React Project Compilation Status in different environments - Free Tool
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Check React Project Compilation Status in different environments - Free Tool

Hello Coders!

This article presents a free tool built on top of GitHub Actions that checks the compilation status of a React Project using different NodeJs versions, and builders (Yarn, NPM). The tool accepts as input a list of external React projects and for each one, a build is executed under the GitHub Actions. In the end, for each build a report file plus a screenshot if the build was successful. Thanks for reading!


✨ How it works

This simple tool might be useful when we need o check if a React Project can be used in a specific environment like Node 12.x and Yarn or Node 18.x and NPM. Here is the input expected by this GitHub Actions Wrapper:

Once all the information is saved and committed, GitHub triggers a build matrix and the tool is able to extract a report for each build. For instance, if we specify two React kits to be tested, NodeJS 16.x and Yarn as the compiler, the tool executes 2 tests:

  • Test #1: React Kit 1, using Node 16.x and Yarn
  • Test #2: React Kit 2, using Node 16.x and Yarn

The order cannot be controlled because GitHub uses a separate thread for each test.


✨ The Output

When GitHub detects the commit, the build flow is launched for each item in the testing matrix. Below are the screenshots and testing logs for React Horizon UI, an open-source kit tested with Node 16 and Yarn.


GitHub Actions - Test page

GitHub Actions - Workflow Page


GitHub Actions - Runtime Page

GitHub Actions - Runtime Page


Once the test is finished, a report.zip artifact is provided with two files:

  • A Log file with a status code for each step
  • Application screenshot if the build was successful

The name of the report file merges the context of the test using all contexts: the name of the kit, the builder used (Yarn in this case), the node version, and execution status.

This small improvement might be used when we have many tests and the success rate can be determined by counting the files that end in STATUS_OK.

GitHub Actions - Test Reports


Thanks for reading! in case anyone finds this tool useful, feel free to use it (the license is MIT) and ask for support (if necessary). For more tools and starters feel free to access:

Top comments (10)

Collapse
 
uithemes profile image
ui-themes

Only Ubuntu is supported?
ty

Collapse
 
sm0ke profile image
Sm0ke Author

All OSs supported by Github actions: CentOS, Windows, MacOS
πŸš€πŸš€

Collapse
 
vpominchuk profile image
Vasyl Pominchuk

thanks

Thread Thread
 
sm0ke profile image
Sm0ke Author

Yw! Feel free to suggest features.
The tool is minimal.

Collapse
 
rarestoma profile image
rarestoma

Really great tool, thanks for sharing!

Collapse
 
sm0ke profile image
Sm0ke Author

Ty πŸš€πŸš€

Collapse
 
crearesite profile image
WebsiteMarket

This is useful

Collapse
 
sm0ke profile image
Sm0ke Author

πŸš€πŸš€

Collapse
 
fredotutsch profile image
Frederick Latispannenden-RΓΌss

Just what I was looking for! Appreciate the hard work!

Mit freundlichen GrΓΌssen aus Kassel
Frederik
Florist

Collapse
 
sm0ke profile image
Sm0ke Author

πŸš€πŸš€

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›