Vue js / React installation in Frappe

Frappe Framework
, ,
1

Hi sir @buildwithhussain
I want to install vue js and to use it in my app. Which step should i follow?
I am using frappe installed in aws server. It’s a DNS based multitenancy.

Method 1:

  1. bench get-app GitHub - NagariaHussain/doppio: A Frappe app (CLI) to magically setup single page applications on your custom Frappe apps.
  2. bench add-spa --app [–tailwindcss] [–typescript] / bench add-spa

Can we use frappe charts in react sdk???

OR Method 2:

  1. bench get-app GitHub - NagariaHussain/doppio: A Frappe app (CLI) to magically setup single page applications on your custom Frappe apps.
  2. bench add-frappe-ui

which one should i follow sir explain me. In my server its running in port 80. If i installed vue js it’s to be run in local host right? how to change and use it in my server in same port?

Thankyou

1 Like
2

One more doubt. I done every pages in web template. I can’t use frappe charts there. can i created a page in react/vue for frappe charts and linked it from the web page of frappe ?

Thankyou

3

Hi :wave:

Method 2 adds a Frappe UI Starter (this one) dashboard. So, it is VueJS + TailwindCSS + FrappeUI.

Method 1 can be used to setup either VueJS or ReactJS project, but not directly FrappeUI, you have to manually set it up if you want.

It doesn’t matter where you server is running, since after the build step, the SPA is stored and served by the bench itself. In case of development server (yarn dev), it runs on localhost and proxies API requests, desk requests, etc. to the backend server (bench).

1 Like
4

Frappe Charts Docs
Frappe Charts Docs3110×1374 296 KB

Does this not work?

5

if i use any script tag it always shows none is not defined.|

ERROR:
about:1826 Uncaught ReferenceError: None is not defined
at about:1826:101
about:1826 Uncaught ReferenceError: None is not defined
at about:1826:148
Error with Permissions-Policy header: Unrecognized feature: ‘ch-ua-form-factor’.
DevTools failed to load source map: Could not load content for http://test.in/file_uploader.bundle.HDDWALJV.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

6

I used a sample code from frappe charts documentation

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.2.4/dist/frappe-charts.min.iife.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const data = {
        labels: [
          "12am-3am",
          "3am-6pm",
          "6am-9am",
          "9am-12am",
          "12pm-3pm",
          "3pm-6pm",
          "6pm-9pm",
          "9am-12am",
        ],
        datasets: [
          {
            name: "Some Data",
            type: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4],
          },
          {
            name: "Another Set",
            type: "line",
            values: [25, 50, -10, 15, 18, 32, 27, 14],
          },
        ],
      };

      const chart = new frappe.Chart("#chart", {
        // or a DOM element,
        // new Chart() in case of ES6 module with above usage
        title: "My Awesome Chart",
        data: data,
        type: "axis-mixed", // or 'bar', 'line', 'scatter', 'pie', 'percentage'
        height: 250,
        colors: ["#7cd6fd", "#743ee2"],
      });
    </script>
  </body>
</html>

I got this error can we solve this or we need react/vue js to work with it
chart:1444 Uncaught ReferenceError: None is not defined
at chart:1444:108
chart:1470 Uncaught TypeError: frappe.Chart is not a constructor
at chart:1470:21

7

sir @buildwithhussain please saw these and clarify. It’s very helpful to me. I tried in my friend laptop also for him also in new bench - webpage same error. But while we trying in normal html file apart from frappe-bench it’s working. I don’t know why.

8

Try asset bundling instead (docs here). Install Frappe Charts package from npm (npm i or yarn add in your app directory) and import it directly in your js bundle file, link that bundle to your HTML/jinja template.

9

Hi sir, I tried asset bundling
I installed npm install frappe-charts in apps directory
I created chart.bundle.js in public folder

I include the below line in chart.bundle.js
import { Chart } from “frappe-charts/dist/frappe-charts.min.esm”;

Then i run bench build it creates two files in public/dist/js

  1. chart.bundle.YYKLERQW.js.map
    2.chart.bundle.YYKLERQW.js

I had a web page and web template in the template code

{{ include_script('chart.bundle.js') }}

Same error sir

Uncaught ReferenceError: None is not defined
at chart:1442:108

Please help me to solve this i am trying analytics using frappe charts.
Thankyou in advance sir

10

This snippet achieves the desired outcome. Without more context on how Frappe charts library is being bundled/imported one can only make guesses. Perhaps it may be easier for you to consider using Vue Frappe Charts. To make the library easier to work with for you.

1 Like