Giter Site home page Giter Site logo

andyzack / my-craft-demo Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 0.0 54.41 MB

Craft CMS demo site powered by Tailwindcss, gsap.js, swiper.js

Home Page: https://andrewcraft3.frb.io/

Shell 3.02% PHP 10.67% Batchfile 0.48% JavaScript 40.54% SCSS 6.37% HTML 38.92%
craftcms php twig-templates tailwindcss fortrabbit gsap swiperjs

my-craft-demo's Introduction

Craft CMS demo site

This demo site uses fortrabbit, a modern PHP application platform tailored for Craft CMS, with Git deployments and Composer support.

Front end build system: Webpack and Tailwind CSS

Setup Craft CMS on localhost

Clone repo

git clone https://github.com/andyzack/my-craft-demo.git`

Install Craft CMS locally

composer install

Create MAMP project

  • define document root to the sub-folder 'web'
  • define database as mentioned in .env.example
  • with PHP version mentioned in composer.json
  • base url like it is defined in .env.dev
  • Copy .env.dev to create .env file
  • Change the database credentials (if needed)

http://my-craft-demo.test/admin

Admin panel

After the above steps, you should be able to login to the admin panel locally http://my-craft-demo.test/admin

Configure Craft CMS on fortrabbit

For full instruction see craft-3-setup

Security Key Update

Copy over security key from .env (hidden file) from the root folder of your project and paste it in the App's ENV vars settings in the Dashboard

SECURITY_KEY=[REPLACE WITH YOUR HASH KEY]

General Configuration Settings Update

This change is already included in config/general.php as instructed in this section

Database synchronization

Import/Export Database

  • Extract copy of MySQL db (my_craft_demo_2021-01-03.sql.zip) available in the root folder and upload in your project
  • Export local database along with any changes you made and import it to the fortrabbit remote. Follow the guidelines Using MySQL Workbench (GUI)

Restart your app

Front End Dependencies

  • Node
  • NPM
  • ES6
  • Webpack

npm install

Compiles and hot-reloads for development

npm run hot

Compiles and minifies for production

npm run build

Webpack

Webpack is a task/build runner for development. We use it to compile Sass, and JavaScript, minify CSS, uglify and compress JavaScript and much more.

Tailwind

A utility-first CSS framework for rapidly building custom user interfaces. For full documentation, visit tailwindcss.com

References:

For full intruction on installation https://craftcms.com/docs/3.x/installation.html#step-1-download-craft

my-craft-demo's People

Contributors

andyzack avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.