Nuclide is built as a single package on top of Atom to provide hackability and the support of an active community. It provides a first-class development environment for React Native, Hack and Flow projects.
Whilst trying to deploy a Node.js script to one of our windows servers I realised that NPM wasn’t downloading the necessary components because it wasn’t even trying to use the corporate proxy server.
It’s a Windows server so I checked the proxy settings
c:> netsh winhttp show proxy Current WinHTTP proxy settings: Proxy Server(s) : http://192.168.0.117:8080 Bypass List : <local>
That seemed to be telling the OS to use the corporate proxy. But the NPM progress bar just remained frozen and no modules were downloaded.
NPM has it’s own proxy settings in your user profile
.npmrc file. You can edit the file and add them in yourself:
or at the command prompt:
c:> npm config set proxy http://<username>:<password>@<proxy-server-url>:<port> c:> npm config set https-proxy http://<username>:<password>@<proxy-server-url>:<port>
For rapid application development there’s a lot of pre-written code out there that is mature and highly capable. There’s no need to build from the ground up when you can use a framework or scaffolding to build your application.
Laravel and Composer
My first step is to use Laravel. It’s installed using composer – which is a dependency manager for PHP. This means if a PHP component you install needs and relies upon other components, they’ll get installed too.
Composer installs all the PHP dependencies under
./vendor path of your project. The files in this path do not need to be included in your distribution. They can be installed and updated automatically using composer.
Composer keeps track of what you install into your project in the file
composer.json. So whenever you run
$ composer update it will read this file and pull down all the dependencies and install them into
Node.js and NPM
Whilst I may not be developing a Node application I can certainly make use of Node for the development process. It offers some very beneficial development features. It runs webpack to monitor and compile the projects assets and browsersync to refresh my browser when an asset is updated.
NPM uses the file
package.json to monitor/manage the dependencies you install, which get installed into
As part of the Laravel install you’ll get a flavour of Webpack, or mix as Laravel terms their adaption.
var my_variable_name = 1;
Once the code is delivered to the browser in a production environment there is no need for the code to be human readable anymore.
The primary input for webpack comes from the assets
Webpack compiles your assets into
./public/js/app.js. So you only have a few includes required in your projects HTML to use your assets. You can split them down further so 3rd party or vendor code is separated from your own code.
./resources/assets/js/components. Once required/imported in your
app.js file the
.vue files get compiled into your application.
Bootstrap and Bootstrap-vue
Bootstrap is a HTML presentation framework. it provides the visual construction of the web page that the users of your application see. It’s the styling/CSS of the application. It’s a distinctive style, but very powerful in that designing for mobile, tablet through to desktop presentation is a built in function of the framework.
Bootstrap-vue is a Vue.js componentised implementation of Bootstrap. The need for writing HTML code in the manner of Bootstrap is taken over by writing vue components that build the Bootstrap HTML. So a Bootstrap button can become a vue component with data binding with actions and references like any other vue component. This brings program-ability to the visual presentation capabilities of Bootstrap.
Vuetify and Material Design
As an alternate presentation framework to Bootstrap/Bootstrap-vue on one project I’ve used Vuetify. Vuetify again is a very distinctive style. It uses the Google Material Design styles to present your application.
After writing and testing the application locally I need to deploy it to a web server.
As part of my development process I use the Git version control system. This allows me to commit changes of my code in a controlled manner and enables me to rollback to previous versions, compare changes I’ve made and easily deploy the code to other systems.
For this I installed a Gitlab server so we have our own internal Git version control server. Using Github is only for publicly accessible code unless you take out a commercial package. Having our own Gitlab server provides the same functionality, but enables me to keep private projects internally.
To deploy the code to a server is as simple as compiling my assets for production and cloning the project to the server or pulling the changes.
Compile my production assets and upload/push them to the Gitlab server:
$ npm run prod $ git add . $ git commit -m "Production deployment" $ git push
Then from the server clone the code and install/update the PHP dependencies:
$ git clone firstname.lastname@example.org/projectpath/project.git $ composer update
or, to update the server:
$ git pull $ composer update
Then it’s good to go.
So in all it seems a lot of components and when I started down this path I thought it all very confusing and more than a little daunting. But it’s like Lego. They all snap together quite tidily and the end result is a comprehensive application development and delivery platform.
When you have a Vue.js powered app authentication using traditional logon pages isn’t going to work. This is because primarily the apps interaction with the server is using Ajax calls with axios. So now we need to use JSON Web Tokens (JWT) to handle the authentication and store a client side session authentication token.
This article is very useful for this: https://codeburst.io/api-authentication-in-laravel-vue-spa-using-jwt-auth-d8251b3632e0
I started recoding a project that I’d only just built using Vue.js as an exercise in learning Vue. The project had only just been deployed using Laravel 5.5, Bootstrap 3 and jQuery. So I rewrote it and used Laravel 5.5, Bootstrap 4 and Vue.js.
The initial project delivered a nav menu driven series of pages that presented tabular results with a search/filter capability, with some Ajax/XHR calls to update datatables.
I’d built several blade templates to deliver the content and used some excellent Open Source code for building PHP forms for the filters and result details – Kris’ laravel-form-builder. I used DataTables.net to present columns of data and it all came together quite well.
But then I switched to Vue.js and replaced the form builder and datatables with bootstrap-vue.
Today I have been mostly smashing my head on the desk trying to figure out Laravel and Vue.js.
I thought I’d try to template an existing Laravel 5.5 project using Vue.js. Try as I might I could not get the template to work. I even stuck with the default
example-component trying to get that to work . All I saw was an error reported in the console.
failed to mount component: template or render function not defined.
So I deployed a completely new Laravel project and added the
example-component into the welcome page and it worked!
When importing a CSV file using Laravel I found that I’d get some strange error messages relating to a called function not matching the parameters that I was sending.
local.ERROR: SQLSTATE: Undefined function: 7 ERROR: function st_makepoint(numeric, numeric) does not exist LINE 1: SELECT ST_SetSRID(ST_MakePoint(NEW.x_coordinate, NEW.y_coord... ^ HINT: No function matches the given name and argument types. You might need to add explicit type casts.
I narrowed it down to the
ST_MakePoint() functions and was 100% sure that they existed in the database, and with the right parameter types. I tried casting the values to
double precision and still and the same errors.
The solution turned out to be that the function existed in the
public schema NOT the schema I was using!
Laravel have bundled Axios in with their framework. I didn’t know what this was at first and didn’t use it. But once I figured out what it was for I tried to make a gradual change in coding to start using it.
The simplest way I can describe it is as a promise based replacement for jQuery
$.ajax() for XHR submissions.
I needed a mechanism to upload CSV files to my Laravel instance and then process them into a table. The first part was working out how I wanted to upload the files.
I came across
blueimp-file-upload which seems pretty popular and capable.
There was no need to go overly fancy. Just a simple form will do as the file will probably be uploaded as a single file. First I had to figure out how to get blueimp into Laravel.
The newer versions of Laravel support OAuth for token auth, but I wanted to carry on using something simple. Just a token stored in the
user table and something that can be passed when calling an api from within my own application.
This article had the workings for me: https://andrew.cool/blog/64/How-to-use-API-tokens-for-authentication-in-Laravel-5-2