I'm new to NodeJS and Express moving from PHP. I have been following online tutorials on how to build web apps with Express and it has been an eye opener. So I decided to work on a project with just JavaScript. Problem is after adding a few route definitions in Express, I'm having trouble keeping track of my Express routes and fear it'll get even larger with time. Currently I have almost 45 lines (yes, I have a lot of route, some serve HTML templates files and other just return JSON for my Angular frontend). Is there any better way to manage this before it gets out of hand?
One possible way of organizing the routes is to groups of routes based on functionality and then create separate modules for these groups and then, import these modules to the main app file(app.js or server.js). For example, I am working on a project that has trading functionality, cash deposit functionality and then some other common tasks. So, I have created different modules for these routes and put them in a separate directory called routes.
For example, I have a module named site.js for all the common tasks.
module.exports = function(express,app,passport,router){
router.get('/auth/facebook',passport.authenticate('facebook'));
//other commin routes
};
and in my app.js file, I declare the router and then pass in to the modules that contain routes.
var router = express.Router();
app.use('/',router);
require('./routes/site.js')(express,app,passport,router);
If you are using Express version 4, i wrote a module to handle routes in a cleaner less bloated way. Checkout Exroute Module if it fits your current needs and please provide some feedback if it doesnt.
Related
How should I structure my Vue CLI project? I am unable to find any proper documentation regarding this.
Basically I have around 10 modules and each module has a js file associated with it.
Currently, I am putting all the pages written in my router.js in views directory and all the components in the components directory. I want to know where should I keep mine js files?
All the js api calls associated with every module
JS files containing all the constants related to every module??
Q1: Usually API calls are stored under a respective store if you are using Vuex. If not you can use define them as mixins and use where necessary. The mixins are the parts of the javascript code that are reused in different components. In a mixin you can put any component’s methods from Vue.js they will be merged with the ones of the component that uses it.
Q2: This can definitely go under mixins.
You can also have a util folder (optional) where it contains the functions that you use in components, such as regex value testing, constants, or filters.
Refer to this boilerplate if your project is mid-scale or large-scale.
create a service folder,create service.js -api call goes here(now all you need is to call it when ever you need it)
you have a store folder with store.js(index.js) inside store folder create modules folder
with you modules. inside store.js create modules:[user,event...]
basically that's it. edit your modules files event.js user.js.
you can add getters,mutations,state,actions. just dont forget export const namespaced = true so it`ll go to the global namespace
I'm building an app that should run inside of an AngularJS (1.3.19) module.
The motivation is to reuse AngularJS' already built services and controllers by the scope() and injector() functions.
I cannot use ng-upgrade because this will require refactoring a lot of our legacy code.
Is there a way I can combine two routers for two different AngularJS modules?
We use the angular-ui-router for our AngularJS app.
When I try to change a route on the Angular router, AngularJS' router removes the route and replaces it with an empty string (and runs the otherwise() function as configured).
Any ideas?
Thanks!
I got this.
Configure your paths on both ends. AngularJS' route should point at the html of your Angular app.
Also, I created a node script that imports Angular's routes and transforms them to be AngularJS' routes.
I did this with ts-node and webpack-shell-plugin.
Thanks.
I'm new to Express and programming in general.
If you follow this book you learn to create a single Router() which maps all the routes to all the controllers. You end up having:
controllers
users.js
(other controllers....)
routes
routes.js
This router is then introduced to your app via a single call to app.use(router).
However, if you generate your app via express-generator, it will generate a sample structure with multiple Router()s, which are then mounted to your app via multiple app.use() calls. For example:
app.use('/users', users) // mounts a Router()
app.use('/posts', posts) // mounts another Router()
It seems that Express prefers to have a seperate Router mounted for each controller. Have I got it right?
In the express-generator example, callbacks are hard-wired into routes. Let's say you want to introduce controllers into your code.
You would end up having something like this?
controllers
users
routes.js
callbacks.js
[other controller]
[its Router()].js
[its callbacks].js
My questions is, which is the better way to go?
Is there some architectural concept I misunderstand? (Maybe I should be hard-wiring callbacks into routes when I'm usign multiple Routers?)
Thank you for all the answers.
Multi-routers allows to separate your routes in modules. It avoids to have a big file with all routes. For example, if you take app.use('/users', users), your users.js file will contain all routes associated to users.
Personally, I work on a project with mongoose (http://mongoosejs.com/) which use this architecture :
express/
index.js <- Main file to configure express router with adding middlewares, etc.
routes.js <- All your routes are required in this file
entities/
users/
users.model.js <- Model of the user
users.controller.js <- Controller associated to the model. Any route call a function of the controller
users.routes.js <- All routes for users
projects/
projects.model.js
projects.controller.js
projects.routes.js
With a multi-routers architecture, you will gain scalability and readability. And separation between callbacks and routes avoid to pollute your router with controllers code.
I use the application component segmentation logic when creating my angular application, which is to say I have the following folder structure:
app.module.js
app.config.js
components
---- core
-------- core.module.js
-------- etc...
---- component1
-------- component1.module.js
-------- etc...
---- component2
-------- component2.module.js
-------- etc...
---- etc...
shared
---- sharedComponent1
-------- etc...
---- etc...
assets
Now, I group all my components into my app.module.js file and that's pretty much all that file is there for. My component1.module.js will list dependencies that module requires and so on. Now, I realize that it sort of doesn't matter where I define module dependencies and that I can put all my dependant module, regardless of component in the app.module.js file, but that's simply not clean nor does it offer good modularity.
That being said, I'm not sure what to do with modules that are used in every, or almost every other module, like modules for localization for example. The real problem here isn't that the whole app uses that module, it's that that universal module needs to be configured, so I was thinking about putting that dependency, and the required configuration, in the core.module.js and core.config.js file, respectively.
I've read a lot about angular best practices, but I wasn't able to find something concerning module dependency organization which, I suppose, is because angular puts all the modules in a "big box" anyway.
Another approach would be to create a shared component that focuses on incorporating that particular dependency, or group of dependencies into angular, and then have my other components depend on that component, but I'm not sure if this is too much.
I structure my modules as follows. The only real difference between my structure and yours is that all core/shared are basically the same thing. I have a component folder for each individual module of the application. Anything that isn't part of an individual component goes in core. The things that almost every single component use go in core too, as they are then a core piece of your application.
In my opinion, as long as you are breaking the application into components/angular.modules, keeping core code separate, and the organization is clear and easy to understand, its perfectly acceptable
core
----app
--------app.module.js
--------app.config.js
----util
--------util.module.js
components
----comp1
--------comp1.module.js
--------comp1.etc
----comp2
--------comp2.module.js
I have several AngularJS apps that they all have some common dependencies like angular-translate. All the angular apps have the same configuration (in app.js) for angular-translate.
I am looking for a way to externalize the configuration of angular-translate in all these apps. In a way that I will make the changes in one place (maybe a service?) and then the configs will be applied to the apps.
Btw, I am new to Angular world, your precise suggestions would be appreciated.
You can create an angular module config function in a separate project that all of your projects in your projects import and use. Angular allows you to have as many module().config functions as you want. The same goes for .run functions.
Example
// Some common file available to all projects
angular.module('common-config', [
'angular-translate'
/* other common dependencies here */
]).config(['$translateProvider',
function ($translateProvider) {
$translateProvider.preferredLanguage('en');
// Other configuration here.
}]);
// App 1
angular.module('app-one', ['common-config']).run(/*...*/);
// App 2
angular.module('app-two', ['common-config']).run(/*...*/);
// App 3
angular.module('app-three', ['common-config']).run(/*...*/);