Skip to content

Commit adaf565

Browse files
author
Josh Hebb
authored
Merge pull request #2 from joshhebb/development
Automated the export & import of the sample models / content
2 parents 3d1bd69 + 4e54207 commit adaf565

25 files changed

+4401
-883
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@
88
/lib/**/Gruntfile*
99
/lib/**/Makefile*
1010
*.tmp.js
11+
.vscode

‎README.md

+53-8
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
The project is a quick starter for AngularJS applications consuming content from Contentful, a content as a service provider.
44

5+
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.
6+
7+
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.
8+
59
<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" />
610

711

@@ -33,22 +37,44 @@ and npm is simply a node package which is a package manage in itself. It allows
3337

3438
Just [fork](https://github.com/joshhebb/angularjs-contentful-starter) or pull down the repository and run the following commands.
3539

40+
**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.
41+
42+
The three pieces of info you need from Contentful:
43+
44+
* Space ID : the identifier of your space which is your personal collection of models & content
45+
* Management API token : content management tokens
46+
* Personal access token : content delivery tokens
47+
48+
Read more about the [authentication tokens on Contentful](https://www.contentful.com/developers/docs/references/authentication/).
49+
50+
3651
```shell
3752
git clone https://github.com/joshhebb/angularjs-contentful-starter.git your-project-name-here
3853
cd your-project-name-here
39-
npm install -g gulp # Install Gulp (global)
40-
npm install -g bower # Install Bower (global)
41-
npm run init # Run init task to install the node modules, libraries and then call gulp to build the app
54+
npm install -g gulp # Install Gulp (global)
55+
npm install -g bower # Install Bower (global)
56+
npm run init # Run init task to install the node modules, libraries and then call gulp to build the app.
57+
58+
Starting the Contentful Export & Import Process..
59+
Please enter your Contentful Space ID and your Content Delivery / Management Tokens.
60+
You can find those values in Contentful under your space.
61+
62+
prompt: spaceId: your-space-id
63+
prompt: accessToken: your-content-delivery-access-token
64+
prompt: managementToken: 22 your-content-management-token
65+
66+
# The models & content are then exported from the sample space and uploaded into the space you created.
67+
4268
```
4369

44-
### Contentful Integration
70+
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!
4571

46-
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.
4772

48-
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.
73+
### Contentful Integration
4974

50-
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.
75+
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.
5176

77+
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.
5278

5379
### Gulp Tasks
5480

@@ -94,7 +120,6 @@ Some things to know:
94120
<img src="http://whobrokethebuild.me/wp-content/uploads/images/angular-contentful-starter.gif" />
95121

96122

97-
98123
### Adding AngularJS Libraries
99124

100125
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.
@@ -127,5 +152,25 @@ If you remove a library:
127152
* Remove any references in the application or in index.dev.html
128153

129154

155+
### Common Setup Problems
156+
157+
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.
158+
159+
* Delete node_modules in project
160+
* run 'npm cache clean'
161+
* run 'npm install'
162+
163+
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:
164+
165+
```shell
166+
# Check the node version
167+
node -v
168+
169+
# Check the npm version
170+
npm -v
171+
```
172+
173+
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:
130174

175+
[http://whobrokethebuild.me/fixing-broken-node-install-windows/](http://whobrokethebuild.me/fixing-broken-node-install-windows/)
131176

‎bin/contentful-export-import.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/**
2+
* Node.js script which exports the 'Sample' Contentful space and uploads it into the users specified space.
3+
* @author Josh Hebb
4+
*/
5+
6+
var prompt = require('prompt');
7+
var spaceExport = require('contentful-export');
8+
var spaceImport = require('contentful-import');
9+
var updateJson = require('update-json');
10+
11+
// Contentful Export & Import Options
12+
var options = {
13+
spaceId: 'hpty8kufn7nl',
14+
accessToken: '',
15+
managementToken: 'CFPAT-faf804d0d0abc11ef6c5844ef15ffbf8f467a3236ccccd5a3b7af618f0fc3ad2',
16+
saveFile: false,
17+
maxAllowedItems: 100
18+
}
19+
20+
// Package JSON relative path.
21+
var filePath = './package.json';
22+
23+
// Contentful options parameter definitions.
24+
var schema = {
25+
properties: {
26+
// Your personal Space ID
27+
spaceId: {
28+
required: true
29+
},
30+
// Content Delivery Access Token
31+
accessToken: {
32+
required: true
33+
},
34+
// Content Management Token
35+
managementToken: {
36+
required: true
37+
}
38+
}
39+
};
40+
41+
// Configuration data that we'll inject into package.json
42+
var data = {
43+
config: {
44+
contentfulConfigurations: {
45+
spaceId: '',
46+
accessToken: '',
47+
managementToken: ''
48+
}
49+
}
50+
}
51+
52+
53+
prompt.start();
54+
console.log("Starting the Contentful Export & Import Process..");
55+
console.log("Please enter your Contentful Space ID and your Content Delivery / Management Tokens.");
56+
console.log("You can find those values in Contentful under your space.");
57+
console.log("---------------------------------------------------------");
58+
59+
// Get two properties from the user: username and email
60+
prompt.get(schema, function (err, result) {
61+
spaceExport(options)
62+
.then((output) => {
63+
64+
// Update the options with the output JSON from the export and the user input spaceId & management token.
65+
options.content = output;
66+
options.spaceId = result.spaceId;
67+
options.accessToken = result.accessToken;
68+
options.managementToken = result.managementToken;
69+
70+
// Import the Space and pass the input into update JSON to update the package.json configs.
71+
spaceImport(options)
72+
.then((output) => {
73+
console.log('Data Imported successfully');
74+
75+
// Set the JSON values entered by the user to update package.json
76+
data.config.contentfulConfigurations.spaceId = options.spaceId;
77+
data.config.contentfulConfigurations.accessToken = options.accessToken;
78+
data.config.contentfulConfigurations.managementToken = options.managementToken;
79+
80+
// Update package.json
81+
updateJson(filePath, data, function (error) {
82+
if (error) {
83+
console.log("An error occurred updating package.json: " + err);
84+
}
85+
});
86+
})
87+
.catch((err) => {
88+
console.log('Something went wrong with the import: ', err)
89+
})
90+
})
91+
.catch((err) => {
92+
console.log('Uh oh! Something went wrong: ', err)
93+
})
94+
});

‎gulpfile.js

+33-17
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ var gulp = require("gulp"),
1111
minifyHtml = require("gulp-minify-html"),
1212
replace = require("gulp-replace"),
1313
run = require("gulp-run"),
14-
connect = require("gulp-connect");
15-
sass = require('gulp-sass');
14+
connect = require("gulp-connect"),
15+
sass = require('gulp-sass'),
16+
gulpNgConfig = require('gulp-ng-config');
17+
1618

1719
var pkg = require("./package.json"),
1820
cssFile = "index.css", // CSS page name
@@ -28,7 +30,7 @@ var banner = [ "/* " + pkg.name + " v" + pkg.version + " " + dateformat(new Date
2830
},
2931
ngModule = pkg.name;
3032

31-
gulp.task("build", sync.sync([ ["css", "js", "tmpl", "bower.json"],
33+
gulp.task("build", sync.sync([ ["css", "js", "tmpl", "bower.json", "generate-config"],
3234
pages.map(function(page) { return page + ".dev.html"; }), // Build page sources
3335
pages.map(function(page) { return page + ".html"; }) // Build release pages
3436
]));
@@ -72,20 +74,22 @@ gulp.task("tmpl", function(done) {
7274

7375
// Watch the files for changes
7476
gulp.task("watch", function() { ["tmpl", "css", "js"]
75-
.concat(pages.map(function(page) { return page + ".dev.html"; }))
76-
.forEach(function(i) {
77-
gulp.watch(paths[i], function(i) {
78-
return function() {
79-
gulp.src(paths['css'])
80-
.pipe(sass())
81-
.pipe(concat(cssFile))
82-
.pipe(gulp.dest(root+"/src/"));
83-
84-
gulp.src(paths[i])
85-
.pipe(connect.reload());
86-
};
87-
}(i));
88-
});
77+
.concat(pages.map(function(page) { return page + ".dev.html"; }))
78+
.forEach(function(i) {
79+
gulp.watch(paths[i], function(i) {
80+
return function() {
81+
gulp.src(paths['css'])
82+
.pipe(sass())
83+
.pipe(concat(cssFile))
84+
.pipe(gulp.dest(root+"/src/"));
85+
86+
gulp.src(paths[i])
87+
.pipe(connect.reload());
88+
};
89+
}(i));
90+
});
91+
92+
// Start LiveReload
8993
connect.server({
9094
root: root,
9195
port: 9000,
@@ -100,6 +104,18 @@ gulp.task("bower.json", function(done) {
100104
.on("end", done);
101105
});
102106

107+
// Generate contentful-config.js from package.json configurations for use in angularJS.
108+
gulp.task('generate-config', function () {
109+
gulp.src('package.json')
110+
.pipe(gulpNgConfig('angular-contentful-starter', {
111+
environment: 'config.contentfulConfigurations',
112+
createModule: false
113+
}))
114+
.pipe(concat('contentful-config.js'))
115+
.pipe(gulp.dest('src/config/'));
116+
});
117+
118+
103119
gulp.task("update-npm", function(done) {
104120
var cmd = "sh -c './node_modules/npm-check-updates/bin/npm-check-updates -u'";
105121
run(cmd).exec().on("end", done);

‎index.dev.html

+13-8
Original file line numberDiff line numberDiff line change
@@ -35,18 +35,14 @@
3535
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYUxfnjxus1rXx-ntGcxqWD1BPRZrI1IM" type="text/javascript"></script>
3636

3737
<!-- build:js public/index.min.js -->
38+
39+
<!-- AngularJS -->
3840
<script src="lib/angular/angular.js"></script>
39-
<script src="src/config/app.js"></script>
40-
<script src="src/directives/carousel.js"></script>
41-
<script src="src/directives/navigation.js"></script>
42-
<script src="src/directives/footer.js"></script>
43-
<script src="src/directives/featured-products.js"></script>
44-
<script src="src/config/route.js"></script>
4541

4642
<!-- Core Angular Libraries -->
43+
<script src="lib/angular-contentful/dist/angular-contentful.js"></script>
4744
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
48-
<script src="lib/angular-contentful/dist/angular-contentful.min.js"></script>
49-
45+
5046
<!-- Angular Maps Library -->
5147
<script src="lib/ngmap/build/scripts/ng-map.min.js"></script>
5248

@@ -55,6 +51,15 @@
5551
<script src="lib/marked/lib/marked.js"></script>
5652
<script src="lib/angular-marked/dist/angular-marked.js"></script>
5753

54+
<!-- Custom App Files -->
55+
<script src="src/app.js"></script>
56+
<script src="src/shared/carousel/carousel.js"></script>
57+
<script src="src/shared/navigation/navigation.js"></script>
58+
<script src="src/shared/footer/footer.js"></script>
59+
<script src="src/shared/featured-products/featured-products.js"></script>
60+
<script src="src/config/contentful-config.js"></script>
61+
<script src="src/route.js"></script>
62+
5863
<!-- Bootstrap Scripts -->
5964
<script src="lib/jquery/dist/jquery.min.js"></script>
6065
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>

0 commit comments

Comments
 (0)