Contenta Demo with Preact, Freactal (state mgmt) and Styled Components

Version: 0.2.0

THIS WIP IN PROGRESS CURRENTLY!!

I use this project to learn new things (contenta, preact, freactal, styled-components ...)

The roadmap is as follows:

• integrate with contenta CMS using jsonAPI by leveraging:
  • ✔ freactal as state management
  • ✔ superagent-jsonapi
• modeling the frontend around the recipe-coocking-magazine use-case:
  • ✔ styled-components for CSS style in JS
  • complete frontend as shown in Wireframes
  • create a living styleguide with e.g. react-styleguidist
• Search with e.g. ElasticlunrJS
• implement SSR and refine service worker for offline
• content-editor interface

Quick-Start Guide

• Installation
• Development Workflow
• Structure
• Handling URLS
• React Compatibility

Installation

1. Clone this repo:

git clone --depth 1 https://github.com/pixelmord/contenta_preact.git my-app
cd my-app

2. Make it your own:

rm -rf .git && git init && npm init

ℹ️ This re-initializes the repo and sets up your NPM project.

3. Install the dependencies:

npm install

You're done installing! Now let's get started developing.

Development Workflow

4. Start a live-reload development server:

npm run dev

This is a full web server nicely suited to your project. Any time you make changes within the src directory, it will rebuild and even refresh your browser.

5. Testing with mocha, karma, chai, sinon via phantomjs:

npm test

🌟 This also instruments the code in src/ using isparta, giving you pretty code coverage statistics at the end of your tests! If you want to see detailed coverage information, a full HTML report is placed into coverage/.

6. Generate a production build in ./build:

npm run build

You can now deploy the contents of the build directory to production!

Surge.sh Example: surge ./build -d my-app.surge.sh

Netlify Example: netlify deploy

5. Start local production server with serve:

npm start

This is to simulate a production (CDN) server with gzip. It just serves up the contents of ./build.

---

Structure

Apps are built up from simple units of functionality called Components. A Component is responsible for rendering a small part of an application, given some input data called props, generally passed in as attributes in JSX. A component can be as simple as:

class Link extends Component {
  render({ to, children }) {
    return <a href={ to }>{ children }</a>;
  }
}
// usage:
<Link to="/">Home</Link>

---

Handling URLS

💁 This project contains a basic two-page app with URL routing.

Pages are just regular components that get mounted when you navigate to a certain URL. Any URL parameters get passed to the component as props.

Defining what component(s) to load for a given URL is easy and declarative. You can even mix-and-match URL parameters and normal props.

<Router>
  <A path="/" />
  <B path="/b" id="42" />
  <C path="/c/:id" />
</Router>

---

React Compatibility

This project includes preact-compat alias in as react and react-dom right out-of-the-box. This means you can install and use third-party React components, and they will use Preact automatically! It also means that if you don't install third-party React components, preact-compat doesn't get included in your JavaScript bundle - it's free if you don't use it 👍

---

License

MIT