Develop Reference

How to segregate page components into several `/pages` directories on a Next.js app

I recently started my first project with Next.js and since then my pages directory has grown a lot. Now I want to separate my pages and group them into modules, ending up with something like 'src/modules/*/pages/*'.
Researching the topic I came accross exportPathMap, a function that I can include in my next.config.js file and then map custom paths to my pages, but it seems like I'd need to add a new path for every page I create, which is not ideal. I want to give to Next a single expression, something like 'src/modules/*/pages/*', and let it resolve the pages and routes for me (like you would do in a ormconfig.json file to map entities when using TypeORM).
I suppose I could group my page components directly inside pages, like pages/a-module/*, but I also have components, hooks and other logic that I'd like to segregate into modules. I could also try using Node's fs to iterate through my project file structure and map the the page folders, but I'd like to avoid that if possible.

You could use symlinks. You would need one for each module, but not one for each nested path within the module. Your directory structure would look like:
├── modules
│ ├── bar
│ │ └── pages
│ │ ├── first.js
│ │ └── second.js
│ └── foo
│ └── pages
│ ├── first.js
│ └── second.js
├── pages
│ ├── _app.js
│ ├── bar -> ../modules/bar/pages
│ ├── foo -> ../modules/foo/pages
│ ├── index.js
Which would end up with routes:
/bar/first
/bar/second
/foo/first
/foo/second
I'm not sure what that buys you, though, really. Now your modules folder will have the same clutter that pages used to. You don't have to have all of the component content in the files in pages. It could be as simple as:
// pages/foo/first.js
import FirstContent from '../../modules/FirstContent'
export default function First() {
return <FirstContent />
}

As #Roman Mkrtchian mentioned, you're not supposed to do so. My suggestion is that, if you want to organize your files into modules like me, creating a file structure similar to this one:
src
├── modules
│ ├── foo
│ | └── pages
| | ├── one
| | | ├── index.jsx
| | | └── styles.js <- For `styled-components`; could be a css file
| | └── two
| | ├── index.jsx
| | └── styles.js
| └── bar
| └── pages
| └── three
| ├── index.jsx
| └── styles.js
├── shared
└── ...
You should take another approach. As #erich2k8 said, you don't need all of the component content to be in the files inside /pages, you could create the same structure above, but add /pages directly to src:
src
├── modules
├── shared
└── pages
├── foo
| ├── one.jsx
| └── two.jsx
└── bar
└── three.jsx
And inside src/pages/foo/one.jsx, for instance, you'd import src/modules/foo/pages/one, like so:
import OneContent from '../../modules/foo/pages/one';
const One = () => <OneContent />;
export default One;
Yes, you'd still need to create a new file for each page you create inside /modules, but it spares you from a really bad time messing with Next behavior.

This is not permitted by the Next.js team on purpose for reasons explained in this post and in the posts referenced there.
You may read some of the discussions before deciding if you really want to hack the files structure to do it anyway.

What is the proper way to import js, css, scss files to webpack?

I'm new to webpack and I am trying to use material-dashboard (https://www.creative-tim.com/product/material-dashboard) in my project.
Actually, I installed using npm install (https://www.npmjs.com/package/material-dashboard)
So I got this structure in my ./node_modules/material-dashboard:
material-dashboard/
├── assets/
| ├── css/
| | ├── bootstrap.min.css
| | ├── material-dashboard.css
| | └── demo.css
| ├── js/
| | ├── bootstrap-notify.js
| | ├── bootstrap.min.js
| | ├── chartist.min.js
| | ├── demo.js
| | ├── jquery-3.1.0.min.js
| | ├── material-dashboard.js
| | └── material.min.js
| ├── sass/
| | ├── md
| | └── material-dashboard.scss
| └── img/
|
├── documentation/
├── examples/
In their example to import they just use link tags like:
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/material-dashboard.css" rel="stylesheet"/>
<link href="css/demo-documentation.css" rel="stylesheet" />
But I'm using webpack so I've tried to import using require in my entry file (app.ts)
require('material-dashboard/assets/css/material-dashboard.css');
after adding in my webpack.config
loader: isTest ? 'null' : "style-loader!css-loader"
Apparently it works, I'm not quite sure. But there are 3 css files, 7 js files and 2 .scss files.
I don't want to to import file by file, of course there is a better way.
I would like to know what is the proper way to import in webpack js/css/scss files to use in a project?
Thanks.

very easy man
for js file use
import 'the_name_of_npm_package';
for 'css' file use
require('the_name_of_npm_package/../../../the_file.css');
NOTE : if you still find problems u can use Vue webpack template with vue cli there are alot of tuts on utube that template is easy for begginers in webpack it has every loader and config you need .

Spring Boot not serving static javascript file

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.

Node.js and project structure

I am working on a new project with Node.js, Express, Socket.io and the MySQL module and being a beginner with those technologies, I have a few questions about structuring the project and good practices.
Right now, my code is structured as follow:
├── node_modules
├── package.json
├── server.js
├── server.socket.live.js # Socket.io namespace
├── server.database.js # For database configuration and connection pool
├── server.database.resources.js # Model for the 'resources' table
├── server.route.live.js
└── ...
For the current state of the project, it works well enough, but the code grows fast and a sole directory will make the code hard to navigate and maintain.
So I've been trying to figure out a way to structure my code with the following rules:
I need global files that I can include from everywhere (for example: the database and models).
The routes and other sub-components must be (and are) independant to each other.
Node must be able to correctly cache each files, so different paths ('./database.js' and '../database.js') are out of the question.
If possible, avoid requires from parent directories.
With that in mind, I came up with this solution:
├── package.json
├── node_modules
| └── ...
├── server.js
├── server
| ├── node_modules
| | ├── database
| | | ├── package.json
| | | ├── database.js
| | | ├── resources.js
| | | └── ...
| ├── socket
| | ├── live.js # With live subfolder if file grows too big
| | └── ...
| ├── routes
| | ├── live.js # With live subfolder if too many sub-routes
| | └── ...
In theory it works great: with a structure like this I could easily add new "global" modules in server/node_modules, and new routes or socket namespaces, as long as they are independant from each other.
So my question: would that work in practice, or is there a better way to do it? Will Node be able to require the files in server/node_modules with good caching? How do I include the server/node_modules subfolder in my git repository (while still ignoring the root node_modules)?
With many thanks!

Understanding r.js options w/grunt & backbone and relative paths

I'm trying to figure out how to use r.js. I keep getting errors thrown such a module path does not exist, or files getting dumped where they shouldn't be.
I've got a single page application that is integrated with wordpress. I've adopted this backbone boilerplate for my general structure, although I've set things up quite different. My file structure is shown below.
.Theme Folder
├── _assets
| ├── _application
| | ├── css
| | ├── fonts
| | ├── img
| | ├── _js
| | | ├── main.js //this is my require.js config file
| | | ├── _app //here's where the boilerplate structure comes into play
| | | ├── collections
| | | ├── models
| | | ├── routers
| | | ├── templates
| | | ├── views
| | | ├── libs
| | | ├── utilities
| | ├── scss
| | ├── video
| └── build //Concatenated application directory mirror
| └── gruntfile.js
| └── bower.json
| └── package.json
To save the heartache of deciphering my gigantic grunt file. Basically I originally set it up so that everything gets conatenated, uglified, and compiled into the build folder. I created a simple task for r.js to just test things out. I get an error saying my lodash library cannot be found (first path in my main.js file). It thinks lodash is in assets/lodash.js it's ignoring my baseUrl property in my main.js (require.js configuration) it's actual location is assets/application/js/libs/lodash.js. My requirejs task is below:
requirejs: {
compile: {
options: {
baseUrl: "./",
mainConfigFile: "application/js/main.js",
name: "./application/js/main",
out: "./build/js/optimized.js"
}
}
}
I'm having the hardest time figuring out what exactly rjs is doing. When I expect it to work it's not looking for the files in the right directory. When I configure it to find the right files it copies my entire assets folder and dumps it into my build folder... Which has caused a lot of confusion as to what all r.js is doing and what it wants me to input for it's options.
This is the error I am currently getting:
>> Error: ENOENT, no such file or directory
>> 'path-to-theme-folder-here/assets/libs/lodash.js'
>> In module tree:
>> application/js/main.min

It seems to me with the description you give, this should work:
requirejs: {
compile: {
options: {
baseUrl: "application/js/",
mainConfigFile: "application/js/main.js",
name: "main",
out: "build/js/optimized.js"
}
}
}