Skip to content
/ create-page-starter Public template

⚛️ Page starter for static pages which may use typescript React, all in one build handling, 1-click deployment with netlify cms and styled with @formanta/sass.

License

Notifications You must be signed in to change notification settings

bemit/create-page-starter

Repository files navigation

Create Page Starter ⚛️

Netlify Status PRs Welcome

Starting point for static pages generated with create-amp-page and using @formanta/sass for styling - but for PWA enhanced web pages and not AMP. Directly deploy with netlify cms as git managed static site generator!

Deploy to Netlify Run on CodeSandbox

npm i
npm start

# or
npm run build

npm run tasks
npm run clean

npm run test
# test driven UI development (with cypress):
npm run tdd-ui
# test driven JS development (with jest):
npm run tdd-js

Open localhost:4489/defaultPage for your local page preview and change something in src/*!

Features

File Structure

Netlify CMS

Component Library

License

Features

Provides a basic file structure and uses the gulp build tasks of create-amp-page, with additionally: markdown and netlify cms.

Has the same basic features as create-amp-page, check the list there.

Additionally, this starter has babel and webpack configured for Typescript and React.

Universal Twig functions, used within templates, are included in create-amp-page, check out the function docs

Default File Structure

  • .env for configuration of env vars
    • need to be prefixed with either REACT_APP_ or WEB_APP_ to be available in javascript
  • build dist folder after running npm run build or while npm run start
    • each page will be saved in a folder, standard: build/defaultPage
    • media files are saved in build/media
  • public with general files in root like manifest.json
  • public/admin config and setup files for netlify cms
  • src/api may be used as mock api
  • src/data contains the page frontmatter and data
  • src/html is the base for all twig templates
  • src/html/pages will be build to individual HTML pages
  • src/media may contain images
  • src/styles/main.scss is the style sheet
  • twigLogic/* extra twig functions, reloaded on every build

Files to Adjust

  • Gulpfile.js needs e.g. domain of production environment and a bit of other stuff
  • .env just needs to exist, take a look at .env.example for available env vars
  • public/ needs all icons, like favicon etc.
  • public/manifest.json needs some proper namings and colors
  • public/offline.html needs some proper namings and email address
  • src/js/sw.js maybe needs a new cache key and "pages to cache" configuration

Netlify CMS

Uses the same setup as create-amp-page, check the Netlify CMS docs there.

Twig Embed Image

Displays an img or amp-img tag using ampEnabled, layout defaults to 'responsive'. Set's width and height using getImage fn, adds sha1 cachebuster.

todo: srcset and image resizing support

{% embed 'blocks/image.twig' with {
    src: '/media/img-01.png',
    alt: 'A blog hero image',
    classes: 'mb2',
    layout: 'responsive',
} %}
{% endembed %}

React Static

Render your React directly at the build process, clean and rich HTML for SEO and client side speedup!

very very alpha: it works, but features need optimizing / coworking-with-twig, like: resizing used images

template structure must be adjusted before using snap, as every dynamic thing must be rendered with react and not through twig or react-snap uses a different twig template for each page (seems to be hard)

Uses react-snap for "server side react rendering" and fixing react-snap#493 through the custom /copy.js, adding the HTML cleaning and optimizing tasks again.

First install react-snap: npm i --save react-snap

Commands:

# use `snap-build` now instead of `build`
npm run snap-build

License

This project is free software distributed under the MIT License.

See: LICENSE.

Contributors

By committing your code/creating a pull request to this repository you agree to release the code under the MIT License attached to the repository.

Copyright

2022 | Michael Becker, bemit UG (haftungsbeschränkt)

About

⚛️ Page starter for static pages which may use typescript React, all in one build handling, 1-click deployment with netlify cms and styled with @formanta/sass.

Topics

Resources

License

Stars

Watchers

Forks