I have a node module inside my node_modules directory. However, I can't figure out how to use it. The structure looks like this:
node_modules
|- ...
|- foo-bar
| |- dist
| | |- css
| | - css files here
| | |- js
| | - js files here
| | |- foo-images
| | - image files here
| | |- index.js
| |- index.js
| |- package.json
|- ...
The index.js has this in it:
require('./dist/js/foo');
module.exports = 'foo';
So my question is how do I use it? In my app.component.ts, I tried putting the following code at the top:
import { foo } from './foo-bar';
But there's an error on foo between the curly braces saying it doesn't know what that is. When I tried require('foo'), I get an error saying it doesn't know what require is (I have Express installed).
How would I use the CSS and JavaScript functions from the node module? I'm new to Angular 5, so I'm not totally familiar with how it works. Any help would be appreciated, thank you!
Angular is Front End Framework and NodeJS is server side so you will have to run any node modules on the back end server... I had a similar problem when I wanted to resize file images locally with image magick and then upload to the server. Use express to get the data from the server to the front end where you can then put your data inside '{{}}' :)
Related
I have a trouble with defining correct path for bower components.
Here is my file structure:
projectName
| - client/
| - app/
| - bower_components/
| - node_modules/ (grunt tasks)
| - test
| - Gruntfile.js
| - package.json
| - bower.json
| - server/
| - server.js
| - node_modules/ (modules for server side)
| - package.json
and my code in server.js file:
var express = require('express');
var mysql = require('mysql');
var app = express();
app.use('/', express.static('../client/app'));
app.use('../client/bower_components', express.static('../client/bower_components/'));
Is it possible to correctly define path for bower_components in hirerachy like this one?
Add it as a static directory just like you have done so with your actual application root, your current implementation is serving it from /client/bower_components/ which means that your html files would also have to reference your bower modules at that address.
Change your bower_components to be the following:
app.use('/bower_components', express.static('../client/bower_components'));
Then in your html files just reference /bower_components/<module_path>
I'm creating a React + Flux web app with a file structure that looks like this:
MyApp
|---
|---scripts
|---app.jsx
|---actions
|---components
|---HomePage.react.jsx
|---NotFoundPage.react.jsx
|--- ...etc
|---dispatcher
|---stores
1) Where do I place public assets like pictures, videos, text files or whatever..
2) Is there a standard/neat way to load them? All I've found is this library but there must be something more people use.
I usually use a dist or public folder where all asset are kept. When I release the app, the bundles are saved in the dist folder.
For example:
MyApp
|-- app
| |---app.jsx
| |---actions
| |---components
| |---HomePage.react.jsx
| |---NotFoundPage.react.jsx
| |--- ...etc
| |---dispatcher
| |---stores
|-- public
| -- js -- bunlde.js
| -- img -- images
| -- css -- app.css
Is there a standard/neat way to load them? All I've found is this library but there must be something more people use.
You can just include them in the index.html. However, recently I've been bundling the css into the javascript file so that I have one single file.
You can do that with:
webpack: https://github.com/webpack/css-loader
browserify: https://github.com/cheton/browserify-css
I just joined a team that has an Express + Node + MongoDB project with little to no front end framework. I'm looking to build Grunt and Ember into the project. I've never done this before, usually I start from scratch with some kind of stack (whether it is Yeoman or MEAN).
Are there any good tutorials for building Grunt and Ember into an existing project/things I should watch out for? This question is probably too broad (plus it doesn't really have a correct answer...) but I thought I'd shoot it out here and close it in 10 minutes or so if that is the case.
There's very little interlope between your ember and node apps. All you really need from express is to statically serve your index.html and the resources.
The way I handled it was:
Create your ember app in a separate directory from your express.js app (so you don't mix up codebases)
Directory structure:
project
|- backend
| |- ... your node app
|- frontend
| |- [package.json]
| |- [Gruntfile.js]
| |- public
| | |- js
| | |- styles
| | |- images
| | |- [index.html]
| |- dev
| | |- vendor
| | |- controllers
| | |- styles
| | |- templates
| | |- ... (other Ember folders)
| | |- [app.js]
| | |- [vendor.js]
Your Gruntfile.js tasks should take their sources from dev and compile them into public. Must use modules IMO:
grunt-neuter to combine your js sources (recommended outputs: public/js/vendor.js and public/js/app.js)
grunt-ember-templates to compile your handlebar templates into functions, so you don't have to drag the entire handlebars.js to the client (recommended output: public/js/templates.js
All the sources you will work on should go to the dev folder. This includes:
Handlebars templates (eg. dev/templates)
Less or sass styles (dev/styles)
Vendor libraries (dev/vendor/...)
Ember controllers, views, etc.
If you're using neuter, put all the includes inside dev/app.js file, in the order you want. You can initialize your main ember app at the end. I like to separate vendor libraries into their own dev/vendor.js file. These will be compiled into their public/js/... counterparts.
Your index.html should load all the compiled scripts and styles from the public folder. If you set up your project like described here, it should end up loading 3 javascripts and 1 css.
Finally, add a static handler to your express.js app and have it serve folder ../frontend/public. Depending on the config, you might need a separate index.html handler for / route.
This is the pattern I developed before ember-cli became popular. So far, I'm pretty pleased with the results. But you might want to check out ember-cli, just in case they developed a better approach.
I want to put my Node unit tests in an application root level folder, /test/server/. The problem is that when I put my Node files there, Node doesn't see my node_modules. My Node app is at /server/.
My app folder is structured like this:
|- server/ (where my Node.js stuff is)
| |- package.json
| |- server.js
| |- etc
|- client/ (where my AngularJS and front-side stuff are)
| |- index.jade
| |- CSS/
| |- etc
|- test/ (where my unit tests are)
| |- server/
| |- client/
How can I solve this problem?
you need to set node path in your environment
NODE_PATH="/path/to/node_modules"
then you should be able to reference them
EDIT: Now that I had a second look at your require statement I see that you are specifying an extension for the module you are trying to require, remove that and you should be able to find the module
I am using bower.js to keep jquery and bootstrap version ahead, and using grunt.js to minify and join files together
but some 3rd library like bootstrap have both js file and css file, where the whole bootstrap folder should I put? I have consider a structure like this:
project
|
|---build
| |--js // minify jquery.min.js + bootstrap.min.js + script.min.js
| |--css
|
|---src
| |--js //my own script.js file
| |--css //my own style.css file
|
|---bower_components
| |---jquery
| |---bootstrap
|
|---bower.json
|---Gruntfile.js
Is this appropriate?