Category Archives: Development

Enable CORS to Tomcat

CORS (CORS flowchart) is quite complex to understand but you absolutely need it if you want to write an app in “modern” javascript frameworks like angular.

The simplest way to enable CORS to Apache Tomcat for development is to:

  1. create web.xml (if it does not exist already)
  2. add the included filter. An example is shown below:
<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

 

References:

Angular links

 Recommended sites:

Best practices:

EventEmitter:

https://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter

Binding:

https://lishman.io/angular-2-input-binding

Global data sharing:

http://www.learnangularjs.net/global-data-sharing-in-angular-4.php

Routing:

  1. Guide to Router
  2. Angular router fundamentals
  3. Bootstrap navigation menu 🏅
  4. Nested routes and nested auxiliary routes

Observers and observables:

Pipes:


Various articles:

Pro angular:

  1. https://blog.angular-university.io/why-a-single-page-application-what-are-the-benefits-what-is-a-spa/

Anti angular:

  1. https://www.reddit.com/r/programming/comments/6x8dmz/why_i_hate_your_single_page_app/
  2. https://news.ycombinator.com/item?id=12956059
  3. http://www.realfreemarket.org/blog/2013/07/31/single-page-app-website-style-sucks/

Submit form data to call a web service (Javascript)

If you want to create a small web project, a approach would be to use a combination of bootstrap (frontend), lumen (backend) and jquery (interaction between the two). It is a very strong combination with a very low owning and maintenance cost that can easily scale (by upgrading to laravel) if needed. You can also use angular with does not add a lot of overhead.

While you are trying to implement the above, the following pattern is encountered a lot of times: you need to call a web service via js while the data are filled by the user via a form on the html page. While the web service is being called, you need to show a spinner on the page so that the user understands that he needs to wait until the call has been completed.

Continue reading Submit form data to call a web service (Javascript)

How to install Lumen (for development)

1. Install composer

Either by apt or by using installation wizards. It’s easy.

2. Install Lumen

composer global require "laravel/lumen-installer"

3. Create the project.

Navigate to the directory which you want to be the parent of the directory containing the project and run:

composer create-project --prefer-dist laravel/lumen <your directory>

The directory does not have to be in htdocs (or other equivalent directory of your server)

4. Create a symbolic link in htdocs of Apache

Either with ln -s or mklink.

Eg:

ln -s /projects/php/<your directory> /xampp/htdocs/<your directory>

 

References:

https://lumen.laravel.com/docs

 

 

 

 

Laravel – Deploy on shared hosting

For each method below, we assume that:

Note also that the simplest and safest way to deploy Laravel on Apache web server would be to set the website document root to the Laravel’s [app]/public directory. But usually this is not allowed on shared hostings.

Method 1: set the right document root folder

If you are deploying your application on a subdomain, let’s say a subdomain named [app] (i.e. http://[app].example.com), most hosting services let’s you to specify the root folder for your subdomain.

So you can simply set the root folder for the subdomain to:

[app]/public

and put the Laravel application inside the folder named [app] on your hosting.

When your website is accessed at http://[app].example.com will be served your Laravel application from [app]/public.

Pros: this is the easiest and safest method.
Cons: the hosting service should allow you to choose the document root folder and it’s hard they give you this option for the main domain.

Method 2: create a symbolic link*** (recommended)

Most shared hosting services doesn’t allow you to set the document root folder, but if you have an SSH access you should be able to replace the document root with a symbolic link.

Let be public_html the website document root.

Via SSH, create the ~/[app] folder in your home:

$ cd ~
$ mkdir [app]

Then you can deploy the Laravel application inside the [app] folder.

Create the symbolic link to [app]/public (be sure that public_html is empty):

$ rm -r public_html
$ ln -s [app]/public public_html

Now it’s like the document root folder is [app]/public.

Pros: safe and quite easy.
Cons: the hosting service should allow you to create symbolic links, this usually means you need an SSH access.

Method 3: add an .htaccess in the application root (unsafe)

You can add an .htaccess file in the root of your Laravel application, with this content:



  # Turn Off mod_dir Redirect For Existing Directories
  DirectorySlash Off
  
  # Rewrite For Public Folder
  RewriteEngine on
  RewriteRule ^(.*)$ public/$1 [L]

In your hosting service just put the Laravel application, with the above .htaccess, inside the website document root folder (e.g. the public_html folder). All incoming requests will be rewritten to point inside the public folder.

This is an unsafe method since the Laravel application root folder become the website document root. This could publicly expose some private data (e.g. the .env file) if something go wrong, for example if you accidentally remove the .htaccess file from the application’s root.

Also this method breaks the url /public (e.g. http://example.com/public) that will show the content of the public directory instead of be available inside the Laravel application.

Pros: easy.
Cons: unsafe and breaks the url /public.

Method 4: move the public folder

You can find around the web some nice tutorial that will show you how to move the Laravel’s public folder under the website document root, leaving outside the rest of the application (in a private and safe place). You will need to change some paths inside the index.php file in order to get it working.

A really good tutorial is this one:
https://medium.com/laravel-news/the-simple-guide-to-deploy-laravel-5-application-on-shared-hosting-1a8d0aee923e#.kvr1tze9z

Personally, I would prefer to add the .htaccess file (method 3) over this method, since it is less invasive, it preserves the default Laravel application structure, and both the development and the deployment process will be easier.

But, if you need the most safe method for your application then you should take in account this last method.

Pros: safe and applicable on most hosting services.
Cons: a bit complex to implement; needs some tricks to properly works and to manage the deployment process.

References

http://blog.netgloo.com/2016/01/29/deploy-laravel-application-on-shared-hosting/

http://novate.co.uk/deploy-laravel-5-on-shared-hosting-from-heart-internet/
https://medium.com/laravel-news/the-simple-guide-to-deploy-laravel-5-application-on-shared-hosting-1a8d0aee923e#.kvr1tze9z
https://laracasts.com/discuss/channels/general-discussion/how-do-you-protect-env-file-from-public
https://driesvints.com/blog/laravel-4-on-a-shared-host
http://wiki.dreamhost.com/Transparently_redirect_your_root_directory_to_a_subdirectory