Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Website style analyzer for designers. This is the service part that does the analyzation etc.

License

Notifications You must be signed in to change notification settings

micmro/Stylify-Me

Repository files navigation

Stylify Me

A Style Guide Generator - using NodeJS and Puppeteer, an API to control Chrome. See it live at http://stylifyme.com

This repo only contains the web service.

Deployment

We host our app on EC2

Example installation steps on an Ubuntu image:

# install chromium
sudo apt-get update
sudo apt-get install -y libappindicator1 fonts-liberation
sudo apt-get install -y chromium-browser

# install node 20
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

#install puppeteer
sudo apt-get install -y gcc g++ make
sudo npm install -g puppeteer

# download and unzip repo
wget https://github.com/micmro/Stylify-Me/archive/main.tar.gz
tar -xzvf ./main.tar.gz
rm main.tar.gz
mv Stylify-Me-main stylifyme
cd stylifyme/

#install dependencies and start on port 80
npm ci
sudo PORT=80 npm run start

Running the service locally

  1. Make sure you have NodeJS installed and running
  2. Install dependencies with npm npm install
  3. Update the referrer urls in /src/config.mjs with the urls of your frontend (local and production):
  4. Start the nodeJs app with npm run start (or node app.mjs)
  5. Query http://localhost:5000/query?url=https%3A%2F%2Fgoogle.com (assuming you run your app on port 5000) and you should be able to see a JSON response I recommend using Postman for debugging your api

Frontend

This repo only contains the web service, you can query it from the front end like this:

var urlToQuery = encodeURIComponent("http://google.com");

$.ajax({
	dataType: "jsonp",
	url: "http://youreServiceUrl.com/query?url="+ urlToQuery,
	success: function(data){
		if(data["error"]){
			alert("Error: " + data["error"]);
			return;
		}
		//PROCESS the result
	},
	timeout : 10000
}).fail(function(){
	alert("Could not query site, the service might be down, please try again later.");
});

About

Website style analyzer for designers. This is the service part that does the analyzation etc.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •