I'm trying to run the rails application https://github.com/lumenlearning/OpenAssessments on a linux server. I've been able to get most aspects of it working, but I can't get webpack to run correctly. The project readme states to run the following commands:
$ npm install -g webpack
$ cd client && webpack
Webpack installs correctly, but when I run it as stated, I just get the webpack usage help. I assume this is because there is no webpack.config.js file in the client directory. There is, however, one in client/config: https://github.com/lumenlearning/OpenAssessments/blob/master/client/config/webpack.config.js
If I run webpack in client/config, then webpack is able to find the config file, but I get the following error:
Config did not export an object.
Should I be running webpack in a different way? I am very new to webpack.
Thanks!
Related
I have created a new rails app, after that I have installed bootstrap with cssbundling-rails,
I am now getting an error The asset "application.css" is not present in the asset pipeline. In order to have the application run I need to run the following script
"scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" },
Only after that there is an application file created on assets/builds path.
But I don't want to run this command every time I am updating the css files, I want the server to pick those updates without running the yarn script.
How can I achieve that?
I recently ran into an issue similar to this and the source of the problem was in fact npm and yarn.
A properly configured application using cssbundling-rails should not need to run the command
"scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" },
to get the application to generate the build/application.css
npm known issue
Check your npm version, there is an issue if you are not using npm 7.1+ that basically prevents yarn from setting things up correctly.
Run npm -v and if necessary, upgrade npm with npm install -g npm#latest
If you had to upgrade npm, you will then need to close out your terminal and launch a new one, verify that the npm version is greater than 7.1.
After upgrading, re run rails css:install:bootstrap
And everything should be configured correctly.
Bundle Watcher
From the documentation for cssbundling-rails
"You develop using this approach by running the bundler in watch mode in a terminal with yarn build:css --watch (and your Rails server in another, if you're not using something like puma-dev). You can also use ./bin/dev, which will start both the Rails server and the CSS build watcher (along with a JS build watcher, if you're also using jsbundling-rails)."
So, you can either run yarn build:css --watch from a separate terminal in your rails application or just use the ./bin/dev but either way should resolve the issue you are experience.
I forked this rails project (https://github.com/DMPRoadmap/roadmap) and try to set it up following its installation guide
When following the installation guide:
1) Before the step: npm run bundle, the website doesn't show its image and layout properly
2) After the step npm run bundle, the website show its image and layout properly
3) Under the hood, npm run bundle will start webpack. I close the webpack by pressing CTRL + C after npm run bundle, and the website is still showing image and layout properly.
4) I run npm run bundle -- -p which should be equal to webpack -p, and the website does not display the images and layout properly anymore.
Why is npm run bundle -- -p (which is webpack -p) not compiling the asset properly? I thought it is the daemon version of npm run bundle (which is webpack) and daemon means running in background (I thought daemon is the same as service?)?
Please correct me if I understand the concept incorrectly or use the term incorrectly anywhere.
Thank you!
Answer my own question:
1) Before the step: npm run bundle, the website doesn't show its image
and layout properly
The asset (image and css stylesheet's layout) is not compiled yet, so Rails can't use it and hence the layout will not be correct and the image will not show.
You can compile the asset for development environment using npm run bundle in this project.
2) After the step npm run bundle, the website shows its image and
layout properly
See above.
3) Under the hood, npm run bundle will start webpack. I close the
webpack by pressing CTRL + C after npm run bundle, and the website
is still showing image and layout properly.
I thought webpack (npm run bundle) acts like a server, serving the rails server asset they need, but actually this is not true.
webpack only compiles the asset for rails to use. The reason that webpack keep running after you ran npm run bundle is because it is constantly detecting change to the source of those asset file, so that any change to the source of those asset file will be reflected immediately when you issue a browser refresh on the website.
4) I run npm run bundle -- -p which should be equal to webpack -p,
and the website does not display the images and layout properly
anymore.
Why is npm run bundle -- -p (which is webpack -p) not compiling the
asset properly?
npm run bundle -- -p indeed equals to webpack -p in this case.
To understand why the website does not display the images and layout properly anymore, let's see something first. When I run npm run bundle -- p the below happen:
modified: config/initializers/fingerprint.rb
deleted: public/javascripts/application.js
deleted: public/javascripts/vendor.js
deleted: public/stylesheets/application.css
added: public/javascripts/application-2f49ec37563f77c91204.js
added: public/javascripts/vendor-2f49ec37563f77c91204.js
added: public/stylesheets/application-2f49ec37563f77c91204.css
npm run bundle -- -p will compile the asset for production environment, and will add fingerprint (in this case it's -2f49ec37563f77c91204) to its output.
Digging into the code, we can see that app/views/layouts/application.html.erb has the following code:
<%= stylesheet_link_tag fingerprinted_asset('application') %>
<%= javascript_include_tag fingerprinted_asset('vendor') %>
<%= javascript_include_tag fingerprinted_asset('application') %>
Looking at the fingerprinted_asset() method in app/helpers/application_helper.rb, we can see that:
def fingerprinted_asset(name)
Rails.env.production? ? "#{name}-#{ASSET_FINGERPRINT}" : name
end
We can see that in production we will use file with fingerprint in their name and in non production environment we will use file without fingerprint in their name.
In this case, I was running rails server in development environemtn, so my application try to look for files without fingerprint in their name. That means these:
public/javascripts/application.js
public/javascripts/vendor.js
public/stylesheets/application.css
But I use npm run bundle -- -p, which deletes the above file and produces the fingerprinted version of them, so rails can't find it and hence display no image and display incorrect layout to me.
I thought it is the daemon version of npm run bundle (which is
webpack) and daemon means running in background (I thought daemon is
the same as service?)?
It is not the daemon version of npm run bundle. I thought it is the daemon version of npm run bundle because their wiki used to say so which is wrong, see https://github.com/DMPRoadmap/roadmap/issues/1782.
Environment: Windows 7, npm 2.11.3, bower 1.4.1, gulp CLI 3.9.0
I Cloned angular material (https://github.com/angular/material/tree/v0.10.1) using WebStorm. I followed the (https://github.com/angular/material/tree/v0.10.1/docs) to install angular-material locally.
At root directory /
I run npm install it runs (with some warnings) and downloaded its dependencies (my npm -v is 2.11.3)
In run bower install but its gives following
D:\material>bower install
bower ENOENT No bower.json present
then I run gulp docs to build docs, it was build and created /dist folder at root directory. after I run the gulp server command to live reload. Its said Webserver started at http://0.0.0.0:8080 I saw on bower but no luck, also tried alternativly as http://localhost:8080 still there is no luck.
One more alternative using httpster, I installed it and run httpster -p 8080 -d ./dist/docs it said Starting HTTPster v1.0.1 on port "8080" from ./dist/docs
again i browse localhost:8080 then its gives me error in index page on developer tool of crome as below
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.4.3/$injector/nomod?p0=material.components.menu
angular.js:4369 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=docsApp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.3%2Fangular.min.js%3A19%3A339)
Please help what can I do to get my luck.
Paul (ngmaterial group on google) solved my problem, However site is loading demo pages not working.
Try renaming _menu.js in material-0.10.1\src\components\menu to menu-a.js. In my case that ensured the two js files were added in the correct order.
When I try to create a jhipster application in ubuntu 13.10 with yo jhipster the generated output files are always dumped in the wrong directory.
For example I run yo jhipster in the directory /mnt/mercury/jhipster-test/alpha then the files are dumped out to /mnt/mercury. In fact if I run yo jhipster in any subdirectory of /mnt/mercury they are always dumped out to /mnt/mercury.
I'm using yo version 1.1.2 from the standard ubuntu repository
Please advise how to generate files to be output in current directory.
For the benefit of anyone else facing this problem.
I managed to get Yeoman working with the following
npm cache clean
sudo npm rm -g yo
npm cache clean
sudo npm install -g yo
My problem: Accidentally "yo generating" in the parent directory.
Solution: Delete the .yo-rc.json file in the parent directory, then running the yo generator command in the child directory.
As discussed in the comments, this is a Yeoman problem on Ubuntu 13.10:
We don't have this issue with Ubuntu 12.04
There is the same issue with other generators ("yo webapp") on Ubuntu 13.10
As a workaround, I recommend you have a look at our Docker container:
https://github.com/jhipster/jhipster-docker
This will allow you to run the full JHipster stack, with Ubuntu 12.04, inside a container! Just use it to generate the app, then you can work directly on your host machine.
On Mac OSX Maverick with Node v0.10.26, yo v1.1.2 and generator-jhipster v0.11, the yo hipster command was generating all the sources always in the same (wrong!) directory and not using my current directory.
I fixed this problem doing the following:
cd <WRONG_DIR_WHERE_CODE_IS_CREATED>
rm .yo-rc.json node_modules/
npm uninstall -g karma
npm install -g karma (Note: using sudo it was not working!)
sudo npm install -g generator-jhipster
Not sure why but I've then been able to install karma and generator-jhipster again and suddenly yo hipster starting generating code again in my current directory
Could it be caused by different environment variables when launching npm with sudo?
The file .yo-rc.json is hidden, if it is not deleted, the generator will constantly take the settings from it. You must delete .yo-rc.json.
I'm following the sample Yeoman workflow listed on yeoman.io:
npm install -g generator-angular generator-karma # install generators
yo angular # scaffold out a AngularJS project
bower install angular-ui # install a dependency for your project from Bower
*grunt test # test your app
grunt server # preview your app
grunt # build the application for deployment
Everything works great except the grunt test command:
C:\yeoman2>grunt test
(logging omitted for brevity)
Running "connect:test" (connect) task
Starting connect web server on localhost:9000.
Running "karma:unit" (karma) task
Fatal error: listen EACCES
I haven't updated my gruntfile or made any other modifications to the configs. Has anyone seen this EACCESS error before? I'm on Windows 8, with a fresh node install.
This was happening because the karma server was running on port 8080. I changed it (in karma.conf.js) to 9999 and all is well.