Static site generator + development server for Contentful data in Node.js.
npm install contentful-express -g
mkdir my-projectcd my-projectcontentful-express init
When using the default client-side application scaffold, you can start the project using bin scripts. This boots the dev server and runs webpack.
config.js file is your settings file for this tool. It's set to work out of the box with all the defaults. Make sure you add your contentful
space ID and
accessToken to it.
contentful:space: spaceIdaccessToken: accessToken
All settings in this file can be changed.
This tool maps your Contentful
contentTypes to a node dev server and a static site builder. How does that work?
If you have a contentType called
Artist with an id of
artist you get the following routes:
The first one is a listing of all
entries for the contentType. The second one is a single
entry post by
No data from Contentful is altered in any way before passing it to your templates. The one modification is the addition of a property on an
static. This makes an
Entry look like this:
sys: objectfields: objectstatic:url: string
The addition of the static url is so you can create links in your templates to your entry details. Since the
urls config option is available, this static url is correctly normalized for you and honored for the server and the static build.
Obviously you may not want your URLs to use the
:id field for an entry detail template. That's ok. You can specify a field(s) to process as an entry slug. The value must be a regular expression.
Your templates are generated in a similar way to how the routes are mapped. For each
contentType you get an
entry.html and an
entries.html template. So, for
Artist you get the following:
The default template language is ejs. This tool uses consolidate so you can use any of the supported languages there. You need to provide the template engine you wish to use. Say you would like to use mustache. You would do the following:
Install mustache as a local dependency for your project.
npm install mustache --save-dev
Provide the mustache ref to consolidate through
The following data context is exposed to all templates. The caveat being that
entries are contextual to whether you are looking at a contentType list of entries or a single entry by contentType.
space: objectstatic: objectstaticPages: arraycontentTypes: array// Exposed to entry.htmlentry?: object// Exposed to entries.htmlentries?: array
Most likely you'll not want all of your contentTypes to have a routing map. You can use the
ignore field in
config.js to specify an array of contentTypes to omit from routing and templating.
You can specify data mapping to contentType routes and static page routes using the
mapping option in
mapping:// Map set of contentTypes to homepage, "/"// This will include all entries for all contentTypes mapped"index":"artist""category"// Map a single entry to a static page, "/about/"// This will include the single entry that is mapped by contentType"about":// The contentType"type": "page"// How to match an entry by a field value"entry":"field": "name""value": "About"
A scaffold is generated for you in the directory you call
prismic-express init within. This starts your templates for the dev server and site generator.
If you don't want to use ProperJS/App, simply trash it and start from scratch or use some other boilerplate you prefer.
.html file created in the templates root directory will be generated into a static page with no context data from Contentful. So,
/about/ as an active route. By default the
index.html template is reserved as the homepage.
git checkout -b my-new-feature)
git commit -am 'Add some feature')
git push origin my-new-feature)