Working on automating the import & update process for #1

Author: Josh-Hebb

README.md

@@ -2,6 +2,10 @@
 
 The project is a quick starter for AngularJS applications consuming content from Contentful, a content as a service provider.
 
+You just have to sign-up for a Contentful account which is totally free, create a space and grab your "Management" API key for when you initialize the project. We'll import the sample content model along with the content to your space so you have a starting point to experiment from. It's quick and simple to register for a space, as is the upload process for the sample data into your own space.
+
+You can then customize the content model to your liking as the content model and data will be under your own personal Contentful space. Shout-out to [Stefan Judis](https://github.com/stefanjudis) from Contentful for the heads up about the import & export modules.
+
 <img src="https://images.contentful.com/fo9twyrwpveg/44baP9Gtm8qE2Umm8CQwQk/c43325463d1cb5db2ef97fca0788ea55/PoweredByContentful_LightBackground.svg" width="225" style="margin-left: 20px;" /><img src="https://angular.io/assets/images/logos/angular/angular.png" width="80" /><img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="60" />
 
 
@@ -27,22 +31,24 @@ and npm is simply a node package which is a package manage in itself. It allows
 
 Just [fork](https://github.com/joshhebb/angularjs-contentful-starter) or pull down the repository and run the following commands.
 
+**Before you start** when you run the final step of this setup, you will be asked to enter your space ID and management API key from Contentful. If you haven't registered for a account [head over to Contentful](https://www.contentful.com/sign-up/#dev) and get started.
+
 ```shell
 git clone https://github.com/joshhebb/angularjs-contentful-starter.git your-project-name-here
 cd your-project-name-here
-npm install -g gulp           # Install Gulp (global)
-npm install -g bower          # Install Bower (global)
-npm run init                  # Run init task to install the node modules, libraries and then call gulp to build the app
+npm install -g gulp               # Install Gulp (global)
+npm install -g bower              # Install Bower (global)
+npm run init                      # Run init task to install the node modules, libraries and then call gulp to build the app
 ```
 
-### Contentful Integration
+If everything goes okay, you will have imported the content model into your space and built the project. You're now ready to start development!
 
-The project relies heavily on Contentful which is a headless CMS. It's a content as a service provider that exposes it's content through rest APIs exposing content as JSON, easily consumed in Angular.
 
-When you pull down the project - it will be pointed at my Contentful space which has content to imitate an Apple store selling some categorized products, with some additional store information hosted on the site as well as a simple blog. I was curious how the component relationships would work and it is what drove my content modelling.
+### Contentful Integration
 
-You can either experiment with the JSON that's returned to you, or rip out any implementation details in the context of my Contentful space and start on your own content model.
+The project relies heavily on Contentful which is a headless CMS. It's a content as a service provider that exposes it's content through rest APIs exposing content as JSON, easily consumed in Angular.
 
+One of the cool things about Contentful is that it ships with an export and an import API - so the project is setup to upload the sample content model that I created, along with sample content, into your space in seconds - you just need to register for a Contentful account and setup a space. No credit card required.
 
 ### Gulp Tasks
 
@@ -88,7 +94,6 @@ Some things to know:
 <img src="http://whobrokethebuild.me/wp-content/uploads/images/angular-contentful-starter.gif" />
 
 
-
 ### Adding AngularJS Libraries
 
 The project uses one of the node packages to install libraries - bower. The process is simple - run the bower command specifying the library (and optional version) with the save command which will download the library into our lib folder which we can reference.
@@ -121,5 +126,25 @@ If you remove a library:
 * Remove any references in the application or in index.dev.html
 
 
+### Common Setup Problems
+
+ If you run into issues with npm and are seeing weird errors - won't worry, it's unfortunately all too common! The first thing I usually do is delete the node_modules and run an 'npm install'. Keep in mind that folder is not checked into the repository, and is easily rebuilt from the information in package.json.
+
+ * Delete node_modules in project
+ * run 'npm cache clean'
+ * run 'npm install'
+
+If that doesn't work, I usually assume it's a node.js (or its module npm) versioning problems. Keep in mind npm is a component of node.js, so first verify your node version first:
+
+```shell
+# Check the node version
+node -v
+
+# Check the npm version
+npm -v
+```
+
+At the time of writing this, I am on **node.js v8.9.4** and **npm v5.6.0** which are the latest production releases. If you still have problems, check out my blog post about wiping and reinstalling node & npm fresh:
 
+[http://whobrokethebuild.me/fixing-broken-node-install-windows/](http://whobrokethebuild.me/fixing-broken-node-install-windows/)
 

bin/contentful-export-import.js

@@ -0,0 +1,75 @@
+// Imports
+var prompt = require('prompt');
+var spaceExport = require('contentful-export');
+var spaceImport = require('contentful-import');
+var updateJson = require('update-json');
+
+// Contentful Export & Import Options
+var options = {
+  spaceId: 'hpty8kufn7nl',
+  managementToken: '6df4dff3fe45d44c7081be038af56a91ff8e9490c69c7649701fcf28eeb547e4',
+  saveFile: false,
+  maxAllowedItems: 100
+}
+
+// Package JSON relative path.
+var filePath = './package.json';
+
+// Contentful options parameter definitions.
+var schema = {
+  properties: {
+    // Contentful Space ID
+    spaceId: {
+      required: true
+    },
+    // Contentful Token
+    managementToken: {
+      required: true
+    }
+  }
+};
+
+// Configuration data that we'll inject into package.json
+var data = { 
+  config: {
+    contentfulConfigurations: {
+      spaceId: options.spaceId,
+      managementToken: options.managementToken
+    }
+  }
+}
+
+
+prompt.start();
+console.log("Starting the Contentful Export & Import Process..");
+console.log("Please enter your Contentful Space ID & Management Token.");
+console.log("You can find those values in Contentful under your space.");
+console.log("---------------------------------------------------------");
+
+// Get two properties from the user: username and email 
+prompt.get(schema, function (err, result) {
+  spaceExport(options)
+    .then((output) => {
+
+      // Update the options with the output JSON from the export and the user input spaceId & management token.
+      options.content = output;
+      options.spaceId = result.spaceId;
+      options.managementToken = result.managementToken;
+
+      spaceImport(options)
+        .then((output) => {
+          console.log('Data Imported successfully');
+          updateJson(filePath, data, function (error) {
+            if (error) {
+              console.log("An error occurred updating package.json: " + err);
+            }
+          });
+        })
+        .catch((err) => {
+          console.log('Something went wrong with the import: ', err)
+        })
+    })
+    .catch((err) => {
+      console.log('Uh oh! Something went wrong:', err)
+    })
+});

gulpfile.js

@@ -11,8 +11,10 @@ var gulp = require("gulp"),
 	minifyHtml = require("gulp-minify-html"),
 	replace = require("gulp-replace"),
 	run = require("gulp-run"),
-	connect = require("gulp-connect");
-	sass = require('gulp-sass');
+	connect = require("gulp-connect"),
+	sass = require('gulp-sass'),
+	gulpNgConfig = require('gulp-ng-config');
+
 
 var pkg = require("./package.json"),
 	cssFile = "index.css", // CSS page name
@@ -28,7 +30,7 @@ var banner = [ "/* " + pkg.name + " v" + pkg.version + " " + dateformat(new Date
 	},
 	ngModule = pkg.name;
 
-gulp.task("build", sync.sync([ ["css", "js", "tmpl", "bower.json"], 
+gulp.task("build", sync.sync([ ["css", "js", "tmpl", "bower.json", "generateConfig"], 
 	pages.map(function(page) { return page + ".dev.html"; }), // Build page sources
 	pages.map(function(page) { return page + ".html"; }) // Build release pages
 ]));
@@ -72,20 +74,22 @@ gulp.task("tmpl", function(done) {
 
 // Watch the files for changes
 gulp.task("watch", function() { ["tmpl", "css", "js"]
-		.concat(pages.map(function(page) { return page + ".dev.html"; }))
-		.forEach(function(i) {
-			gulp.watch(paths[i], function(i) {
-				return function() {
-					gulp.src(paths['css'])
-						.pipe(sass())
-						.pipe(concat(cssFile))
-						.pipe(gulp.dest(root+"/src/"));
-						
-					gulp.src(paths[i])
-						.pipe(connect.reload());
-				};
-			}(i));
-		});
+	.concat(pages.map(function(page) { return page + ".dev.html"; }))
+	.forEach(function(i) {
+		gulp.watch(paths[i], function(i) {
+			return function() {
+				gulp.src(paths['css'])
+					.pipe(sass())
+					.pipe(concat(cssFile))
+					.pipe(gulp.dest(root+"/src/"));
+					
+				gulp.src(paths[i])
+					.pipe(connect.reload());
+			};
+		}(i));
+	});
+
+	// Start LiveReload
 	connect.server({
 		root: root,
 		port: 9000,
@@ -100,6 +104,15 @@ gulp.task("bower.json", function(done) {
 		.on("end", done);
 });
 
+gulp.task('generate-config', function () {
+	gulp.src('package.json')
+	.pipe(gulpNgConfig('contentfulConfig', { environment: 'config.contentfulConfigurations' }))
+	.pipe(concat('contentful-config.js'))
+	.pipe(gulp.dest('src/config/'));
+});
+
+
+
 gulp.task("update-npm", function(done) {
 	var cmd = "sh -c './node_modules/npm-check-updates/bin/npm-check-updates -u'";
 	run(cmd).exec().on("end", done);