PerfAnalytics

PerfAnalytics is an ecosystem which collects and criticizes web performance data.

Table of contents

• PerfAnalytics
• Subsystems
• Installation 👷🏻
  • Local Development 📍
  • Self Hosted Production 🌐
• Learn More 🤓
• License 📝

Subsystems

The ecosystem consists of 3 subsystem;

1. PerfAnalytics.Js is a client-side library, which collects some performance related key metrics from browser and sends to the PerfAnalytics.API
2. PerfAnalytics.API is a restful API which saves data, posted from PerfAnalytics.JS and returns time specific filtered data.
3. PerfAnalytics.Dashboard is a dashboard which shows perf related metrics in a visualized way.

---

Installation 👷🏻

Install docker & docker compose according to the operating system you are using.
Learn More : https://docs.docker.com/

Local Development 📍

0. Please clone the project.
1. Open terminal in the directory you cloned.
2. Run the following command:

./run.sh

or

bash run.sh

3. Please enter the "1" for local development.

4. Now it's completely ready! 💯
   Dashboard: localhost:3000
   Sample website: localhost:8080
   Backend: localhost:8000
   

PerfAnalytics-OpenAPI / Curl request can be send to test api functionality.

Check this out : https://documenter.getpostman.com/view/11215964/UVByJqRY

Self Hosted Production 🌐

0. First you need 3️ domains.

Frontend domain for the dashboard. (ex: perfanalytics.kagan.dev)
Backend domain for the api. (ex: sample.kagan.dev)

1. Let's create github actions secrets after that create self-hosted runner.

2. Enter the runner registrations info: 🏃

Please go to: your-repo settings/actions/runner, choose which operating system you are using. Type the download and configure commands given to you.

To run github actions runner in the background;

nohup bash run.sh &

3. Now you can see your runner on github ❤️

Then make a commit and let the pipeline work! ✔️

Once complete, your containers will be ready.

4. It's show time for Nginx proxy manager! ✨

   Expose your services easily and securely.

5. Go to the <your-public-ip-address>:81/login address.

6. Please very first login and change the password. Username: admin@example.com Password: changeme

And easily create your proxy hosts. 🔥

Now, go to your github actions directory: (ex: actions-runner/_work/TrendyolCase-KaganMert/TrendyolCase-KaganMert/)

cd actions-runner/_work/<repo-name>/<repo-name>
./run.sh

Select '2' and enter the "Backend domain name":

You need to refresh sample website at least 1 time, after that you can see the dashboard from your frontend domain:

That's it. 💁

Learn More 🤓

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Learn More : https://web.dev/vitals/

License 📝

MIT