Bazel: Integrating with npm projects? - javascript

I'm interested in using Google's open source Bazel in my project.
My project is a monorepo that consists of three sub-projects:
Core - A truffle project.
Core.js - A JavaScript library, which includes some build artifacts from Core.
Muse - A react & redux frontend which uses Core.js.
I would like to use Bazel for the following:
Building the dependency chain as described.
Continuous integration & testing on Travis CI.
Generating documentation.
Automatically Deploying artifacts to npm and deploying Core using truffle upon releasing to a designated release branch.
A couple of questions:
How easily can Bazel integrate with existing (non-hermetic) build systems, such as: webpack, truffle, etc.. ?
What about cases in which I can't know the output files statically beforehand?
How much Bazel disrupts the directory structure and workflow that I'm used to with npm based projects?
Can it be used to do automatic deployments as described?
How complex/expertise is needed to make such a build system with Bazel?

Related

Can an npm/yarn project depend on a git repo which hasn't been built?

We are developing a Vue component library for use in our team's apps. It's open source but it doesn't make sense to actively distribute it to the community. Firstly because it's only valuable to us, secondly because we want a simple development procedure with small iterations.
I figure we should yarn add it from its GitHub repo url, and not publish it to NPM. What confuses me with that approach is how to get it built? Would I have to build the library and add its dist/ to git? Or create a GitHub release any time I want to update an app that uses the library? Or can I easily build a dependency from the depending app's dev env?
(I have tried yarn add author/repo#branch but it doesn't build node_modules/repo/dist. I have no prior experience in publishing to NPM.)

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.

Publish Aurelia component on NPM?

We have built a small-ish application using Aurelia, and would like to be able to integrate the app into a larger codebase. For example, it may be desirable to publish the Aurelia app on NPM, so other projects could integrate our code.
How can we build/publish the Aurelia app, so that it can be instantiated in a larger JavaScript application?
Typically, you wouldn't publish an entire Aurelia application to NPM, rather you would push plugins to NPM.
The simplest way to learn how to do this is to follow the example of the various Aurelia repos. We build the code in to multiple formats, but the most important are AMD and CommonJS (which is more important for your company is dependent on what tooling your company is using). Once you've built the code, the next step is to make sure your package.json file is set up correctly. It's best to copy the example of what we're doing in our own repos.
I would start by looking at either the dialog plugin or the templating-resources plugin. Both of these show good examples of how to publish your Aurelia plugin to NPM, whether it is a public or private npm feed.
https://github.com/aurelia/dialog/blob/master/package.json
https://github.com/aurelia/templating-resources/blob/master/package.json
Both of these plugins are set up to support Webpack, JSPM/SystemJS, and the Aurelia CLI out of the box.
I totally agree with #Ashley in not publishing larger applications to the global NPM registry. The big advantage of it is the simplicity of all that small packages which can be used to build large applications.
If you feel you got some reusable code, put in an own package and publish it.
Anyway, to give you an answer which does not require you to publish your complete app: you can include a complete repository (which is probobly what you are lookig for) in a different application via NPM.
npm install git://github.com/somegit/hubrepo.git
Or directly via the package.json:
"dependencies": {
"private-repo": "git+ssh://git#github.com:somegit/hubrepo.git#v1.0.0",
}
You can also do something similiar e.g. using JSPM. This would be simply:
jspm install your-app=github:OrgOrUser/your-app#your-branch
If you are facing long relative paths in your imports now, depending on your tooling, you may be interested in something like e.g. Resolving require paths with webpack which shows how to alias relative paths.
Sources/Links:
How to install a private NPM module without my own registry?
npm install private github repositories by dependency in package.json

Why angular 2 need node.js

I don't have experience in front-end but I want to create a simple app using Angular 2.
Why do I need to install Node.js as a prerequisite step? Why does Angular use Node.js?
There are a couple of things that Angular uses Node.js for:
Installing and managing packages. From the Quickstart tutorial:
Angular application developers rely on the npm package manager to install the libraries and packages their apps require. The Angular team recommends the starter-set of packages specified in the dependencies and devDependencies sections.
Compiling the TypeScript used into JavaScript that the browser understands - browsers can't process TypeScript natively and the SystemJS imports used in your code aren't supported in browsers yet:
We strongly recommend transpiling (AKA compiling) to JavaScript during a build phase before running the application for several reasons including:
We see compiler warnings and errors that are hidden from us in the browser.
Precompilation simplifies the module loading process and it's much easier to diagnose problems when this is a separate, external step.
Precompilation means a faster user experience because the browser doesn't waste time compiling.
We iterate development faster because we only recompile changed files. We notice the difference as soon as the app grows beyond a handful of files.
Precompilation fits into a continuous integration process of build, test, deploy.
node.js is required in order to install the library using the node package manager (npm).
It is not required to run an app using angular2, only to build it.
For any modern JS based application, as the complexity grows, the app becomes difficult to manage.
In order to make developing and managing complex applications simpler, there are frameworks such as Angular, React etc. and they provide number of tools for the same.
These tools are linting, scaffolding, running unit test cases, starting web server for local development, minify and creating build for the production use etc.
These tools are based on NodeJS as it is JavaScript only and therefore can be customize as per developers needs.
And that's the reason you need Node.js for Angular2 development.

Deploying JS projects

I would like you to share your way of deploying complicated JS projects, where Grunt or Gulp are used.
For example, grunt build command concats css, js files, puts minified bower dependencies into dist folder. As far as i know, we should not store build results in version control repo, shouldn't we? Also, development environment is not needed on production server.
That is why flow like: git push production, and then grunt build on production server, then restarting it is not a good practice, isn't it?
The purpose o question is to find out, how should I deploy complicated JS projects when:
Building is necessary.
Building should not be done on production server.(Or it is a normal practice?)
Build results should not be indexed by version control system.
Deployment should not be done manually.

Categories

Resources