I want to know if there is some boilerplate code to use a frontend workflow tool like Yeoman with a backend framework like ExpressJS, if I want to maintain the same codebase for both the front and back ends.
Basically I want to know -
How do the boilerplate code produced by yeoman and express fit in together. Is there a way to integrate the two? (How does the gruntfile fit into the express project)
Can I substitute yeoman's default watch with an express server which reloads pages on update?
Yeoman is currently focused on front-end app development, but we're going to explore back-end integration in the future.
No, actually there isn't any right now.
But you can combine express.js with the component package manager. There is some work left, and you cant use yeoman components in component.
To answer your questions
You can look for components in the component repo that you have used in yeoman. Not the same, but might be a solution.
Use the module supervisor for this. You can get it via npm
I haven't found an easy way of integrating my own Express + H5BP + Angular + Grunt skeletons into Yeoman, and eventually just settled for creating a repo here: https://github.com/ericclemmons/genesis-skeleton
From what I've read, there are projects underway to add express generators, but eventually stacks are going to get complex enough to where you'll have to maintain your own starter app, rather than generating it.
There's an experimental branch with yeoman + express.js G+ Yeoman/Express Article
I found yeoman.js to be very cool for rapid prototyping but does require some ramping up to get used to the various tools it's "opinionated" about. I've decided to go over each of the core tools in some vids that are hopefully helpful: yeoman.js related videos
Yoeman fullstack generator now generates both front end and back end. Other interesting frameworks which do the same are Sails JS and StrongLoop
It is worth noting there is an express-generator project:
official docs
npm page
I am going to give it a go - because I'm folling this tutorial - but other than that I cant comment on its value.
Related
I just completed basic tutorial about Nodejs and Express. Where can I find free simple projects to learn and read the code that will cover much of nodejs and express?
Sign up for freecodecamp it's a open source project to learn fullstack Javascript (frontend, data visualization with react.js and backend with node.js and mongodb) it has free tutorials and real world projects to do. Once you complete the all projects you can work on real programming problems for non-profits to build your portfolio.
If you don't know them already, maybe these might be useful:
https://github.com/wercker/getting-started-nodejs
http://amirrajan.net/nodejs-by-example/
Other than that, I am permanently learning tons of stuff by looking at the npm packages in the node_modules folder. Especially by reading the tests.
I am currently working on two related projects. One is a Phoenix based website and API, while the other is an Angular2 application that among other things uses the API provided by Phoenix. I now want the Angular2 application to be used by the Phoenix project. The problem is that I don't know what the best approach is. I am very new to Angular2 and NPM, and know very little of how it actually works outside of basic usage. These are the ways I can think of solving my problem:
Put the Angular2 project into the Phoenix project, making it one project. I have no idea how to do this, but I will probably get there through trial and error as both use Node.js so it should be doable.
Publish the Angular2 project to NPM, and then import it to the Phoenix project. How much work would be needed on the Phoenix side? Would it be the same as just running the index.html in the Angular2 project? Would I need some kind of Angular2 "shell" around it?
Run the Angular2 application as it's own thing, and just link to it through the Phoenix website.
Importing it as a node module sounds like the best approach, but can it be done for full applications, or is it intended for support libraries only?
I am unsure if this is the "right" way to do it but this is what I did in the end:
I compiled my entire Angular2 project into app.js, vendor.js, and common.js, I then moved it all to web/assets/. After that I simply created a new html and referenced the files in question.
The biggest challenged was finding something to compile it all into these 3 files. I ended up using a stripped down version of: https://github.com/AngularClass/angular2-webpack-starter
I think you would want to leverage brunch.io, which ships with phoenix to handle your front end dependencies. There are skeletons which are essentially templates that create different front end configs but I don't see one that provides angular2. In this case I would say use bower to install the js packages you want ie:
bower install -S angular2
With this you can use brunch as a processing pipeline and it will handle minification, linting etc. and you will still be working within the "recommended" approach to managing front end assets in Phoenix.
I have a new project which will consist of two parts...a client - SPA using AngularJS and server side using Nodejs - MongoDB. Many articles recommend using Mean.io when developing similar projects, but couldn't find any information on why this is better than simply installing Nodejs, Mongo, AngularJS and using them.
So can someone please tell me the benefits of using Mean.io over installing Node, Mongo, Angular and Express and using them? OR in other words why it is better to use Mean.io rather than downloading and installing each package/ framework individually? Thanks
well, you are going to save a lot of time with plain simple boilerplate code, in my case I've been using meanjs which helps you with a lot of basic functions like:
login using passport, local strategies, social network strategies (g+, facebook, twitter)
Twitter bootstrap
Consistent folder structure
Consistent file naming
Environment configuration for dependencies and custom "settings" (dev, test, production)
pre configured routes with controllers
software development workflow:
grunt (preconfigures task like jshint, build, test)
yeoman generator (save you a lot of time)
nodemon (for reloading pages everytime you save a page)
testing frameworks for client and server side
I can list a lot of more but the point is to mention the benefits are far beyond just by putting all 4 main pieces of software together.
for more info you can look at the overview
I wrote an angularJS app (with nodeJS and ExpressJS as my server). My app is totally independent from the server (I used pouchDB for the data). I would like to create an app/package that can be run from a computer or tablet. How can I do that?
I'm sure there are already lot of questions/answers about this topic but I couldn't find the right solution so I apologize in advance!
Thanks
If you r looking for an full-stack framework, i can really recommend Ionic.
It is a framework, that contains it's own customizable ui-framework(build on sass bootstrap), it is build on cordova aka phonegap and makes it easy to deploy and test the code on android, ios, ... . It is also optimized for angularjs and offers for most functions a directive.
I really love it. I did write a blogpost in german: kkonstantin/ionic
Maybe take your existing frontend javascript code and make use of a css framework, to make it look great for all window sizes.
Like: Ratchet (build on bootstrap)
Then you just make use of Phonegap to deploy your html/css/javascript code to the plattforms.
I've been building apps on the Rails platform for over a year now. That being said, if you can make any comparisons to the Rails equivalent, it might help all parties involved. Just a thought.
Anyway, I'm trying to wrap my head around node, and the front end framework, ember. I was originally intrigued by stumbling across the MEAN stack. After digging into that a bit, I realized I didn't really like angular all that much, and started looking up alternates. Ember seems pretty awesome, and the syntax seems much cleaner without all of the ng- markup to the DOM. I'd like to experiment with mongoDB, and I feel like this approach will teach me a lot.
My question, I guess, is Express. What is the role of Express when using Node? It seems that Ember (even Angular, for that matter) has a pretty expressive router. In my limited understanding of it all, I thought Express was for routes? I found this, which seems to be a MEEN stack of sorts.
The package.json for MEAN is massive, but that MEEN I linked to, is very tiny, with just express, mongoose, and request. Another question, I suppose, is what are the different roles in a MEAN / MEEN stack? Does that make sense? I'm rambling a bit, lol, but I'm hoping to keep researching and playing with this stuff until I have that 'Ah ha!' moment, you know?
mongoose - seems to be a better way of interacting with mongoDB?
express - routes specific to node?
request - seems simple enough. send external requests to other pages on the web. I can't see what the equivalent package would be in MEAN, is this truly needed?
grunt - runs a bunch of stuff so that all the different parts play nicely together?
Any explanations, links, or help are greatly appreciated.
If you're coming from Rails I'd break it down like this:
node.js -> Ruby - your server side language / platform
express -> Rails - your server side framework, although a little more like Sinatra
grunt -> Rake - your preprocessor / build tool
npm -> gem - your server side package manager
Angular.js / Ember.js -> No direct map, your client side framework.
mongoose.js -> ActiveRecord, but for MongoDb. If you want a SQL ORM use Sequelize
Two other tools worth learning are
bower -> your client side package manager, for things like bootstrap
yeoman -> all round js app scaffolding, ties everything together, a great tool to see how to scaffold "best practice" apps.