Saturday, August 8, 2015

AngularJS Project Template and Apache 2.2/2.4 setup

On my Github, I've created an AngularJS project template that sets up Grunt, LibSass, and HTML5Mode.

https://github.com/pbrizardo/grunt_libsass_angular_scaffold

Setting up Apache 2.2/2.4 to support Html5Mode

Use Apache's mod_rewrite to forward the index.html for any URL requests through the use of rewrite rules.

1) Put all rewrite rules in httpd.conf.
2) Edit httpd.conf and put rewrite rules in .htaccess

Method 1 will be more convenient since all changes are done in one file.
Method 2 might be convenient for those who want different rewrite behavior in different applications (Never tried this)

Method 1

1. Open httpd.conf
2. Find the Directory tag for the served documents.

Ex. <Directory "/apache2.2/htdocs"> or <Directory "var/www">

3. Add the following rules:
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png)
    RewriteRule (.*) index.html [L]

4. Make sure AllowOverride None is set

That's it!

Method 2

1. Open httpd.conf
2. Inside the <Directory /> tag, make sure it has the follow options:

<Directory />
    Options All
    AllowOverride All
</Directory>


3. Change all instances of AllowOverride None to AllowOverride All
4. Open .htaccess file
5. Insert the following at the end of the file

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png)
    RewriteRule (.*) index.html [L]
</ifModule>

6. If running Apache 2.4, go to the next step, otherwise, you're done!
7. Due to change in new directives access control modules, directives such as Order, Deny, and Satisfy have been replaced

http://httpd.apache.org/docs/2.4/upgrading.html

So you'll find the old directives under the tag  <FilesMatch "(^#.*#|\.(bak|config|dist|fla|inc|ini|log|psd|sh|sql|sw[op])|~)$">

Replace all directives with

Require all denied

Tuesday, June 16, 2015

AngularJS, Spring MVC, Tuckey URL Rewrite

I wanted to use html5Mode with an existing Spring MVC backend. This assumes that the front-end code will be deployed as part of the WAR file.
I did the following steps:

1. In Angular, I added the following html5Mode config:

$locationProvider.html5Mode(true).hashPrefix('!');

2. In Spring MVC, I added the Tuckey URL Rewrite Module in the Maven pom.xml:

<dependency>
<groupId>org.tuckey</groupId>
<artifactId>urlrewritefilter</artifactId>
<version>3.0.4</version>
</dependency>


3. Do a Maven Update 4. Open the web.xml and enter the following within the web-app tag (I left the debug line there)

<filter>
<filter-name>UrlRewriteFilter</filter-name>
<filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
<init-param>
<param-name>logLevel</param-name>
<param-value>DEBUG</param-value>
</init-param>
</filter>

<filter-mapping>
<filter-name>UrlRewriteFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>


5. Create a urlrewrite.xml under the WEB-INF folder of the your Spring project and the contents should look like the following:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 4.0//EN"
"http://www.tuckey.org/res/dtds/urlrewrite4.0.dtd">

<!--

Configuration file for UrlRewriteFilter
http://www.tuckey.org/urlrewrite/

-->
<urlrewrite>

<rule>
<from>^/mypage$</from>
<to>/index.html</to>
</rule>

</urlrewrite>


And that is it! I had trouble before cause I was using 'index.html' in the 'to' tag instead of '/index.html'

Wednesday, March 25, 2015

[HTML/CSS] Bottom footer for reference

Yea! For once and for all, the bottom footer has been solved. I'm such a noob. Here is my reference to an example:


The only quirk I had once an extra spacing that was occurring at the bottom of the page. To help this, I added overflow:hidden to the wrapper container.

Cheers

Monday, March 9, 2015

NodeJS,SVN Problems

I'll try to spill out my frustrations at the top of my head.

Getting ECONNRESET when doing npm install

Getting this error flag showing up on your screen sucks. To fix, you need to edit the registry URL in the user config file by typing npm config edit and changing the https in the URL to http.

Getting Certificate Expiration date in Eclipse SVN or tortoise

In Windows, search for {User}/AppData/Roaming/Subversive/auth or something along those lines. Delete all the subfolders in the directory, then try to perform actions to the repository. It may ask for your credentials again, so prepare yourself.