I have the following directory structure for my ember application:
neuter/
├── adapters
├── controllers
├── models
├── routes
└── views
In all those directories I have lots of files. Currently, my neuterapp.js has lots of statements like:
require('app/neuter/models/node');
require('app/neuter/controllers/nodes');
I would like to avoid having to explicitly list all files which are needed. I have tried with:
require('app/neuter/controllers/*');
And with:
require('app/neuter/controllers');
But this is not working. Is there any way to require everything in a directory?
You could try:
require('app/neuter/models/**/*')
This addition was added with this merged PR.
Hope it helps.
Related
This seems like a dumb question, but I struggle to find the answer.
The situation
Here is my folder structure:
myProject/
├── module1/
│ ├── config.ts
│ └── init.ts #symlink
├── module2/
│ ├── config.ts
│ └── init.ts #symlink
└── symlinks/
└── init.ts # the real not duplicated file
The file init.js import local files like so:
import config from './config'
// ...
The problem
The problem is that typescript throws Cannot find module './config' or its corresponding type declarations
I tried playing with typescript option preserveSymlinks but it didn't solve my problem
I know about other ways to achieve my goal but it's overkill for just one file and it doesn't solve relaying on a relative path (like creating a npm module, creating a function and pass relative file content as parameter or even generating files at runtime...)
=> I am working with typescript in a monorepo.
Is it possible to use symlinks this way? If no, are there other (simple) alternatives?
I just figured out that since I built my app with Next.js, I can't use CRA's folder structure framework to build or diagnose my application.
Unfortunately, I'm completely at a loss at the moment with respect to how Next.js applications are supposed to properly scale a website for mobile devices. I've always been under the impression that it was the job of index.html to do that (which I've written, but my app can't seem to bother to find it or use it). I've looked at the default folder structure for a Next.js app:
├── README.md
├── components
│ ├── head.js
│ └── nav.js
├── next.config.js
├── node_modules
│ ├── [...]
├── package.json
├── pages
│ └── index.js
├── static
│ └── favicon.ico
└── yarn.lock
source
but there doesn't seem to be a place for index.html.
My question is simply, how do Next.js apps optimize for mobile screens? Are they even supposed to have an index.html, and if so where? And how do favicons work, because I've created the static folder and put the favicon inside, but I'm pretty sure to have the favicon do anything, it has to be referenced by a file (conventionally index.html).
repo
Next has this Document component which you can customize to your own likings.
As their official docs say:
Is used to change the initial server side rendered document markup
You can use it to customize your head tag content as you would do anyway in your index.html.
Don't forget to add <meta name="viewport"content="width=device-width, initial-scale=1.0" /> in head tag if you want your app to use media queries.
Next project is not supposed to have a particular index.html file. Instead, the initial page is supposed to be a component located specifically in pages/index.js.
I have a very strange behaviour of Spring Boot application (1.4.0.RELEASE)
My static content lies under /src/main/resources/static/* and one of the pages needs css and js files, but despite the fact that css files are served without problems I am getting 404 for js files:
For CSS file I see in the logs
SimpleUrlHandlerMapping : No handler mapping found for [/admin_files/custom_admin.css]
RequestMappingHandlerMapping : Looking up handler method for path /admin_files/custom_admin.css
RequestMappingHandlerMapping : Did not find handler method for [/admin_files/custom_admin.css]
SimpleUrlHandlerMapping: Matching patterns for request [/admin_files/custom_admin.css] are [/**]
SimpleUrlHandlerMapping : Mapping [/admin_files/custom_admin.css] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/], (...)
so it looks completely fine. However for JS file it looks different:
SimpleUrlHandlerMapping : No handler mapping found for [/admin_files/vendor/jquery/dist/jquery.min.js]
RequestMappingHandlerMapping : Did not find handler method for [/admin_files/vendor/jquery/dist/jquery.min.js]
SimpleUrlHandlerMapping : Matching patterns for request [/admin_files/vendor/jquery/dist/jquery.min.js] are [/**]
SimpleUrlHandlerMapping : Mapping [/admin_files/vendor/jquery/dist/jquery.min.js] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/] (...)
//
// and now something strange starts to happen BELOW
//
HttpEntityMethodProcessor : Written [{timestamp=Tue Sep 13 23:17:12 CEST 2016, status=404, error=Not Found, message=No message available, path=/admin_files/vendor/jquery/dist/jquery.min.js}] as "application/json" using [org.springframework.http.converter.json.MappingJackson2HttpMessageConverter#29139aae]
I am really stuck as it looks like a very small glitch or something very tiny that I am missing somewhere.
My application looks like this:
#SpringBootApplication
#EnableAsync
#EnableTransactionManagement(proxyTargetClass = true)
#EnableEncryptableProperties
public class Application extends WicketBootSecuredWebApplication { }
without any custom configuration beans, etc.
tree executed in /src/main/resources:
.
├── application-dev.yml
├── application-prod.yml
├── application-staging.yml
├── application.yml
├── banner.txt
└── static
└── admin_files
├── custom_admin.css
└── vendor
├── jquery
│ ├── jquery.js
│ └── jquery.min.js
└── metisMenu
├── metisMenu.css
├── metisMenu.js
├── metisMenu.min.css
└── metisMenu.min.js
Any help appreciated!
Notice that you're asking for /admin_files/vendor/jquery/dist/jquery.min.js but in your resource tree the dist directory does not exist.
Most web applications these days include various prebuilt libraries e.g. Backbone.js.
I want, when I compile my web application with Gulp, to output a single compressed JavaScript file of the library/module I installed using NPM e.g. backbone-min.js.
For example, when you install Backbone.js from NPM the following is installed into the node_modules folder:
.
├── backbone
│ ├── LICENSE
│ ├── README.md
│ ├── backbone-min.js
│ ├── backbone-min.map
│ ├── backbone.js
│ └── package.json
I want to be able to run gulp compile and get the following result in my web application distribution folder:
.
├── index.html
├── scripts
│ ├── backbone-min.js // this is the file I want to copy or generate
│ ├── main.min.js
The way I see it Gulp either needs to either:
compile and minify the library/module and write it to a file called backbone-min.js to the scripts folder, or
copy the backbone-min.js in the backbone module folder to the scripts folder.
What is the best way of doing this?
Short Answer
gulp-useref concatenates all the file references in your main .html file encapsulated by <!--build:js /lib.js--> for javascript files and <!--build:css /lib.css--> followed by <!--endbuild-->
The result will be:
index.html
├── scripts
│ ├── backbone-min.js // this is the file I want to copy or generate
│ ├── main.min.js
as you and every good developer wants it to be.
Long Answer
My recommendation would be to use Bower as your app dependencies manager and npm as your development dependencies manager.
Use gulp-wiredep to automatically inject dependencies as you install/uninstall them and that way you don't have to maintain library css and js files in your index.html.
Uset gulp-inject to automatically inject your own css and js files as your add/remove them. This will result in never ever having to maintain application dependencies manually.
With wiredep, inject and useref you never have to touch your dependencies again.
This is what my index header and end of body look like:
<!---------------------------- Bower Managed Styles ----------------------------->
<!--build:css css/lib.css-->
<!--bower:css-->
<link rel="stylesheet" href="../bower_components/..."
<!--endbower -->
<!--endbuild -->
<!---------------------------- Application Styles ------------------------------->
<!--build:css css/app.css-->
<!--inject:css-->
<link rel="stylesheet" href="content/css/bootstrap ..."
<!--endinject-->
<!--endbuild-->
<!--------------------------- Bower Managed Javascript ------------------------->
<!--build:js js/lib.js-->
<!--bower:js -->
<script src="../bower_components/ ..."> </script>
<!--endbower -->
<!--endbuild -->
<!-------------------------- Application Javascript --------------------------->
<!--build:js js/app.js-->
<!--inject:js-->
<script src="app/ ..."> </script>
<!--endinject-->
<!--inject:templates:js-->
<!--endinject-->
<!--endbuild-->
The comments are tags used by the tools I just mention in order for them to know where to insert the dependencies of interest.
My application entry is a single template reference. Needless to say I never visit index.html. I never have a reference to a file that does not exist. I never have a file that does not have a reference.
My problem lies in the next. I have a javascript application. It utilises the so called module pattern. That is I have multiple js files (one for each class) and during the build process all these files are put to a single file and wrapped in the IIFE. So in my karma config file I specify
files: ['src/**/*.js', 'tests/**/*.js']
The problem arises because I need to use several "modules" in this app. Here is the example of the tree structure of the code:
├── karma_unit.conf.js
├── src
│ ├── Bar
│ │ └── module.js
│ └── Foo
│ └── module.js
└── tests
└── unit
├── Bar
│ └── test.js
└── Foo
└── test.js
So I have two Module classes at the same time. This is not the problem with the "built" code. But for the unit tests this is the problem, because this is the name conflict.
I know that I can have different config files for each such a module and run tests several times (one per a single config file), but this is very undesirable.
Also I supposed that files are executed with respect to their inclusion order, so I tried to write in the config file:
files: [
'src/Foo/*.js',
'tests/Foo/*.js',
'src/Bar/*.js',
'tests/Bar/*.js',
]
But this did not help.
So my question is: how can I circumvent this situation when I'm forced to have several javascript classes with the same name in a single project without running tests several times or renaming these classes?
My appreciation in advance.
This is the reference link that details a solution for your query:
http://karma-runner.github.io/0.8/plus/RequireJS.html