The sitepack-react-starter-kit contains a simple React-based project that is built with Sitepack. To try it out:
git clone https://github.com/jamesknelson/sitepack-react-starter-kit.gitcd sitepack-react-starter-kityarn installyarn start
Open up a browser at http://localhost:4000, and you should see "Welcome to Sitepack"!
Here are a few things you can try:
/content/home.mdand saving should automatically reload the page
/source/wrappers/SiteWrapper.jsto change the website's title or navigation
To learn more, you can see the documentation for sitepack-react-starter-kit.
Sitepack configures webpack so that you don't have to. Out of the box, a sitepack app gets:
But Sitepack still gives you the power of Webpack loaders. This gives you options:
.vuefiles for Vue-baed apps
Sitepack treats your entire Site as an object. It also treats each Page as an object. But where do these objects come from?
The easiest way to get a Page object is to just create one. You'd usually do this by exporting it from a
.page.js file within your
content directory. For example, your site's root page may be called
Each Page object contains all of the information that is needed to render that page. This will usually include a
title and some
path will also be added if you don't specify it manually.
In addition to a page's content, it can also specify children. Children are Page objects too. They'll be made available at a URL relative to the Page that includes them. Which brings us to one of the major differences between Sitepack and other static website generators.
Sitepack doesn't attempt to magic your content out of the filesystem and into a website. Instead, Sitepack follows
require() statements, building exactly what you tell it to build. Your Site is a tree of Page objects. That's it.
But how is it that you can
.md file, and you get a
Page object? This is where Page Loaders come in.
Sitepack also gives you a powerful new tool called Page Loaders -- a special type of Webpack Loader that converts a content file into a
If you're not familiar with Webpack, all you need to know about loaders is that they let Sitepack transform the content of a file loaded with
require(). In the case of Page Loaders, content is transformed into a
Page object. For an example, the sitepack-mdx-page-loader package contains a loader that turns Markdown into React components.
But how does Sitepack work this magic? Well, it actually isn't magical at all! You just need to tell Sitepack how to render your application to a string. And this is easier than it might at first sound. But don't take my word for it -- let's look at an example.
React provides a ReactDOMServer.renderToString() function takes a React Element, and returns a string containing the element's HTML.
To use this within Sitepack, just create a
renderToString.js file in the same directory as
sitepack.config.js that looks something like this:
And then create a
main.js file in the same directory that looks something like this:
Sitepack expects your
renderToString.js file's default export to be a function that takes an object containing your
site, and returns a string. And it runs the default export of
main.js as soon as your page loads.
site object contains your application's
Page objects. Your entire site's content is available from here. All you need to do is select that relevant part for the current page and then display it. But how do you know what the current page is? That is where
history comes in.
history object is a
History object from the history package. It contains the URL of the page to render. You can pass this object as-is to react-router or junctions, or you can pass it to a
<Router> element from sitepack-react.
Sitepack gives you the flexibility to use any component you'd like to handle
site. But sometimes you'd just like to focus on your content. And that's what sitepack-react is for; it is a set of Components and tools that you can use to make integrating Sitepack with React a breeze.
But say you actually want to build a static website using React. I'll let you in on a secret. You don't actually need to touch History, Site or Router objects. They're there if need them, but you probably just want to clone sitepack-react-starter-kit and start editing your
content directory. It is really that simple.
Vue also supports rendering to string.