Yeoman setup for client + server project - javascript

I'm developing a framework based on "Scalable Javascript Application Architecture" with modules that should be able to run both on the server (node) as well as the client.
I'm looking for a good project set-up/bootstrap where client and server-side could be developed/build/tested separately while still making use of some shared resources such as the mentioned modules.
I like Yeoman for a clientside setup, and it seems that yeoman is extending it's reach to include scaffolds for server-side stuff although this is still somewhat experimental.
However, to this day I 've yet to find a project setup that combines server + client setup as described above.
Any pointers, github test project, etc. highly appreciated.

You might want to take a look at this experimental branch the Yeoman team are working on:
http://github.com/yeoman/yeoman/tree/express-stack

Related

Building SPA frontend without node/npm

I'm a back-end java developer (spring boot) and currently I'm interested in building a single page application.
What I like about SPA frameworks (mostly Vue):
Model-binding (saves boilerplate code)
Components and templates (separating code in multiple files is always good, but I don't like single file components as I feel they mix the view and logic)
Routers
However, unless you are using Node there seems to be poor integration
What I don't like:
Node (I develop backend in Java so I don't want to install node just as a prerequisite for NPM)
NPM (I already have dependency management in Maven/Gradle. I actually don't mind it as much, I just don't want to install it and manage it seperately)
I understand why stuff like Node, Npm, Webpack is necessary, it's just that I've already have Java/Spring/Eclipse doing all that for me. I have no desire to have basically two separate build processes.
TLDR: I like the direction and architecture of modern frontend, I just don't want to deal with the tools that are used.
Specific Question: How can I develop a modern SPA using Spring Boot, Gradle/Maven and Vue.js and not have to install Node/Npm/Vue cli etc. What are the best tools if there are any?
Thank you.
You can use maven frontend plugin hosted from here.
It is maven plugin that is leveraging downloading nodejs, webpack, gulp, grunt and running it on your codebase.
You will be able to run maven build and nodejs will be downloaded automatically. It will run your frontend build as well and in resulting jar you will have only necessary minified files.
However, you have to be aware that if you want to debug your frontend application it is a good idea to have those things installed and being able to run the app locally without minification of html and js files.
If you don`t want to download tools you can use helper scripts provided by authors of this plugin to use tools downloaded by this plugin.

Add NodeJS backend code to an Angular-seed based project

I recently abandoned the awesome LAMP solution for Node/AngularJS and I have some serious (and noob) difficulties to begin.
I took an existing AngularJS project based on Angular Seed and I didn't figure out how can I add some backend javascript code.
In online tutorials, I always find an app.js file, in which there is some "requires" and where I can add an extra server code. To launch this kind of project I have to node app.js
In my Angular-seed based project, there is only a package.json that contains script commands.
Also, I noticed that to launch it, I have to npm start.
Where can I put my NodeJS code in this project ?
Thanks in advance !
Usually you will have two differents projects. The backend (Nodejs) and the frontend (Angular). You can expose your backend logic using a public API that your frontend will use. For example you can expose a REST API using nodejs with help of express. I recommend you to take a look at swagger that can help you to define your api.
After that using your angular app you can send different requests to that API and consume the info that receive from it.
To sum up you will have two different projects. Hope this helps

Meteor new application structure is slow down development for ui folder

I have migrated my meteor 1.2.1 code base to meteor 1.3.0 and also moved all client code to imports/ui to utilize lazy loading feature for imports folder.
My problem is, If I am changing any client side file its restarting every time, which slows down development time in meteor 1.3.0 as I have to wait for building process.
Please provide your suggestion or best approach to overcome this issue.
As I have used Meteor 1.3.0 imports directory structure I have faced that issue but below are solution.
I am posting answer to my question as I have found reason why Meteor rebuilding my client side code, When I change any file.
Currently I am using /imports/ui/ for storing client side code. As you all know ui directory doesn't have any special purpose in Meteor build.
So, it assume this code as client or server code and rebuild and restart meteor app every time.
If you rename that folder/directory to client then it only refresh client side code not full app because client folder have special meaning in meteor.
Moreover now you can also use latest version of meteor which help to speed up startup building your app.
Hope this will help you solve problem.
Meteor 1.4.2 is been released in these days.
In the official forum they say: The big news is improved rebuild performance.
Maybe you should give a try.

MEAN.JS Cannot connect MongoDB

I am newbie here, starting to learn MEAN.JS, As I installed everything and tried to run
grunt --force
on the command line, it returns an error like the image below.
Im using windows here and also I already installed MongoDB on the C:/Program Files path. Thanks in advance! :)
Getting started with the MEAN stack might seem very daunting at first. You might think that there is too much new technology to learn. The truth is that you really only need to know “Javascript.” That’s right, MEAN is simply a javascript web development stack.
So, how do you actually get started developing on the MEAN stack?
The first step is to set up a project structure. I’ve found the following structure to make the most sense:
controllers/ db/ package.json server.js public/
This structure lets you keep the entire stack in a single project. Your AngularJS front end can go into the public folder while all your Express API logic goes into controller and your MongoDB collections and logic go into the db folder.
Now that you’ve set up a general project structure, you need to initialize your public folder as an Angular project. It is best to do this using a tool called Yeoman.
Yeoman is a toolkit that makes it easy for you to get started with a variety of Javascript frameworks and other web frameworks like Bootstrap and foundation. You can learn more about Yeoman at Yeoman.io.
Installing Yeoman is pretty straightforward.
You can read more here: http://www.citizentekk.com/mean-stack-tutorial-how-to-build-loosely-coupled-scalable-web-apps-nodejs-angularjs-applications/

Build for js environment without npm?

We are currently building our frontend js codebase (angularjs) using nodejs with grunt, which seems to be a popular setup, but we are not happy with this solution. Does anyone have suggestions for a build setup for e.g. linting, minimizing our js, running less, etc (in addition to some custom steps for angular in general and for our application specifically) without using nodejs at all?
I would leave it at that to avoid starting a flamewar, but here are, for context, some of the shortcomings of the current setup in our view:
grunt does not have even the basic functionality of a 1970s build system, like automatically re-building only files that have been modified based on file modification time
npm is causing constant headaches running on our build servers at every build
If grunt does not have even the basic functionality of a 1970s build system, why won't you use a 1970s build system then?
Just use make if that's what you're happy with. It still works fine. There's no reason not to use it if it you're satisfied with how it works.

Categories

Resources