Skip to content

This repository contains all the codes discussed in CSS-Tricks article on ...

Notifications You must be signed in to change notification settings

tinjure20/frontity-csstricks-demo

Repository files navigation

A Demo Frontity Starter Theme for CSS-Tricks Article

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.

image

You can find all the codes under package/labre-theme folder.

Install this project locally

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.

Launch a development server

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.

Other helpful resources from Frontity

Have a look at our Quick Start Guide

Table of Contents

Create your custom theme

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

Create a production-ready build

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

Deploy

With the files generated in the build you can deploy your project

As a node app

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

As a serverless service

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


» Frontity Channels 🌎

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

» Get involved 🤗

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?

About

This repository contains all the codes discussed in CSS-Tricks article on ...

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published