Browser Based Sample not working

[villanus]

The file /test/browser.html is not working.

The url for browser.js referenced in the browser sample is wrong.
Tried browser.js is but it throws error on line 7 import TextToSVG from '../src';

[shrhdk]

Hi @villanus,

Please try npm run build to get transpiled code.

[villanus]

Do I need to browserify it after?
Is it possible for you to do an update with a working web version?

I am on a windows asp setup and running node on server is not an option

Thanks

[shrhdk]

Do I need to browserify it after?

No, you just need npm run build

I tried /test/browser.html, and it worked correctly.

This is my steps.

$ node -v
v6.9.4
$ git clone https://github.com/shrhdk/text-to-svg.git
$ cd text-to-svg
$ npm install
$ npm run build

after this

1. Open browser.html
2. Click load button and see success message.
3. Click getSVG button

[SimoneMSR]

Is it possible to use text-to-svg without gulp? Actually I would like to use it bundling with browserify

[villanus]

It did not work for me.

[shrhdk]

@SimoneMSR Yes, my test code for web browser also using Browserify.

Please refer the following task:

https://github.com/shrhdk/text-to-svg/blob/b4a77854f907a0c61228c056f711ba0dfd5c0196/gulpfile.babel.js#L51

[shrhdk]

@villanus

I tried with Safari, Chrome and Firefox on macOS Sierra, and it works correctly.

Could you tell me your environment?

Have you seen the success! message after font loading? It takes few minutes to load the font in narrow band.

[SimoneMSR]

@shrhdk thanks for your reply. How do I use that script, I have included in my main.js the row

require("text-to-svg/build/test/browser.js")

but it prompt an error: Cannot find module './path' from folder

Where am I wrong? I have also used concatenify like this

var concatenify = require('concatenify');
concatenify("main.js");
concatenify("text-to-svg/build/test/browser.js");

...but nothing.

[SimoneMSR]

Even the command npm run build does not work. It says

no gulp file

I have node v 7.0.0

[villanus]

Never worked for me either but I am on node 4. Maybe you can build the web version and do a update to the code?

[pyjack]

How run text-to-svg on browser?

[shrhdk]

Hi @pyjack,

Please try the following steps.

1. Build the code in the project root directory.

$ npm install
$ npm run build

2. Open test/browser.html with Web Browser.

[ikoruk]

It still does not work, path is not defined in browsers, only in node.

[natirivero]

I've Installed it like @shrhdk said and it works, It provides an app with a simple UI, and I can now use it to convert text to svg from the browser.

But I was not able to make it work on my own environment, l tried to run it on a React App following the docs, but also got the path Issue and It was very frustrating. It said something about Webpack not including certain node components by default anymore, I don't know, I guess I'm not smart enough... I wish there were codepen examples and/or tutorials in the docs.

[natirivero]

<script type="module">
  import TextToSVG from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
  
  // First argument is URL on web browsers, but it is file path on Node.js.
  TextToSVG.load(
    'https://rawgit.com/shrhdk/text-to-svg/master/fonts/ipag.ttf',
    function (err, textToSVG) {
      const svg = textToSVG.getSVG('hello');
      console.log(svg);
    }
  );
</script>

@shrhdk Console: r.load is not a function