1

I am using play framework 2.4 my application was working fine before installing UI components e.g (grunt,ruby,npm,cpmpass)i did not know much about them but I needed these for my project UI to work there is a folder node_modules under the public directory of the play app which is causing too much time to run/test the project whenever I gave run or test command I have seen lots of folders are being started to create at location 

playapp/target/web/classes/main/META-INF/resources/webjars/playapp/0.1.0-7708ad295b8fe2c87a28bdb6afa7c10401c12a61-SNAPSHOT/node_modules

how can I avoid that? here are some solutions I have tried but it did not work

project/Grunt

import play.PlayRunHook
import sbt._

import java.net.InetSocketAddress

object Grunt {
  def apply(base: File): PlayRunHook = {

    object GruntProcess extends PlayRunHook {

      var process: Option[Process] = None

      override def beforeStarted(): Unit = {
        Process("grunt dist", base).run
      }

      override def afterStarted(addr: InetSocketAddress): Unit = {
        process = Some(Process("grunt watch", base).run)
      }

      override def afterStopped(): Unit = {
        process.map(p => p.destroy())
        process = None
      }
    }

    GruntProcess
  }
}

here is the part of build.sbt file edit

   import Grunt._
import play.PlayImport.PlayKeys.playRunHooks

import play.sbt.PlayImport.PlayKeys.playRunHooks

lazy val gruntDirectory = baseDirectory {
    _ / "public"
}

excludeFilter := HiddenFileFilter -- ".tmp"

unmanagedResourceDirectories in Assets <+= gruntDirectory { _ / "dist"}

unmanagedResourceDirectories in Assets <+= gruntDirectory { _ / ".tmp"}

unmanagedResourceDirectories in Assets <+= gruntDirectory { _ / "bower_components"}

unmanagedResourceDirectories in Assets <+= gruntDirectory { _ / "node_modules"}

//this is for development environment
unmanagedResourceDirectories in Assets <+= gruntDirectory { _ / "src" / "app"}

playRunHooks <+= baseDirectory.map(base => Grunt(base))

But still target folder get filled with node_modules folder which is creating lots of folder inside of it on run and test commands ,please help. edit

i have added 

unmanagedResourceDirectories in Assets <+= gruntDirectory { _ / "node_modules"}

this line but now i am gettig this error

[trace] Stack trace suppressed: run last playapp/web-assets:webExportedDirectory for the full output.
[error] (playapp/web-assets:webExportedDirectory) Duplicate mappings:
[error]     playapp/target/web/classes/main/META-INF/resources/webjars/arteciate/0.1.0-7708ad295b8fe2c87a28bdb6afa7c10401c12a61-SNAPSHOT/requirejs/require.js
[error] from
[error]     playapp/public/bower_components/requirejs/require.js
[error]         /home/sara/git/arteciate/public/node_modules/requirejs/require.js
[error]     playapp/target/web/classes/main/META-INF/resources/webjars/arteciate/0.1.0-7708ad295b8fe2c87a28bdb6afa7c10401c12a61-SNAPSHOT/requirejs/README.md
[error] from
[error]     playapp/public/bower_components/requirejs/README.md
[error]         playapp/public/node_modules/requirejs/README.md
[error] Total time: 5 s, completed Aug 8, 2017 5:09:17 PM

public folder has following contents

app               bower.json  dist   Gruntfile.js   node_modules  README.md         test
bower_components  config      fonts  Gruntfile.js~  package.json  _SpecRunner.html

and and i want to ask one more question i do not know about these UI componenets so how UI tools actually work like npm, yeoman, bower, sass, grunt and, what are node_modules and what they are used for and "do I actually need bower modules in my build process with sbt"

swaheed
  • 3,671
  • 10
  • 42
  • 103

1 Answers1

2

As a scala developer, I think you don't have much undertanding of how these tools work together. First you need to understand how these tools works and why do we need them.

I suppose you are using Yeoman, Grunt, Bower, SASS(Though Compass) and using them through NPM(Node Package Manager).

NPM (Node Pakcage Manager):

It gets installed when we install node in our machine, it is used to install/run different software tools on your machine from npm repository.

Yeoman:

its a web scaffolding tool, by using this we can scaffold our web application by choosing any combination of tools (like angular + Requirejs + SASS + Grunt etc). It saves our time by configuring all these modules together and we can create further components (i.e. web pages, controllers etc) through commands without having worries of configuring/embedding within already created components. yeoman do this for us.

Grunt:

Its a javascript task runner. You can configure tasks in GruntFile.js and run it though grunt-cli (you need to install it as well). We can save a lot of development time by using watcher with automatic tasks configured like compile, concate, minify/uglify, running test cases, running jshint/lint, compiling SASS/SCSS into CSS whenever changed etc.

Bower:

its used for automatic dependency management for web, that means you don't have to send all the libraries along with project whenever you need to send/deploy on any server, through bower, you can install all the dependencies with just one command (i.e. bower install) and it reads form the bower.json file and install all the listed dependencies. (Internally it uses git)

Compass:

Its a compiler for SASS/SCSS, it is used to convert SASS/SCSS files into plain css files. Why use SASS/SCSS ? ---> we can use variables, parent/child concept, inheritance concept through SASS/SCSS and it reduces our work and its easy to change variables/parent classes than to change styling in every element in plain css, so it saves us much development time and provide a better management mechanism. (gem from ruby is required to install this)

node_modules:

When we need to use some automatic tasks for javascript, We need to install them through npm (npm install), it reads form package.json file and install all the dependencies listed in package.json file required by grunt or other tools (gulp, Compass, yeoman etc). We can also install development dependencies through npm instead of bower.

Do you really need node_modules ?

If you are using bower for dependency management for libraries, then we can have a workaround for your problem, you can keep public folder separate i.e. outside of your main project and run grunt commands to compile/build JS/CSS files, then you can copy those compiled files in your public folder (you can configure this whole process through grunt and you don't have to manage it separately) and then you won't be having node_modules folder in your project directory and it would not get compiled and hopefully it would save your time.

Omar Bahir
  • 1,237
  • 5
  • 20
  • 48