🎸 Ready-to-rock Preact starter project, powered by webpack.
🚀 If you're starting a new project using Preact, you've come to the right place. Below is a step-by-step guide that takes you straight from downloading this boilerplate to production.
1. Clone this repo:
git clone git@github.com:developit/preact-boilerplate.git my-app
cd my-app2. 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 installYou're done installing! Now let's get started developing.
4. Start a live-reload development server:
PORT=8080 npm run devThis is a full web server nicely suited to your project. Any time you make changes within the
srcdirectory, it will rebuild and even refresh your browser.
5. Generate a production build in ./build:
npm run buildYou can now deploy the contents of the build directory to production!
Example: deploy to surge.sh:
surge ./build -d my-app.surge.sh
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>MIT