A CMS built on Angular, Firebase, Express and Node.
Quiver-CMS relies on Node.js, NPM, Yeoman, Grunt, Bower, Firebase, Mandrill, Redis, ImageMagick, TypeKit and Amazon Web Services S3.
- Install Node.js if necessary. You'll get NPM as part of the new Node.js install.
- Install Yeoman, Grunt and Bower.
npm install -g yo bower grunt-cli - Create a Firebase account and create a Firebase app. This will be your datastore.
- Create an AWS account, activate S3 and create an S3 bucket.
- Clone the repo.
clone [email protected]:deltaepsilon/quiver-cms.git - Navigate to the repo and install NPM and Bower dependencies.
cd quiver-cms && npm install && bower install - Install redis and ImageMagick.
- Copy
/config/default.jsonto/config/development.jsonand again to/config/production.json. default.jsoncontains the default config which will be overridden bydevelopment.jsonorproduction.jsondepending on your node environment. See more documentation at node-config.
- Sign up for a GoogleMaps API account if you'd like to use
public.maps.apiKey. - Sign up for a Disqus account to use
public.disqus.shortnametake advantage of Disqus comments. - Sign up for Amazon S3 and create your first bucket to use
public.amazon.publicBucket. Also make sure to get Amazon keys and fill in the details atprivate.amazon. - Get your Firebase secret for
private.firebase.secret. - Generate some gibberish for
private.sessionSecret. The project does not currently use sessions... but it might. - You'll need Mandrill and Instagram api keys to use those services.
- Add your VPS login details and deploy commands to
private.serverif you'd like to take advantage ofgrunt deployfor quick deploys. More on this later.
{
"public": {
"environment": "development",
"firebase": {
"endpoint": "https://my-firebase.firebaseio.com/quiver-cms"
},
"api": "https://my-site.com/api",
"root": "https://my-site.com",
"email": {
"from": "[email protected]",
"name": "Tyrion Lannister"
},
"imageSizes": {
"small": 640,
"medium": 1024,
"large": 1440,
"xlarge": 1920
},
"supportedImageTypes": ["jpg", "jpeg", "png", "gif", "tiff"],
"supportedVideoTypes": ["mp4", "webm", "mpeg", "ogg"],
"maps": {
"apiKey": "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
},
"disqus": {
"shortname": "my-disqus-shortname"
},
"amazon": {
"publicBucket": "assets.westeros.com"
},
"structuredOrganization": {
"@context": "https://schema.org",
"@type": "Organization",
"name": "Quiver CMS",
"url": "https://dev.quiver.is",
"logo": "https://dev.quiver.is/logo.png",
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+1-801-867-5309",
"contactType": "customer service"
}],
"sameAs": [
"https://twitter.com/quivercms",
"https://www.facebook.com/groups/123456/",
"https://www.pinterest.com/quivercms/",
"https://instagram.com/quivercms/"
]
}
},
"private": {
"firebase": {
"secret": "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
},
"sessionSecret": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
"mandrill": {
"apiKey": "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
},
"instagram": {
"clientId": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
"clientSecret": "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
},
"amazon": {
"accessKeyId": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
"secretAccessKey": "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
},
"redis": {
"dbIndex": 0,
"ttl": 3600
},
"elasticSearch": {
"host": "127.0.0.1",
"port": 9200
},
"server": {
"HostName": "server.my-remote-server.com",
"Port": 22,
"User": "admin",
"IdentityFile": "~/.ssh/id_rsa",
"destination": "/var/www/my-site-folder",
"remoteCommand": "sh /var/www/my-site-folder/install"
}
}
}
- Set up your Firebase app's security rules. These are a work in progress, and you'll want to make sure that you understand Firebase security rules well before attempting to deploy this app into the wild. You'll find my rules in
/security-rules.json. - Start
cms-server.jsandcontent-server.jsusing eithernodeornodemon. You'll need two terminal windows. You'll runnodemon cms-server.jsin the first andnodemon content-server.jsin the second. - I was originally using
grunt serveto serve up my static files, but as the site got more complex I've switched to NGINX. Here's the configuration that I'm using. You'll need to change the paths to your snakeoil cert and key. You'll also need to edit/etc/hoststo redirectdev.quiver.isto127.0.0.1. See /etc/hosts instructions.
server {
listen 80;
server_name dev.quiver.is;
return 302 https://dev.quiver.is$request_uri;
}
server {
listen 443;
server_name dev.quiver.is;
ssl on;
ssl_certificate /Users/quiver/development/quiver-cms/certs/snakeoil.crt;
ssl_certificate_key /Users/quiver/development/quiver-cms/certs/snakeoil.key;
ssl_session_timeout 5m;
ssl_protocols SSLv2 SSLv3 TLSv1;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
#rewrite_log on;
location ~ ^/(app|images|lib|scripts|styles|views) {
proxy_pass https://127.0.0.1:9800;
}
location ~ ^/api(/?)(.*) {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass https://127.0.0.1:9800/$2$is_args$args;
}
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass https://127.0.0.1:9801;
}
}
- If you're adventurous and don't want to run NGINS, run
grunt servefrom thequiver-cmsdirectory and the app might run. You'll access the front end athttps://localhost:9900. I don't think the back end will work with this deploy method.
Quiver-CMS is built for deploying to a VPS running linux. I recommend DigitalOcean, particularly their "MEAN on Ubuntu" image.
Once you have a VPS up and running, you'll need to install NGINX and install Node as well if you don't have it pre-installed with the "MEAN on Ubuntu" image.
Next install forever to daemonize content-server.js and cms-server.js.
You'll also need to configure NGINX to support multiple node processes.
Here's a sample config complete with a redirect to SSL. The SSL is not necessary, but it makes the entire operation much more secure.
server {
listen 80;
server_name quiver.is *.quiver.is;
return 301 https://quiver.is$request_uri;
}
server {
listen 443 ssl;
server_name quiver.is;
keepalive_timeout 70;
ssl_certificate /etc/ssl/certs/quiver.crt;
ssl_certificate_key /etc/ssl/quiver.key;
ssl_protocols SSLv2 SSLv3 TLSv1;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;
#rewrite_log on;
client_max_body_size 2M;
location ~ ^/(app|images|lib|scripts|styles|views) {
proxy_pass https://127.0.0.1:9801;
}
location ~ ^/api(/?)(.*) {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass https://127.0.0.1:9801/$2;
}
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass https://127.0.0.1:9800;
}
}
- Adjust your nginx max body size up to accommodate file uploads
Copy run.sh.dist and start.sh.dist without the .dist suffix into /bin. Edit both of those files to reference your development directory instead of mine. Then review the files within certs, /config and /nginx to make sure that they match your paths and your information. Once it looks good, run sh /bin/run.sh and hold your breath. Run docker ps to see if your instance is running and what it's called. Try to hit your dev site at https://dev.quiver.is or whatever domain you set up in /etc/hosts.
- If you're having trouble with TypeKit, get rid of the following lines in
index.html:
<script type="text/javascript" src="https://use.typekit.net/bmk8cii.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
Then modify app/styles/theme/_font.scss so that $font-primary and $font-secondary are fonts names to which your page has access.
I've set up my TypeKit bundle to allow access for localhost and 127.0.0.1, but you'll run into issues if you attempt to load TypeKit fonts on your own domain.
Run grunt test