This repository contains all the Frontity package/libre-theme codes that were discussed in CSS-Tricks article Mars Theme: A Deep Look at Frontity’s Headless WordPress Theme.
You can find all the codes under package/labre-theme folder.
You can download the entire project or clone locally by running the following command from your terminal:
git clone https://github.com/tinjure20/frontity-csstricks-demo.git
This will create a directory in the project folder.
Next, change the directory to project folder and run the following command to install npm:
npm install
This will install all the necessary dependencies in the local node_modules folder to run your fronting project.
npx frontity dev
Runs the app in development mode. Open http://localhost:3000 to view it in the browser.
The site will automatically reload if you make changes inside the packages folder. You will see the build errors in the console.
Have a look at our Quick Start Guide
npx frontity create-package your-custom-theme
Use the command npx frontity create-package to create a new package that can be set in your frontity.settings.js as your theme
Have a look at our blog post How to Create a React WordPress Theme in 30 Minutes
npx frontity build
Builds the app for production to the build folder.
This will create a /build folder with a server.js (a serverless function) file and a /static folder with all your javascript files and other assets.
Your app is ready to be deployed.
Get more info about Frontity's architecture
With the files generated in the build you can deploy your project
Use npx frontity serve to run it like a normal Node app.
This command generates (and runs) a small web server that uses the generated server.js and /static to serve your content
Upload your static folder to a CDN and your server.js file to a serverless service, like Now or Netlify.
Get more info about how to deploy a Frontity project
We have different channels at your disposal where you can find information about the project, discuss about it and get involved:
- 📖 Docs: this is the place to learn how to build amazing sites with Frontity.
- 👨👩👧👦 Community: use our forum to ask any questions, feedback and meet great people. This is your place too to share what are you building with Frontity!
- 🐞 GitHub: we use GitHub for bugs and pull requests. Questions are answered in the community forum!
- 🗣 Social media: a more informal place to interact with Frontity users, reach out to us on Twitter.
- 💌 Newsletter: do you want to receive the latest framework updates and news? Subscribe here
Got questions or feedback about Frontity? We'd love to hear from you. Use our community forum yo ! ❤️
Frontity also welcomes contributions. There are many ways to support the project! If you don't know where to start, this guide might help → How to contribute?