NodeJS: Where to add custom code that requires a package

Wappler General How To
#1

Hi,

Complete beginner on wappler. Is there a way to add custom code in wappler. and where do I put the code ? I get an error require is not defined .

Is there any tutorial how would i do this

Thank you

#2

Welcome to Wappler!

We probably need a bit more information like what kind of code you are trying to add?

Generally you can access any/all code in Wappler by selecting code view at the top centre of Wappler above your design view.

Screen Shot 2021-04-16 at 6.41.32 PM

1 Like
#3

I was trying to add this snippet:

function displayTest(){

            var Web3 = require('web3');

            var web3 = new Web3("https://mainnet.infura.io/v3/");

            console.log(web3);

        }

Just a complete beginner on wappler . No idea on how to do this . Thank you

1 Like
#4

The ‘Infura’ docs should tell. you where to add the code to your pages. What is the code suppose to do?

I am not familiar with Infura or what it does.

1 Like
#5

oh… no problem with infura just don’t know where to put it in the wappler . Getiing require not defined error

#6

This has very little to do with an understanding of Wappler, it is more an issue of not having an understanding of JavaScript.

The error that you are getting is because require() does not exist in the browser/client-side JavaScript.

#7

Not sure if I should reply to this thread or start my own one. But I have a similar question @qwertyiop’s
I’m a Bubble user, currently learning Wappler.

So you have all these awesome javascript libraries such as:



https://www.chartjs.org/

etc.
Is it possible to use these libraries in Wappler? (if so, any suggestions on how?) Does it make sense to want to extend on Wappler’s current drag-n-drop features through these kinds of libraries?

I do apologize for my obvious lack of knowledge in Wappler and/or javascript or node.js in my questioning, still learning :sunglasses:

Thumbs up to anyone pointing me (and perhaps qertyiop) in the right direction.

bg

Jelle

#8

Taking frappe/gantt as an example

  1. On the Github page, scroll down to

    image
    image871×124 1.76 KB

  2. Copy the instruction, open the Wppler Terminal window, paste the instruction and press enter

    image
    image1184×700 40.6 KB

  3. In the Project Folder -> Files, expand the node-modules folder
    image

  4. Scroll down to the frappe-gantt folder and see the files that are required
    image

You can now move/copy the relevant files and folders to the web root and play around as much as you want.

3 Likes
#9

Ben you are the best! Can’t believe you actually took the time to make the screenshots, and all. :grin: :grin: :grin: :grin:

I’m going to fiddle around with this alright, it makes sense to me know. I just didn’t know for sure if this was the way to go with Wappler.

Thanks again and have a great day!

2 Likes