Frontity Template

This template provides a convenient way for you to quickly and easily spin up a Frontity project on either CodeSandbox or StackBlitz.

CodeSandbox

CodeSandbox is a great prototyping tool that you can use to bootstrap a project. You can use this template to create a new Frontity project on CodeSandbox, or if you already have a Frontity project on GitHub you can use that on CodeSandbox too. Instructions for doing both follow.

Using this template for a new project

• Click on this link: https://githubbox.com/frontity/frontity-template (use CTRL/CMD + click to open in a new tab).

• Wait until the Frontity application starts (it could take a few seconds).

• Click on "Fork" to make your own copy.

  

• Make any changes you wish to customise the project.

Using your own project

• Copy the URL of your GitHub repository.

  

• Rename the domain from github.com to githubbox.com.

  

• Enter the new URL in the browser's address bar and press 'Enter'.

• Wait until the Frontity application starts (it could take a few seconds).

• Click on "Fork" to make your own copy (see above).

• Make any changes you wish to further customise the project.

StackBlitz

StackBlitz is an online IDE where you can create projects with just one click. It automatically takes care of installing dependencies, compiling, bundling, and hot reloading as you type.

You can use this template to create a new Frontity project on StackBlitz, or if you already have a Frontity project on GitHub you can use that on StackBlitz too. Instructions for doing both follow.

Using this template for a new project

• Click on this link: https://stackblitz.com/fork/frontity (use CTRL/CMD + click to open in a new tab).

• Wait until the command prompt appears.

  

• Run npm install.

  

• Run npx frontity dev to start Frontity (it could take a few seconds).

  

• Make any changes you wish to customise the project.

Using your own project

• Add the following to your package.json:

  {
    "workspaces": ["packages/*"]
  }

  This is necessary until they add support for file:/packages... syntax (related GH issue).

• Commit the change (and if necessary push to GitHub).

• Go to https://stackblitz.com/

• Create a new "Node.js" project.

  

• Click on "Connect repository"

  

• Click on "Import an existing repository"

  

• Enter the URL of your repository. For example: https://github.com/frontity/frontity-template (you may need to authenticate your GitHub account at this point).

  

• Once the project is ready delete the package-lock.json file (if it exists).

  

• Run npm install in the terminal box

  

• A new package-lock.json file will be created

  

• Start Frontity by running npx frontity dev in the terminal box (it could take a few seconds).

  

---

Frontity Community

Channels

Frontity has a number of different channels at your disposal where you can find out more information about the project, join in discussions about it, and also get involved:

• 📖 Docs: Frontity's primary documentation resource - this is the place to learn how to build amazing sites with Frontity.

• 👨‍👩‍👧‍👦 Community forum: join Frontity's forum and ask questions, share your knowledge, give feedback and meet other cool Frontity people. We'd love to know about what you're building with Frontity, so please do swing by the forum and tell us about your projects.
• 🐞 Contribute: Frontity uses GitHub for bugs and pull requests. Check out the Contributing section to find out how you can help develop Frontity, or improve this documentation.
• 🗣 Social media: interact with other Frontity users. Reach out to the Frontity team on Twitter. Mention us in your tweets about Frontity and what you're building by using @frontity.
• 💌 Newsletter: do you want to receive the latest news about Frontity and find out as soon as there's an update to the framework? Subscribe to our newsletter.

Get involved

Got questions or feedback about Frontity? We'd love to hear from you in our community forum.

Frontity also welcomes contributions. There are many ways to support the project! If you don't know where to start then this guide might help: How to contribute?.

If you would like to start contributing to the code please open a pull request to address one of our good first issues.