Tutorial: Adding node modules to Frappe

Community Documentation
1

In some case you might want to add node_modules which can use in custom apps.

My use case is I want to add TinyMCE to blog post doctype.

Steps

  1. Create package.json

    npm init

  2. Install package, in my case I want to add tinymce package

    npm i tinymce

  3. Run bench build, bench build will

    • Create symbolic link from node_modules to public/node_modules
    • Create assets
      • Note
        • Frappe use rollup.js to create module bundler
        • public folder can be accessible from website url such as http://yourwebsite.com/assets/your_custom_app_name/...
        • build.json should be locate on public folder inside your custom apps
        • You cannot use concat in build.json in your custom apps, since it’s hard coded to run concat only on frappe apps
        • You cannot use import inside doctype js since it need to run through rollup.js frist
        • You could use import inside public folder and then use build.json to bundle the module
        • To manually run rollup.js for your custom apps, you could run /usr/bin/yarn node rollup/build.js --app your_custom_app_name

  4. Adding node_modules to doctype or apps, you need to use hook.py, here is what i did

    • OPTION A

      node_modules = {
	'tinymce': {
		'js': [
			'assets/your_app_name/node_modules/tinymce/tinymce.min.js',
			'assets/your_app_name/node_modules/tinymce/themes/mobile/theme.min.js',
			'assets/your_app_name/node_modules/tinymce/themes/silver/theme.min.js',
			'assets/your_app_name/node_modules/tinymce/icons/default/icons.min.js',
		],
	}
}
app_include_js = node_modules.get('tinymce').get('js')

    • OPTION B

      node_modules = {
	'tinymce': {
		'js': [
			'public/node_modules/tinymce/tinymce.min.js',
			'public/node_modules/tinymce/themes/mobile/theme.min.js',
			'public/node_modules/tinymce/themes/silver/theme.min.js',
			'public/node_modules/tinymce/icons/default/icons.min.js',
		],
	}
}

doctype_js = {
	'Blog Post': node_modules.get('tinymce').get('js'),
}

      Note
      - This won’t work if module need css, since it will try to access css file from http://yourwebsite.com/... such as http://yourwebsite.com/skins/content/default/content.css
      - JS still won’t work, I think it might be because loading sequence

    • OPTION C

      hook.py

      node_modules = {
	'tinymce': {
		'css': [
			'assets/your_app_name/node_modules/tinymce/skins/ui/oxide/content.min.css',
			'assets/your_app_name/node_modules/tinymce/skins/content/default/content.css',
			'assets/your_app_name/node_modules/tinymce/skins/ui/oxide/skin.min.css',
		]
	}
}

app_include_css = node_modules.get('tinymce').get('css')

      your doctype js

      frappe.require([
  'assets/your_app_name/node_modules/tinymce/tinymce.min.js',
  'assets/your_app_name/node_modules/tinymce/themes/mobile/theme.min.js',
  'assets/your_app_name/node_modules/tinymce/themes/silver/theme.min.js',
  'assets/your_app_name/node_modules/tinymce/icons/default/icons.min.js',
], () => {
  tinymce.init({
	selector: '#tiny_mce_editor',
	height: 500,
  });
});

      Note
      - Javascript will still try to access css from http://yourwebsite.com/skins/content/default/content.css but it will work since we’ve adding css to hook.py

Related link
- New Build System: Rollup
- How to add a node module to a custom app? - #2 by igrekus
- New Build System: Rollup by netchampfaris · Pull Request #5010 · frappe/frappe · GitHub

Please correct me if my understanding is incorrect.

8 Likes
2

Little off-topic, but if you want TinyMCE in your frappe installation you can use GitHub - shridarpatil/frappe_tinymce: Frappe app to replace default text editor with tinymce.
This replaces frappe’s Quill Text Editor with TinyMCE Text Editor

4 Likes
3

Hi, thanks for your tutorial.
where do I init ?
in bench or in my custom app?
do you have a document better than this or video tutorial ??
here you did not write where must do these codes…

1 Like
4

We should be able to use @import in our custom SCSS files, correct?

I’m referring to something such as:

@import "~example_module/base-styles/colors";

For some reason, I’m getting this error on app build:

error: Can't find stylesheet to import.
  ╷
1 │ @import "~example_module/base-styles/colors";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../frappe_app/frappe_app/public/css/frappe_app.scss 1:9  @import

How can I include SCSS from node_modules in SCSS?

5

there’s a bug in this app, let’s say I edited the description in item number 01 and then i switch to any other item for example item 03,
the description shows the same as 01 until and unless I refresh the page, and this keeps on happening every time.