Adding .env file to other directories instead of root - javascript

A common practice is to add all .env files in root directory. However when dealing with different statuses of projects i.e. development, integration, production etc. it creates a mess at the root.
I was wondering if it is acceptable and industry practice to add all configuration files in config folder, or any other folder for that matter. Something like this
root
|--.nvmrc
|--.gitignore
|--package.json
|--package-lock.json
|--src
|--config
|-- .env.development
|-- .env.production
|-- .env.integration
|--utils
|--server.js

Related

Testing angular components outside of main project folder: module not found raw-loader

So I want to run ng test and include tests in a folder next to the projectfolder.
mainproject/
|-- src/
| |-- app/
| | |-- home/
| | | |-- home.component.spec.ts
| | |-- app-main.component.spec.ts
| |-- test.ts
| |-- tsconfig.spec.json
|-- node_modules/
|-- angular.json
|-- package.json
|-- tsconfig.json
components/
|-- common/
|-- control-bar/
|-- control-bar.component.ts
|-- control-bar.component.spec.ts
When I run ng test without including the other tests in the components folder it works as intended, but when I try to include the other components ng test fails with the following error.
ERROR in ../components/common/control-bar/control-bar.component.ts
Module not found: Error: Can't resolve 'raw-loader' in 'absolutepath\repos\components\common\control-bar'
resolve 'raw-loader' in 'absolutepath\repos\components\common\control-bar'
Parsed request is a module
No description file found
resolve as module
absolutepath\repos\components\common\control-bar\node_modules doesn't exist or is not a directory
absolutepath\repos\components\common\node_modules doesn't exist or is not a directory
absolutepath\repos\components\node_modules doesn't exist or is not a directory
absolutepath\repos\node_modules doesn't exist or is not a directory
absolutepath\node_modules doesn't exist or is not a directory
C:\Users\user\Desktop\node_modules doesn't exist or is not a directory
C:\Users\user\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules
using description file: absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\package.json (relative path: ./node_modules)
using description file: C:\Users\user\Desktop\folder absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\package.json (relative path: ./node_modules/raw-loader)
no extension
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader doesn't exist
.js
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.js doesn't exist
.json
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.json doesn't exist
as directory
absolutepath\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader doesn't exist
[C:\Users\user\Desktop\folder\repos\components\common\control-bar\package.json]
[C:\Users\user\Desktop\folder\repos\components\common\control-bar\node_modules]
[C:\Users\user\Desktop\folder\repos\components\common\node_modules]
[C:\Users\user\Desktop\folder\repos\components\node_modules]
[C:\Users\user\Desktop\folder\repos\node_modules]
[C:\Users\user\Desktop\folder\node_modules]
[C:\Users\user\Desktop\node_modules]
[C:\Users\user\node_modules]
[C:\Users\node_modules]
[C:\node_modules]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.js]
[C:\Users\user\Desktop\folder\repos\mainproject\node_modules\#angular-devkit\build-angular\node_modules\raw-loader.json]
# ../components/common/control-bar/control-bar.component.ts 13:34-85
# ../components/common/control-bar/control-bar.component.spec.ts
# ./src/test.ts
So raw-loader seems to be missing or it can't find it. To be clear there is only 1 node_modules in this setup and it's inside the mainproject folder.
I'm having the exact same issue and I've abandoned the search for a proper solution. For now I'm making it work by making sure the dependencies of the library are installed separately (so having a second node_modules folder in the library).
Since there is nothing to be found on the subject and the official angular documentation for creating libraries mentions that it is required for libraries to be built:
Build the library. You cannot use a library before it is built.
I'm assuming dynamically linking to unbuilt libraries without its own node_modules is simply unsupported (even though it works fine as long as there are no component classes imported in the library).

How does project with nested node_modules behave?

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.

Moving to Webpack2 from Gulp.js

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?

Extjs can't find resource

I deployed this project on Tomcat but when I tried to access from the webpage, the resources for ...ext-all.css and ...ext-debug.js could not be found. From eclipse, the project directory seems correct. Why can't these files be found?
Project structure
Error
I would need to see the tomcat directory structure to be sure that this is the problem, but that index.html page is looking for a webapp in your tomcat webapp directory named: ext-4.2.1.833
In other words, it is expecting something like this:
+ tomcat
|-- bin
|-- conf
|-- lib
|-- logs
|-+ webapps
|- ext-4.2.1.833
|- HelloWorldApp (or whatever you called your new app)
|- manager
|- ROOT
Is that how you have it set-up?

How to require deep nested NodeJS modules?

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)

Categories

Resources