How to use MaterializeCSS in nodejs?

Question

I have run the following commands:

npm install materialize-css --save
npm install hammerjs --save
npm install jquery --save

And then in my app.js, var materialize = require('materialize-css');

but I'll always get the same error when I run npm start:

/Users/myname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1
eof require?$=require("jquery"):$}jQuery.easing.jswing=jQuery.easing.swing,jQu
                                                                    ^
TypeError: Cannot read property 'swing' of undefined
    at Object.<anonymous> (/Users/nyname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1:195)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/myname/code/websites/n-website/app.js:9:19)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

I can't find anyone else having these issues so it must be the way I'm trying to utilize MaterializeCSS. What am I doing wrong? I just want to be able to display a failure toast using materialize.toast("Message sent", 5000);. Nothing fancy.

score 0 · Answer 1 · answered Jun 14 '16 at 23:17

0

Materializecss is a frontend framework for the gui / website and not for your server side js application

answered Jun 14 '16 at 23:17

Marat

617
5
12

5

Then why do then let you install it through npm? – Nxt3 Jun 14 '16 at 23:40
They use it just as package manager, so you can get all the source files with low effort. You can also use bower instead of npm or load files from cdn. You can download bootstrap via npm, too. http://stackoverflow.com/questions/26773767/purpose-of-installing-bootstrap-through-npm – Marat Jun 15 '16 at 05:42
1

you for sure can install materialize with npm, but that was neither the point of your question nor of my answer. You asked for displaying notifications in your serverside code. ("I just want to be able to display a failure toast using materialize.toast() "), while the mentioned code is for clientside notification. You need to send a message to browser and use toast() there. – Marat Jul 12 '18 at 14:32
2

Don't know why this post has downvotes! but it could a comment though. – Sankar Mar 08 '19 at 09:31
1

You can use NodeJS in a Windows app with Electron and it's a frontend app with JQuery – Cabuxa.Mapache Feb 18 '20 at 10:31

score 0 · Answer 2 · answered Jun 14 '16 at 23:49

0

Did you explicitly require jQuery as well? And before materialize-css too?

answered Jun 14 '16 at 23:49

adriennetacke

1,726
1
14
21

Yes. Those errors are just from running 'npm start'. I haven't even tried to use it yet. – Nxt3 Jun 14 '16 at 23:51

score 0 · Answer 3 · answered Sep 20 '16 at 15:34

I found the following on the node_modules/jquery/README file:

Node

To include jQuery in Node, first install with npm.

npm install jquery

For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom. This can be useful for testing purposes.

require("jsdom").env("", function(err, window) { if (err) { console.error(err); return; } var $ = require("jquery")(window); });

Hope that helps you.

score 0 · Answer 4 · answered Dec 05 '16 at 12:49

Materializecss is a frontend framework for the gui / website and not for your server side js application. You cannot code your Materialize stuff on serverside node.js. You have to link the materialize css file and materialize js file on the html file that you are going to materialize. you can download materialization css and js file from below link.

Get started with materialize-css might be useful for your reference. Tutorialspoint environment setup can be useful for your reference.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
  <head>
    <title>Sample materialization</title>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!--materialize.css from my website directory stylesheets/-->
    <link type="text/css" rel="stylesheet" href="stylesheets/materialize.css"  media="screen,projection"/>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  
  
  <body>

    <!--Import jQuery before materialize.js-->
    <!--Import materialize.js from my website directory materialization-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="materialization/materialize.js"></script>
  
    <!--simple materialized division-->
    <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
    
  </body>
</html>

score 0 · Answer 5 · edited Aug 19 '19 at 13:50

If you use handlebars, you can usually call Materialize.css by the tag in the main.handlebars file located in the layouts folder just set your static file call in app.js.

In app.js: app.use (express.static ('public'))

In main.handlebars: link rel = "stylesheet" href = "css / materialize.min.css"

once configured, the static file folder, href gets the following path public / css / materialize.min.css

Here is a project link in node.js with materialize:

rmidia.herokuapp.com

score 0 · Answer 6 · answered Sep 16 '19 at 15:50

0

Initiate Materialize Components Using Vanilla Javascript Instead of using jquery and it will works.

answered Sep 16 '19 at 15:50

Abhishek Singh

527
7
8

score 0 · Answer 7 · answered Jan 04 '20 at 04:20

0

Bit late. But you can use a CDN. The Getting Started now has instructions for it. https://materializecss.com/getting-started.html

answered Jan 04 '20 at 04:20

Monarch Wadia

4,400
4
36
37

How to use MaterializeCSS in nodejs?

7 Answers7

Node