Vantage is a web optimization tool designed for NEXTjs apps.

Related tags

Learning resource nextjs seo lighthouse
Overview

Vantage Logo

VANTAGE

Build NPM Downloads Issues License

Vantage is a web optimization tool designed for NEXTjs apps.

  • Uses Google lighthouse under the hood to determine key web vital scores and improvement suggestions.
  • Evaluates your app in the background with every commit.
  • Automatically evaluates every page in the app by traversing the project's endpoints to capture data.
  • Allows you to compare snapshots to see exactly which recommendations changed, and how your updates have directly influenced specific metrics.

Get Started

Install as a dev dependency in your project to get started.

npm install vantage-next --save-dev

Documentation

View further documentation, config setup, and troubleshooting guides at:

https://www.vantagenext.com/docs

Vantage Dashboard

Vantage Dashboard

Compare Commit Results:

Compare Commits

Choose Endpoints:

Choose Endpoints

Technologies used

  • Google Lighthouse
  • Reactjs
  • Material UI
  • Redux Toolkit
  • Recharts
  • SASS
  • Webpack
  • Puppeteer
  • Node

Contributors

Want to Contribute?

  1. Clone the repo and make a new branch: $ git checkout https://github.com/oslabs-beta/Vantage.git -b [name_of_new_branch].
  2. Add a feature, fix a bug, or refactor some code :)
    • Make sure to lint your code!
  3. Write/update tests for the changes you made, if necessary.
  4. Run unit & integration tests and make sure all tests pass: npm test.
  5. Open a Pull Request with a comprehensive description of changes to the dev branch.
  6. Open a Pull Request to the docs and Contributors if necessary.

Thank you!

Comments
  • Doesn't work with projects using /src/ directory

    Doesn't work with projects using /src/ directory

    My project has all pages/components/ etc etc under the /src directory. This breaks the whole lighthouse package since it expects /pages to be in the root.

    opened by ashtonlance 3
  • fix: add baseurl variable to config & use it before getting routes

    fix: add baseurl variable to config & use it before getting routes

    This is simply temporary solution for working with custom baseUrl. (#88 #89)

    For now users can define baseUrl in vantage config.

    But in the future that should be automagically checked from tsconfig.json and next.config.js

    Example: "baseUrl": "./src"

    I don't know if it's possible to contribute for docs.

    opened by oskar-gmerek 2
  • fix 'cd falsepages' command issue

    fix 'cd falsepages' command issue

    #91 introduced a bug if nextAppSettings.srcDirectory === false (default)

    This results in the command being evaluated as cd falsepages (instead of the expected cd pages).

    The fix is simple, use a ternary instead of conditional chaining.

    This bug appears to affect vantage-next at v1.0.4 and v1.0.5.

    opened by eoneill 0
  • Suggestion: With Husky / custom structure

    Suggestion: With Husky / custom structure

    1. If you use husky then you need to move post-commit hook from .git to .husky, otherwise vantage will do not start.

    Some info about it should be added to docs or some kind of detection during installation if that is possible.

    1. as mentioned already in #88 vantage do not work with other than default structure, will be good to get structure from tsconfig.json and next.config.js files
    opened by oskar-gmerek 0
  • Install fails

    Install fails

    Would like to test this but install fails on windows with:

    npm ERR! command C:\Windows\system32\cmd.exe /d /s /c ./package/git-hooks/gitHookInstall.js npm ERR! '.' is not recognized as an internal or external command, npm ERR! operable program or batch file.

    Any ideas?

    opened by mike-niemand 1
Owner
OSLabs Beta
OSLabs Beta
GitHub
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
🍉 Water is a micro-ORM + QueryBuilder designed to facilitate queries and operations on PostgreSQL databases designed to work in Melon

?? Water Water is a micro-ORM + QueryBuilder designed to facilitate queries and operations on PostgreSQL databases designed to work in MelonRuntime In

Melon Runtime 22 Aug 6, 2022
LogTure - A minimal designed, fully customizable, and extensible modern personal blogging framework, built with Nextjs.

LogTure - A minimal designed, fully customizable, and extensible modern personal blogging framework, built with Nextjs.

Sam Zhang 14 Aug 26, 2022
NextJS Site of @jayantkageri, Designed with TailwindCSS

Jayant Hegde Kageri This repository contains the Source Code of the Website jayantkageri.in Environment Variables To run this website, you will need t

Jayant Hegde Kageri 13 Nov 27, 2022
Node WebStation is a powerful tool designed for developers allowing them to create advanced web sockets for any use all without having the requirement to code.

Node WebStation Node WebStation is a powerful tool designed for developers to use to create an advanced WebStation for any use all without not having

null 2 Jun 4, 2022
Android ROM device support and bringup tool, designed for maximum automation and speed.

adevtool Android ROM device support and bringup tool, designed for maximum automation and speed. Features This tool automates the following tasks for

Danny Lin 186 Dec 21, 2022
A to-do list app is a productivity tool designed to help users to create and maintain lists of tasks that they need to complete and it allows user to edit their tasks even after the task is saved. Built with CSS, HTML, and JAVASCRIPT.

Tumaini Maganiko ?? Table of Contents ?? Table of Contents ?? To Do List PROJECT ?? Built With Tech Stack Key Features ?? Live Demo ?? Getting Started

Tumaini Maganiko 7 May 9, 2023
Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Flatline Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome. Load the extension in Firefox Clone the repository Open

Cleo Menezes Jr. 43 Nov 7, 2022
Sample apps showing how to build music and video apps for Xbox using a WebView.

description languages name page_type products urlFragment Sample showing how to build music and video apps using primarily web technologies for Xbox.

Microsoft 11 Dec 14, 2022
why make apps to increase focus -- when you can make apps to reduce focus

impossifocus ?? What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Aleem Rehmtulla 10 Nov 30, 2022
Next.js and Apollo-Client web application, designed for learning and real-world applicability.

NextJs Apollo Boilerplate Boilerplate for building applications using Next.js and Apollo This boilerplate is made for those who want to start a new pr

Youngjin Lim 9 Sep 4, 2022
Kâşif is a web based file explorer designed for every platform.

Kâşif the Explorer Kâşif Turkish noun Explorer A person who travels to places where few people have been before or places that are unknown to them, in

Muhammed Ali CAN 14 Jul 2, 2022
A web app designed to keep track of activities that are done and those that are and not done. Users can add, delete, mark as completed and update the activities. Built with Javscript, html, css and webpack.e your activites

ToDoListApp A web app designed to help web keep track of activities that are done and those that are still pending. Users can add, delete, mark as com

Francis Wayungi 6 Dec 23, 2022
Superlight vanilla javascript plugin, for modern web dropdowns. Supporting multi-options, search and images. Designed to be seamlessly themed

Superlight vanilla javascript dropdowns by LCweb Need to jump off of jQuery (or any other) dependency? Other packages are too heavy to just tweak sele

Luca 10 Dec 26, 2022
Chat app using Azure Web PubSub, Static Web Apps and other Azure services

Chatr - Azure Web PubSub Sample App This is a demonstration & sample application designed to be a simple multi-user web based chat system. It provides

Ben Coleman 55 Dec 31, 2022
Youtube Summarizer is a web-based tool that uses ChatGPT to automatically generate summaries of YouTube videos. It lets you learn key points quickly and easily without having to watch entire lengthy videos. It is enough for users to paste the YouTube video URL into the tool and summarize the video.

YOUTUBE SUBTİTLE SUMMARIZER youtubesummarizer.tech Summarizer is a web-based tool that uses ChatGPT to automatically generate summaries of YouTube vid

Ahmet Taner Atila 32 Aug 12, 2023
Movies and series web app developed using NextJS.

Disney+ Clone Movies and series web app developed using NextJS. Deployed Link : https://disney-clone-ndmiypj8n-suchitd11.vercel.app/ Preview Login Hom

Suchit Deshmukh 16 Dec 9, 2022