I develop a website with Laravel and now I'd like to add Yoast plugin to it's blogger section to improve site blogs.
as I can see from Yoast github there is a javascript version of it that can be add to custom sites.
the usage help is not very helpful, so if any body can help me.

var SnippetPreview = require( "yoastseo" ).SnippetPreview;
var App = require( "yoastseo" ).App;

window.onload = function() {
var focusKeywordField = document.getElementById( "focusKeyword" );
var contentField = document.getElementById( "content" );

var snippetPreview = new SnippetPreview({
    targetElement: document.getElementById( "snippet" )
});

var app = new App({
    snippetPreview: snippetPreview,
    targets: {
        output: "output"
    },
    callbacks: {
        getData: function() {
            return {
                keyword: focusKeywordField.value,
                text: contentField.value
            };
        }
    }
});

app.refresh();

focusKeywordField.addEventListener( 'change', app.refresh.bind( app ) );
contentField.addEventListener( 'change', app.refresh.bind( app ) );
};

the usage help is with node.js but how can I add it to php backend and html+js front end.
thanks you.

I develop a website with Laravel and now I'd like to add Yoast plugin to it's blogger section to improve site blogs.
as I can see from Yoast github there is a javascript version of it that can be add to custom sites.
the usage help is not very helpful, so if any body can help me.

var SnippetPreview = require( "yoastseo" ).SnippetPreview;
var App = require( "yoastseo" ).App;

window.onload = function() {
var focusKeywordField = document.getElementById( "focusKeyword" );
var contentField = document.getElementById( "content" );

var snippetPreview = new SnippetPreview({
    targetElement: document.getElementById( "snippet" )
});

var app = new App({
    snippetPreview: snippetPreview,
    targets: {
        output: "output"
    },
    callbacks: {
        getData: function() {
            return {
                keyword: focusKeywordField.value,
                text: contentField.value
            };
        }
    }
});

app.refresh();

focusKeywordField.addEventListener( 'change', app.refresh.bind( app ) );
contentField.addEventListener( 'change', app.refresh.bind( app ) );
};

the usage help is with node.js but how can I add it to php backend and html+js front end.
thanks you.

• javascript
• php
• laravel
• browserify
• yoast

• 1 I can not install yoast.js using npm. I am using this mand "npm install github./Yoast/YoastSEO.js#develop" – Mohammad Tasneem Faizyab Commented Jan 17, 2017 at 7:09
• download it from git repo. – soha1410 Commented Jan 17, 2017 at 10:01
• 1 I have downloaded from git, now what to do? can you please guide me? – Mohammad Tasneem Faizyab Commented Jan 17, 2017 at 10:48

1 Answer 1

After several days of searching finally find the answer. to convert this or any kind of nodejs library to browser javascript supported just go to browserify . first install it by

  npm install -g browserify

then install all the library it needs with

   npm install <module_name>

at the end generate single js file with

   browserify <main.js> -o  <destination.js>

now you can add script to your html like

   <script src="destination.js"></script>

for YOAST library there is a browserify directory in example. I use browserify for the index.js file at root directory and add the generated file to this example html file and everything works like a charm.