25

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.

Sarath Kumar
  • 1,136
  • 1
  • 18
  • 41
soha1410
  • 555
  • 5
  • 14

1 Answers1

14

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.

soha1410
  • 555
  • 5
  • 14
  • 1
    I managed to generate the new bundled JS file from browserify, but I don't understand how to make the example HTML file work. Do you include the new .js file in addition to the other included file on the page? Also, the other included file is "example-browserified.js" which doesn't exist in the directory. Should that be changed to "example.js" instead? – Concept211 May 09 '17 at 15:21
  • 1
    you just need to add one generated js file to HTML, remove other files. the important note in HTML is the name and id of elements , all the work take place in js including text input change events. – soha1410 May 09 '17 at 18:47
  • I'm strulling with Browserify. I do this: `browserify index.js -o ~/code/yoast/public/seo.js` Error: module not found: "/home/eugene/code/yoast/node_modules/yoastseo/index.js" from file /home/eugene/code/yoast/node_modules/yoastseo/_fake.js There is a Github issue from 2 months ago https://github.com/Yoast/YoastSEO.js/issues/1174 which says do `yarn install`. I tried that and it didn't make any difference. – Eugene van der Merwe Aug 23 '17 at 07:29
  • 4
    This solution does not work anymore. Is there anyone who has implemented yoastseo in laravel or any other custom code recently? – Sougata Bose Jun 03 '19 at 05:33
  • 1
    The solution is now available in Laravel using Vue js. Please follow the github https://github.com/gokulmhegde/Laravel-YoastSeo this is an assessment for SEO and Content analysis – Gokul Hegde Aug 18 '19 at 16:47