THIS WIP IN PROGRESS CURRENTLY!!
I use this project to learn new things (contenta, preact, freactal, styled-components ...)
- 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
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.
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 intocoverage/
.
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
.
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>
💁 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>
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 👍
MIT