I have the following application structure:
application
|- config
|----- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
In /routes/api/router.js module I need to require /config/config.js file and do the following:
require('../../config/config.js');
I found the code above ugly and want to make it more pretty. Also if I move /routes/api/router.js to another folder I have to refactor all requires. What is the best practices to require that modules and is it possible to require config.js from application folder root, something like the following:
require('/config/config.js');
Thanks.
There are a few ways to get around this problem. One is to put all your shared code (like config.js) in a directory under node_modules (using lib here in case you want to have directories other than config in there):
application
|- node_modules
|----- lib
|---------- config
|-------------- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
So then you could require config.js using require( 'lib/config/config.js' ).
Alternatively, you could create a lib symlink in node_modules and link it to lib in your application directory structure:
application
|- node_modules
|----- lib -> ../../lib
|- lib
|------ config
|---------- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
One other alternative, which unfortunately is discouraged by the node docs, is to use NODE_PATH which lets you specify directories that node's require() algorithm should look into. Following the same pattern as above with lib, you would do:
application
|- lib
|------ config
|---------- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
and set NODE_PATH equal to $path_to_application/lib.
UPDATE
Found this great discussion on the topic which includes the options above as well as a few other ones.
The easiest solution is to use path.resolve. If you only give relative paths to path.resolve then it assumes they are relative to the current working directory, i.e. the project root. So all you need is:
const path = require('path');
path.resolve('config/config.js');
require('/config/config.js');
will not work as you are using the root of the system(os) not the root of the application.
var path=require('path');
var root=path.dirname(process.mainModule.filename);
or
var root=process.cwd();
will give you the root of the application. To navigate to config.js
path.resolve(root,'config/config.js)
Related
I have a TypeScript web application with the following folder structure.
- assets
|- a.png
|- b.png
|- c.png
|- d.png
|- ...
- app.ts
In app.ts, how do I programatically list all the files in assets folder?
I tried the below but it didn't work. And I also thought I may be going down the wrong path because fs is used to access the user's file system, which is not my intent.
const fs = require('fs');
const assets_folder = './assets/';
fs.readdirSync(assets_folder).forEach((file) => {
console.log(file);
});
The issue is related to file location because when you use the typescript after compiling., it'll move to dist/build and it'll look in that directory.
Solution: Copy files/directory from src to dist/build programatically, it'll solve your issue.
Project src
src
assets
images
app.ts
After complie
dist
//<Missing assets>
app.js
We are trying to separate our project into "sub modules" within single repo, but keep things like webpack, express server global, so assume structure like this
package.json
server.js
index.js
node_modules/
public/
index.html
dashboard.js
onboarding.js
dashboard/
index.js
package.json
node_modules/
components/
assets/
onboarding/
index.js
package.json
node_modules/
...
idea here is to keep build / routing / server logic at root lvl and separate modules like dashboard and onboarding into their separate folders and allow them to use their own node modules.
Will this work? Will node modules be included correctly?
webpack will build assets to public/ folder, with some vendor assets and several entry points i.e. all index.js files
What you are proposing will work fine and compile as you expect. NodeJS will initially look for modules included in your modules 'node_modules' sub-directory and then work up the ladder.
I'm trying to move from gulp.js to webpack2 and by the way trying to study React. So I've created small "hello world" app with Leaflet.js and React.
But just right after start I have some questions about webpack.
I want to get following structure:
app/
dist/ <-- folder with built app
images/
vendor/
vendor-image1.png
vendor-image2.png
...
app/
my-image1.png
my-image2.png
...
js/
vendor.js
app.js
css/
vendor.css
app.css
index.html
src/ <-- folder with my app source
components/
App/
index.js
MyMap/
index.js
styles.css
index.js
To achieve this structure with gulp I need only to create separate tasks for vendor and app resources (like vendor-css, vendor-js, app-css, etc.), manually list all files to process and put proper paths to dest, but how can I achieve this structure with webpack?
Second question about some resources that are added in runtime. For example Leaflet adds marker-shadow.png in runtime and currently I've got 404 for it, so how can I deal with such assets?
I have a project tree where many subparts that are similar. It looks like this:
root
|-- editor
|- components
|- services
|- utils
|-- dashboard
|- components
|- services
|- utils
I want to alias 'components' (for example), to match editor/components when the requiring file is inside editor, and dashboard/components when the requiring file is inside dashboard.
Is there a way to do it (resolve dynamically)? Or do I have to assign separate aliases?
I am working on a project where the Javascript is becoming more complex, and needs to be tested as part of our automated build.
Now I have got a project structure like shown below:
- root
|- build.xml
|- tools
|- js-test-driver
|- js-test-driver.js
|- js-test-driver.conf
|- src
|- code
|- projectname.web
|- assets
|- javascript
|- my-javascript-files.js
|- tests
|- projectname.javascript
|- my-javascript-tests.js
In my Nant build I kick off Java using then pass it the js-test-driver.js file, with the arguments to use the config file provided. Now I noticed that when I was running it that its config file paths seem to be relative to the js-test-driver directory, not the project root directory.
I didnt think this was an issue, and just put the following in my config file:
server: http://localhost:9876
load:
- ../../src/code/projectname.web/assets/javascript/*.js
- ../../src/tests/projectname.javascript/*.js
Now if I run my task in Nant, it starts up the test driver (in Firefox currently) fine but just fails, saying that it cannot find any tests to run, but the thing which I find confusing is that it lists the test directory as:
tests/../../src/tests/projectname.javascript/*.js
And I cannot for the life of me figure out why it is putting this "tests/" before everything... If i put ../../../ in to negate this seemingly hardcoded tests dir, it tells me that the path is not in a valid pattern.
Anyone else had anything similar or know where I am going wrong?
The "tests" folder is always prepended, it's just where jsTestDriver serves its files from. To quote Cory Smith from the jsTestDriver team:
All resources associated with the test
run are served off /test. All static
runner resources are served off
/static
JsTestDriver-1.3.2 has problems with relative paths. The issue has already been discussed and filed as an issue.
Did you try setting the basepath in js-test-driver.conf. It's fairly new and not yet documented, not sure how it's affected by the relative path problems.
basepath: /root/src