Rocket works with one input folder for all your pages that defaults to
pages there is a
public folder that will be copied as is to the output folder.
All other files like
data, ... can be placed anywhere in your project.
Rocket will ONLY generate html files into your output folder.
The generated html files will reference the source files directly.
<img src="./me.png" alt="Picture of me" /> <!-- will become --> <img src="../../path/to/me.png" alt="Picture of me" />
Recommended Project Structure
Even if there is no enforced project structure it still makes sense to follow some common best practices.
site/pages/*- All the pages of your website (e.g. all
site/pages/about/_assets/*- Keep assets related to pages close to the page itself (e.g. images, videos, ...)
site/public- Non-code assets that need to be copied as is (favicon, robots.txt, server config, ...)
site/src/*- Your project source code (components, layouts, ...)
package.json- A project manifest.
The easiest way to set up your new project is with
npx @rocket/create@latest. Check out our Getting started for more details.
Most projects come with a structure similar to this.
. . ├── config │ └── rocket.config.js ├── site │ ├── pages │ │ ├── about │ │ │ ├── _assets │ │ │ │ └── liftoff-flames.jpg │ │ │ ├── index.rocket.html │ │ │ └── me.rocket.md │ │ ├── index.rocket.js │ │ ├── pageTreeData.rocketGenerated.json │ │ └── recursive.data.js │ ├── public │ │ └── robots.txt │ └── src │ ├── components │ ├── layouts │ ├── parts │ └── styles └── package.json
Pages contain all pages (
.rocket.js is supported) for your website. It is required that you put your pages in this directory.
The src folder is where most of your project source code lives. This includes:
Rocket has complete control over how these files get processed, optimized, and bundled in your final site build. Some files (like only server rendered components) never make it to the browser directly and are instead rendered to HTML. Other files (like CSS) are sent to the browser but may be bundled with other CSS files depending on how your site uses them.
Components are web standard custom elements which are reusable units of UI for your HTML pages. It is recommended (but not required) that you put your components in this directory. How you organize them within this directory is up to you.
Layouts are reusable components for HTML page layouts. It is recommended (but not required) that you put your layout components in this directory. How you organize them within this directory is up to you.
For most users, the majority of your files will live inside of the
site/src/ directory so that Rocket can optimize them in your final build. By contrast, the
site/public/ directory is the place for any files to live outside of the Rocket build process.
If you put a file into the public folder, it will not be processed by Rocket. Instead it will be copied into the build folder untouched. This can be useful for specific files like
site.webmanifest or sometimes for assets like images that you need in a specific location.