Posted by RobKoberg on August 18, 2014 at 2:10pm
A few weeks ago, I read a blog post about using angular in drupal. It mentioned to rebuild the app each time you make a change. That would drive me mad.
If you are using angular on the same server as drupal (that is, in a subdirectory of the docroot), you can proxy your grunt served angular app.
To proxy the angular app do a normal $ grunt serve to have the app running. In a apache vhost, you can place:
<VirtualHost *:80>
DocumentRoot "/path/to/drupal/docroot"
ServerName local.dev
ProxyRequests Off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
# make sure the port is the one your grunt served app is using..
# /app is the directory I chose to serve the angular app
ProxyPass /app/ http://0.0.0.0:9002/
ProxyPassReverse /app/ http://0.0.0.0:9002/
</VirtualHost>Restart apache. grunt needs to be serving the app or you will get a 503 error. If that happens, do a grunt serve and restart apache.
Let's say you have a directory structure like:
$GITROOT
- angular
|-app
|-node_modules
|-Grunt.js
|- etc...
-docroot (drupal)
|-app (built version of the angular app for deployment to server)
|-index.php
|- etc...The docroot/app can exist or not during your local development because you will be using the proxy. However, if grunt is not running, and you have docroot/app built and there, you will be serving the built version of the angular app, so this is a tricky spot. It is easily noticeable when you have a dev console open in the browser, but this could be a problem point (better ideas?). I usually build the angular app before committing changes to git that will be deployed to the server. Grunt needs to use a force option to clean the docroot/app directory. In my Grunt.js clean task, I have (note dist/options/force=true):
// Empties folders to start fresh
clean: {
templates: {
files: [{
dot: true,
src: [
'.tmp'
]
}]
},
dist: {
options: { force: true },
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/',
'!<%= yeoman.dist %>/.git'
]
}]
},
server: '.tmp'
},What do you think? Questions/concerns/criticisim?
How are you setting up projects?
Comments
I have more to share about
I have more to share about creating a simple (simplistic?) theme that just serves json (redirect to app in html.tpl.php) and a basic helper module. It allows you to use the drupal menu system and linking just works works. It is painful to write here, so I will make a blog post, but might not be able to get to it till the weekend.
Grunt watch?
I've just been putting my app in /headless/angular and running grunt watch.
That's not great for production, but presumably deployments to prod are more structured. ;)
https://pantheon.io | http://www.chapterthree.com | https://www.outlandishjosh.com
node.js on port 3000, no grunt
I'm not using grunt, I sure will start!!!
Also I'm not integrating node with Drupal, but the idea intrigues me, since we have other sites on Drupal and the existing node application(s) suck.
My question is whether the Proxy access section is necessary? I don't need it in my current vhost.
ProxyRequests Off<Proxy *>
Order deny,allow
Allow from all
</Proxy>
My vhost:
<VirtualHost *:80>
ServerName servername.local
#disable proxy
ProxyRequests off
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
ErrorLog /path/to/error.log
LogLevel warn
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
¿ are you netsperienced ?
♥ follow me @decibelplaces ∞