I am at the point where I have to add Express 4 to my modularized AngularJS ui-router app. Previously I used this tutorial to modularize my Angular app. I currently have all the modules for my AngularJS app in the src/app/ directory like so:
$ tree -I 'node_modules|bower_components|assets|scss|test' -L 4
.
├── awsS3.js
├── bower.json
├── Gruntfile.js
├── karma.conf.js
├── karma-e2e.conf.js
├── package.json
├── README.md
├── server.js
└── src
├── app
│ ├── app.module.js
│ ├── auth
│ │ ├── auth.ctrl.js
│ │ ├── auth.module.js
│ │ └── auth.serv.js
│ ├── image
│ │ ├── image.module.js
│ │ ├── images.ctrl.js
│ │ ├── image.serv.js
│ │ ├── images.tpl.html
│ │ ├── imageview.ctrl.js
│ │ └── imageview.tpl.html
│ ├── nav
│ │ ├── login.tpl.html
│ │ ├── nav.ctrl.js
│ │ ├── nav.module.js
│ │ ├── post-register.tpl.html
│ │ ├── register.tpl.html
│ │ └── url.fltr.js
│ └── security.json
├── index.html
└── robots.txt
Now I am wondering how I should break up the Express 4 code to fit in with my Angular modules. I really can't find any tutorials that focus on this. Any ideas?
When i develop client-server applications I tend to keep the server and client completely separate from each other. So I would suggest that you create a "server" folder and in there your layout could look something like this:
server
--app.js
--server.js
--config.js
--controllers
----firstController.js
--routes
----firstRoute.js
--models
----firstModel.js
I would recommend this website: https://scotch.io
Related
I try to document my "large" node.js backend, which has the following file/folder structure:
backend
├── components
│ ├── devices
│ ├── endpoints
│ ├── plugins
│ ├── rooms
│ └── vault
├── helper
│ ├── debounce.js
│ ├── expose.js
│ ├── extend.js
│ ├── infinity.js
│ ├── iterate.js
│ ├── mixins.js
│ ├── observe.js
│ ├── promisify.js
│ ├── propertys.js
│ ├── queue.js
│ ├── request.js
│ ├── sanitize.js
│ └── timeout.js
├── index.js
└── system
├── component
├── hooks.js
└── middleware.js
Basically i want to create tree groups: system, helper & components, where i can add.
Is there a way to add custom categorys/groups in the jsdoc with the above headlines? E.g. (Generated jsdoc output edited to illustrate goal):
Is there a built in way with a combination of built in stuff?
(Im pretty new when it comes to work with jsdoc)
I am doing pretty much this tutorial. Basically you have a pom which controls two modules, the frontend module and the backend module.
Environment: IDE: Intellij, spring-boot, Vue.js
I initialized the frontent module using vue init webpack frontend. I added the pom to the backend module which copies the assets into the backend module asset/public folder. After mvn clean install all the content is in the ressources/public folder, but when I view the browsers sources it does not show any of them.
The resources folder looks like this:
└── resources
├── application.properties
└── public
├── index.html
└── static
├── css
│ ├── app.30790115300ab27614ce176899523b62.css
│ └── app.30790115300ab27614ce176899523b62.css.map
└── js
├── app.b22ce679862c47a75225.js
├── app.b22ce679862c47a75225.js.map
├── manifest.2ae2e69a05c33dfc65f8.js
├── manifest.2ae2e69a05c33dfc65f8.js.map
├── vendor.42fc6c515ccdfe89bd76.js
└── vendor.42fc6c515ccdfe89bd76.js.map
I just noticed that running java -jar backend/target/backend-0.0.1-SNAPSHOT.jar solves the problem. But when I start the application using intellij it does not work out.
Full tree (directories only):
├── fileconverter
│ ├── backend
│ │ ├── src
│ │ └── target
│ ├── frontend
│ │ ├── build
│ │ ├── config
│ │ ├── node
│ │ ├── node_modules
│ │ ├── src
│ │ ├── static
│ │ ├── target
│ │ └── test
│ └── target
│ ├── classes
│ └── test-classes
Okay, as I am having two modules IntelliJ used the classpath of the whole project instead of the backend module.
After changing the path in the configuration to: Use classpath of module: backend everything works fine.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
What is the best way to export a module that includes submodules using an index.js. For a long time now I follow a pattern on naming and saving my web components on my projects (Vue or React). But I want a more practical way to export a module using a single index to avoid cases like the following:
My Pattern
import PostDetail from 'src/views/posts/PostDetail'
We use react and redux for my applications. We mostly try to follow modular design in code folder structure.
Modules happen to be independent in itself and can be used standalone. If some parts of modules are required to be used outside the module itself, we only expose those files through it's index.js
Here's what we follow:
Project-name
├── assets
│ ├── images
│ └── stylesheets
│ ├── components
│ ├── misc
│ ├── objects
│ └── vendor
├── build
│ ├── javascripts
│ └── stylesheets
├── src
│ ├── modules
│ │ │
│ │ ├── common
│ │ │ ├── actions
│ │ │ ├── components
│ │ │ ├── helpers
│ │ │ └── reducers
│ │ ├── module_1
│ │ │ ├── sub_module_1
│ │ │ │ ├── actions
│ │ │ │ ├── components
│ │ │ │ │ └── body
│ │ │ │ ├── helpers
│ │ │ │ └── reducers
│ │ │ └── sub_module_2
│ │ │ ├── actions
│ │ │ ├── components
│ │ │ ├── helpers
│ │ │ └── reducers
│ │ ├── module_2
│ │ │ └── components
│ │ ├── module_3
│ │ │ ├── actions
│ │ │ ├── components
│ │ │ │ └── body
│ │ │ ├── helpers
│ │ │ └── reducers
│ │ └── module_4
│ │ ├── components
│ │ └── helpers
│ └── pages
├── stories
│ ├── common
│ ├── establishment
│ │ └── visiting_clinics
│ ├── providers
│ │ └── body
│ └── relations
└── tools
Each module has an index.js at it's root directory which exposes required files and functions which is to be used in other modules.
This structure makes local file interactions smooth as imports are short, clearly visible and name spaced(functionality based) where it's coming from.
This is an interesting question. I've had this same question in mind for a while and tried out a few different approaches and settled at one that seems to work pretty fine for me.
Put your reusable components in one place.
Put your layout wrappers that use the reusable components in one place.
1. Reusable Components
All your reusable components include custom buttons and standalone components like Posts as you've mentioned. If you're posts can have details and comments, keep two separate components PostDetails and PostComments and import and compose them in a separate Post component. Plug and play is the key.. You can opt for two structures here,
components/PostDetails
components/PostComments
components/Post
or
components/Post/PostDetails/...
components/Post/PostComments/...
and import them in components/Post/Post.js
But your default export will be in components/Post/index.js that will export Post.js. This way you're making sure, Post component is composed and reusable and can be imported as components/Post in any page/layout.
2. Layout Wrappers
All your pages/layouts go here. Typical example would be home page, about page that would import the components and put them in the right place.
This usually goes like with folder names like pages or containers depending on the project.
pages/home
pages/about
I have a few code repos that can help you better grasp this project structure.
Portfolio
React-Redux Boilerplate
I've tried to set up a grunt csscomb task, but I'm not sure if I'm getting the globbing pattern right:
csscomb: {
dynamic_mappings: {
expand: true,
cwd: 'app/',
src: '**/*.scss',
dest: 'app/assets/tempcomb'
},
options: {
config: 'csscomb.json'
}
},
Here is my folder architecture:
app
├── assets
│ ├── css
│ │ ├── imports
│ │ │ ├── helpers
│ │ │ │ └── _helpers.scss
│ │ │ ├── layout
│ │ │ │ ├── _fonts.scss
│ │ │ │ ├── _grid.scss
│ │ │ │ └── _reset.scss
│ │ │ └── modules
│ │ │ ├── _dev.scss
│ │ │ ├── _indicators.scss
│ │ │ ├── _modal.scss
│ │ │ ├── _nav.scss
│ │ │ └── _ref.scss
│ │ ├── main.scss
│ │ └── pages
│ │ ├── bibliography.scss
│ │ ├── cover.scss
│ │ ├── example.scss
│ │ ├── examples
│ │ │ ├── _bar-graph.scss
│ │ │ ├── _modal-transitions.scss
│ │ │ ├── _modals.scss
│ │ │ ├── _scroll-end-animation.scss
│ │ │ ├── _scrollable.scss
│ │ │ └── _tabs.scss
│ │ ├── index.scss
│ │ └── prescribing-information.scss
│ ├── fonts
│ ├── img
│ ├── js
│ ├── tempcomb
What I want it to do is look at all the directories under app, take all the scss files and write them to tempcomb while also maintaining the folder structure.
Currently it replicates the folder structure fine, but it only outputs the scss files that are in the layout folder.
If anyone could explain to me why this is happening it would be much appreciated!
P.s. before the task runs, the tempcomb folder doesn't exist. I've just added it to the architecture diagram to show where it ends up.
When I use bower install to install the dependencies, they will be downloaded into bower_components, like:
├── jquery
│ ├── AUTHORS.txt
│ ├── CONTRIBUTING.md
│ ├── MIT-LICENSE.txt
│ ├── README.md
│ ├── build
│ │ ├── release-notes.js
│ │ ├── release-notes.txt
│ │ └── release.js
│ ├── component.json
│ ├── composer.json
│ ├── grunt.js
│ ├── jquery.js
│ ├── jquery.min.js
│ ├── package.json
You can see there is no version in the file names.
Is there any way to make bower add the versions to the file name or path automatically, so that I don't need to worry about the browser-cache if I include them directly in the web server?
I want it like this:
├── jquery-1.9.1
│ ├── AUTHORS.txt
│ ├── CONTRIBUTING.md
│ ├── MIT-LICENSE.txt
│ ├── README.md
│ ├── build
You can do like this :
bower install jquery-1.9.1=jquery#1.9.1