or ... a "Netlify Contentful React Static Site example"
This project is based on create-react-app.
- an automatic content model setup for a quick-start in Contentful
- dynamic rendering and usage of the Contentful Preview API for easier content preview in development
- static builds for better user experience using react-snap
- deploys and CI-flow in Netlify
Contentful – your Content Infrastructure
Contentful’s content infrastructure is a set of APIs to read, write and preview your data combined with developer friendly CLI tools and an extensible web application to provide a smooth editorial experience. This set of APIs makes it a perfect fit for modern static site generators that are able to consume API data easily.
Netlify – your CI service and hoster
Netlify allows you to develop and host your Contenful sites without needing a webserver. Netlify is a global application delivery network that pairs perfectly with the Contentful APIs. Build templates with your favorite site generator, manage the content in Contentful, and allow Netlify automatically build and distribute your site each time there's an update. Since there are no servers, sites are performant, maintenance free, and secure.
This project can be used without files on any computer simply by configuring Contentful and Netlify. The tutorial is included in the project itself. Go there and have a look in case you have any questions
$ git clone git@github.com:stefanjudis/today-i-learned.git
$ cd today-i-learned
$ npm i
$ mv .env.sample .env
Edit the .env to include Contentful credentials of the space you created for the initial flow.
REACT_APP_CTF_SPACE=...
REACT_APP_CTF_CDA_TOKEN=...
REACT_APP_CTF_CPA_TOKEN=...
npm start will start a new development server with hot reloading. The cool thing about this command is that the React applications knows that you are in development and uses the Content Preview API. This means, that you will see unpublished and updated data in development which is great to evaluate content changes.
npm run build generates a production read bundle including all the CSS and JavaScript and also uses react-snap to generate static HTML files for every route it can find. This way you don't have to show a loading spinner when you users load the site but rather show the rendered HTML already.