Automated the export & import of the sample models / content

.gitignore

@@ -8,3 +8,4 @@
 /lib/**/Gruntfile*
 /lib/**/Makefile*
 *.tmp.js
+.vscode

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,44 @@ 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, delivery and management API keys from Contentful. If you haven't registered for a account [head over to Contentful](https://www.contentful.com/sign-up/#dev) and get started.
+
+The three pieces of info you need from Contentful:
+
+* Space ID : the identifier of your space which is your personal collection of models & content
+* Management API token : content management tokens
+* Personal access token : content delivery tokens
+
+Read more about the [authentication tokens on Contentful](https://www.contentful.com/developers/docs/references/authentication/).
+
+
 ```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.
+
+Starting the Contentful Export & Import Process..
+Please enter your Contentful Space ID and your Content Delivery / Management Tokens.
+You can find those values in Contentful under your space.
+
+prompt: spaceId:  your-space-id
+prompt: accessToken:  your-content-delivery-access-token
+prompt: managementToken:  22 your-content-management-token
+
+# The models & content are then exported from the sample space and uploaded into the space you created.
+
 ```
 
-### 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 +114,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 +146,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,94 @@
+/**
+ * Node.js script which exports the 'Sample' Contentful space and uploads it into the users specified space.
+ * @author Josh Hebb
+ */
+
+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',
+  accessToken: '',
+  managementToken: 'CFPAT-faf804d0d0abc11ef6c5844ef15ffbf8f467a3236ccccd5a3b7af618f0fc3ad2',
+  saveFile: false,
+  maxAllowedItems: 100
+}
+
+// Package JSON relative path.
+var filePath = './package.json';
+
+// Contentful options parameter definitions.
+var schema = {
+  properties: {
+    // Your personal Space ID
+    spaceId: {
+      required: true
+    },
+    // Content Delivery Access Token
+    accessToken: {
+      required: true
+    },
+    // Content Management Token
+    managementToken: {
+      required: true
+    }
+  }
+};
+
+// Configuration data that we'll inject into package.json
+var data = { 
+  config: {
+    contentfulConfigurations: {
+      spaceId: '',
+      accessToken: '',
+      managementToken: ''
+    }
+  }
+}
+
+
+prompt.start();
+console.log("Starting the Contentful Export & Import Process..");
+console.log("Please enter your Contentful Space ID and your Content Delivery / Management Tokens.");
+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.accessToken = result.accessToken;
+      options.managementToken = result.managementToken;
+
+      // Import the Space and pass the input into update JSON to update the package.json configs.
+      spaceImport(options)
+        .then((output) => {
+          console.log('Data Imported successfully');
+
+          // Set the JSON values entered by the user to update package.json
+          data.config.contentfulConfigurations.spaceId = options.spaceId;
+          data.config.contentfulConfigurations.accessToken = options.accessToken;
+          data.config.contentfulConfigurations.managementToken = options.managementToken;
+
+          // Update package.json
+          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", "generate-config"], 
 	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,18 @@ gulp.task("bower.json", function(done) {
 		.on("end", done);
 });
 
+// Generate contentful-config.js from package.json configurations for use in angularJS.
+gulp.task('generate-config', function () {
+	gulp.src('package.json')
+	.pipe(gulpNgConfig('angular-contentful-starter', { 
+		environment: 'config.contentfulConfigurations',
+		createModule: false 
+	}))
+	.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);

index.dev.html

@@ -35,18 +35,14 @@
 	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYUxfnjxus1rXx-ntGcxqWD1BPRZrI1IM" type="text/javascript"></script>
 
 	<!-- build:js public/index.min.js -->
+
+	<!-- AngularJS -->
 	<script src="lib/angular/angular.js"></script>
-	<script src="src/config/app.js"></script>
-	<script src="src/directives/carousel.js"></script>
-	<script src="src/directives/navigation.js"></script>
-	<script src="src/directives/footer.js"></script>
-	<script src="src/directives/featured-products.js"></script>
-	<script src="src/config/route.js"></script>
 
 	<!-- Core Angular Libraries -->
+	<script src="lib/angular-contentful/dist/angular-contentful.js"></script>
 	<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
-	<script src="lib/angular-contentful/dist/angular-contentful.min.js"></script>
-
+
 	<!-- Angular Maps Library -->
 	<script src="lib/ngmap/build/scripts/ng-map.min.js"></script>
 
@@ -55,6 +51,15 @@
 	<script src="lib/marked/lib/marked.js"></script>
 	<script src="lib/angular-marked/dist/angular-marked.js"></script>
 
+	<!-- Custom App Files -->
+	<script src="src/app.js"></script>
+	<script src="src/shared/carousel/carousel.js"></script>
+	<script src="src/shared/navigation/navigation.js"></script>
+	<script src="src/shared/footer/footer.js"></script>
+	<script src="src/shared/featured-products/featured-products.js"></script>
+	<script src="src/config/contentful-config.js"></script>
+	<script src="src/route.js"></script>
+
 	<!-- Bootstrap Scripts -->
 	<script src="lib/jquery/dist/jquery.min.js"></script>
 	<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>