Javascript/PHP continuous integration, testing, deployment - javascript

I am building a web application in javascript with a PHP/MySQL backend. The entire UI is Javascript based, except the index.php which only contains a few PHP lines. Out of that, it all works with AJAX calls. Then I have a PHP backend answering the AJAX calls with JSON.
I have a few questions on how to create a "clean" deployment process. My process should contain:
CI Running Javascript & PHP unit tests, backend JSON tests
JS compression
Deployment to a test server
UI/Acceptance testing
Eventual deployment to a prod server
What tools should I use to do that? I see many CI servers, but which one can do Javascript testing and compression and PHP unit testing?
How can I do staging in Javascript and PHP? I don't want my Javascript on the test instance to connect to the prod backend, neither the test backend to connect to the prod database. How should I implement this switch ?
Moreover, would it be better if I split my project in 2 parts - front-end and back-end or is it OK to deploy/test the whole javascript/php thing as one package?
Thank you a lot for you help

You can do CI of heterogeneous projects using Jenkins
Aside of unit tests you can set there coverage, mess detection and even selenium by simple plugins.
You can do simple deployment using any version control software just don't hardcode your javascript urls and dont user absolute urls. Instead base your your config on environmental variables on your staging and production. IDE's like PhpStorm also have deployment systems if you are interested in something more advanced.

CodeShip (www.codeship.com) can do this. It has the ability to run tools like Grunt or Gulp, Bower, NPM and Composer. And it can run phpunit, selenium, qunit etc. and it can deploy.

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.

Can I use the Node.js packages along with Django?

I think I haven't understood this concept right . If I am using Django as a backend to run server side code , is there a way to include the packages of Node.js also .
Isn't Node.js kind of another environment or language for server side code ?
If I can use Node packages with Django , how to go about it. What does it mean when people say "Node js is a platform and Django is a framework" ?
I would be very greatful if you include some indepth details about these two environments ( new to web development here:))
Can I use the Node.js packages along with Django?
No. Django is a Python framework and thus runs in a Python interpreter. That interpreter cannot run node.js modules because those are Javascript and rely on the node.js Javascript engine.
If you want to compare things:
node.js <==> python (runtime language engines with built-in libraries)
express <==> django (frameworks that run in a given runtime)
This is kind of confusing because Node.js is a server-side javascript platform
Node.js is a Javascript programming environment. It can be used to write servers, but it can also be used as a general purpose scripting environment to do anything you may want to do on your computer, such as implement various build tools.
webPack is one such build tool that is written in Javascript to be run in node.js. Its function happens to be packaging client-side Javascript files, but it could be any type of tool.
There are many tools written in node.js, particularly tools that are often used by node.js developers (since they already have that environment installed).
If you really needed to combine functionality from both node.js and django, then you would have to create two separate programs 1) a python program using django and 2) a node.js program using whatever Javascript libraries you want and then you could communicate between the two programs using whatever IPC mechanism you choose (TCP, stdio, files, etc...).
While you'd need two different environments to use nodejs as a server along with django as a server, node.js has a critical role in managing packages for client Javascript in modern web development.
As an example, tools like Webpack will bundle a series of Javascript modules for a client. One of the more convenient ways to package these modules and their dependencies is using npm, the Node package manager.
So, it would be entirely reasonable to use Node to bundle the Javascript for your client and even to install the modules for bundling. This is especially true if you're using a framework like Angular on the client. So, if you had an Angular application backed by a Django server, your work flow might look like the following:
Create a node project with your Angular App
use npm to install and manage its dependencies
use ng build --prod to call webpack to produce a bundle that could be sent to the client.
All the above would use Node.
Then:
Write your models and business logic for the server in Django
use some Django restful framework to present a REST API that your client application can call.
This is kind of confusing because Node.js is a server-side javascript platform, but it's being used to:
Provide packaging for client modules
provide server-side transformations to prepare the content that your particular site sends to the client.

Questions on NodeJS application

I have very basic questions on NodeJS apps;
When someone says a NodeJS app, does it refer to a pure server-side written NodeJS app ? I mean nowadays, when projects (say Angular, Ember, etc) use Node to install dependencies, can those client-side apps (which run in browser) be also called NodeJS app ? Or are these just NPM using apps ?
The unit-testing frameworks like Mocha, Jasmine, etc be used for both the types of apps I described above ? Or is it meant only for server-side NodeJS app ?
does it refer to a pure server-side written NodeJS app?
Yes. Specifically it refers to apps that have nodejs backend/server.
can those client-side apps (which run in browser) be also called NodeJS app?
It depends. Certain libraries that depend on browser api (e.g navigator, window, etc) will not work. This is because those browser objects will not exists in nodejs environment. For example, jQuery will not work fully in nodejs as certain functions to do with DOM manipulation depends on the browser api. On the other hand. React can be used in both browser and nodejs because it has APIs which are compatible in both browser and nodejs environment.
Previously, if we want to use a library (e.g jQuery) we'd have to attach a corresponding script tag that points to the source. Now, you can use npm to download the library code into the node_modules folder and use it from there using require or ES6 import. But, you probably have to do some preprocessing first such as bundling your code using Browserify and Gulp. You might want to look a tutorial on how to do that here.
The unit-testing frameworks like Mocha, Jasmine, etc be used for both the types of apps I described above ? Or is it meant only for server-side NodeJS app ?
Mocha, jasmine, chai does not depend on browser or nodejs specific features so they all should work in both platforms. As for the others, you have to check if they depend on browser or nodejs specific features. If they do, the library might work in one platform (e.g browser) but not the other.
"Node.js" is a server-side "JavaScript" platform. That means in a NodeJS app we replaces the typical server side languages like PHP, Ruby, etc.. with the JavaScript. When it comes to frontened we have been using Javascript and its libraries like JQuery for a very long time to add behavior to our apps. But after the recent boom of SPA(Single Page Applications) we can see lots of frameworks like Angular, Ember built on JavaScript to make SPA easier.
NPM is a package manager for JavaScript which itself uses Node to perform its operations. Using NPM we can bring many JavaScript packages (that includes all the client side JS libraries) to our project. But that does not mean your's is Nodejs app if you are using NPM to install AngularJs for your ASP.net application. It is like we need Ruby gems to install SASS preprocessor.
That's the beauty of a pure JavaScript(NodeJS) app. We can use the testing framework in both ends. Moreover that a developer can avoid mental switching between different syntax of the two languages, and even we can reuse some code/logic in both server and client side.
npm is a package manager for javascript. Using npm to import and manage packages for your application does not make it a Node.js app.
There is no such "Node.js apps". Applications refer to the front-end/client side.
You can choose Node.js or whatever on your back-end/server side, independently from your front-end.
I hope I have clarified a bit :-)

NodeJS server side application deployment cosiderations

I am writing a nodejs application with Angular as my front end.
For this I am having Git as my code management server.
For client, I am doing minification and it is ready for production.
But I am not sure, how to prepare server side files for production.
Do we need to just copy all the Git folders into production server?.
Let me know the best way to deploy nodejs server application.
You could use pm2 as your daemon to keep your nodejs app up all the time.
Try not to include node_modules in the repo, cause different machines have different setups/installations, you cannot tell if one package would work before you run it unless you npm install them.
If you are familiar with Docker, use it, pre-bundle all (include node_modules) files into the docker image, and you do not need pm2 here, Docker itself can restart automatically. This is the ideal approach.
It really depends on how you (or your company) want to organize the workflow and the size of the project.
Sometimes I too use a GIT repository, because then is really simple to update: just a git pull and (if server files got edits) a pm2 restart N command.
In this way, you dont have to install the whole development stack in order to compile (and minify) the bundles - I guess you work on your local machine where all the development tools are installed.
Keep in mind to use the --dev flag while installing packages that are only required in development mode, so you can keep the production server as slim as possible.
A good practice I found is to add some random tokens inside the final bundle filename (both for js and css) that get then injected inside the final html static files, to avoid the refresh the page loop.
Once you have the bundle files on your dev machine, just upload them to the server (ftp, git, rsync, sshfs mount, whatever you like) and (if server files got edits) restart/reload the node process (Im using pm2 for this, its really great). If you only edited client files, no reload is needed.
Starting from here, there a lot of ways more or less sophisticated to do the job, like git pipelines for example.. but depends on the situation.
Edit: this is a good article about task runner (gulp vs grunt vs vanilla npm), while may be a little off topic, it analyze some aspect of the common deployment process

How to execute server and client tests in one command/process?

as I'm developing a web application using AngularJS in the front-end and Node.js in the server. For now I'm writing tests for the node server (based on Express) using Mocha (+ Chai + Supertest), and client side tests using Mocha and Testacular as a test runner, since Testacular is the tool of choice with Angular.
Note that the Angular app is "embedded" in the node app, as it's located in the template files.
My testing process : for server tests, I just npm test, i.e. mocha <my-test-folder> <my-test-options> ; for client tests, I launch a Testacular server that watches changes in the desired files. But I don't like this parallel and disconnected process and I'm sure there's a better, unified automated way.
Could help me refine the process ?
In my travels I haven't seen a precident for this, but you should be able to achieve it using grunt. You can make a grunt target that calls both.
I have a github project that should help show how to use testacular on an angular project using grunt which will at least help with the client part; will help get you part of the way there.

Categories

Resources