Code Monkey home page Code Monkey logo

sdk-foundation-vue's Introduction

The ultimate Vue 3 + PHP web development experience!

From development to deployment, this SDK when paired with your own server running Caprover PaaS (https://caprover.com) provides for the ultimate web development experience. Self host your apps via Caprover on a cheap VPS for as little as $20/mo (or less). I use and recommend Vultr. (https://www.vultr.com/?ref=7182700).

More on Caprover forthcoming, as this project evolves and is documented.

FRONTEND: Vue 3 + Vite build system + Foundation for Sites (SASS edition). Swap out the CSS framwwork with anything you'd like.

BACKEND: PHP 8.1.8 served via FastCGI (FPM-PHP) through Nginx on Alpine Linux. Nginx routes all traffic to /index.php by default. Fat Free Framework serves /dist/index.html for routes not starting with /api/.

Prerequisites for Windows, macOS & Linux users:

This project combines a Vue 3 frontend and PHP backend in production but in development these are running on seperate servers:

Development Mode: (Automatically in dev mode when using docker-compose up) Get going with docker compose up to launch backend PHP server and npm run dev in another terminal for the Vite dev server. Vite dev server is running on port 80 to serve your front-end with hot-module-reload features. Open browser to http://localhost:80 Your backend server runs PHP is on port 81. Used mainly for creating API routes. Frontned dev server proxies all requests to /api/* path to port 81 on localhost. Docker Compose stack maps frontend/dist/ directory to backend/dist/ in docker containers. Backend server always serves the /dist/index.html for any route not starting with /api/. Run npm build to create this file.

Production Mode: (Automatically set in deployments) Simply commit and push your project's code to the main branch to kick off a build using the provided Github Workflow deploy file. The Workflow file will build and merge your frontend dist/ directory with the backend/ files for deployment.

Dependency Management:

All PHP dependencies are managed with Composer. After cloning this project to your machine, use composer install to install the PHP dependencies. All Javascript dependencies are managed with NPM. After cloning this project to yoru machine, use npm install to install the Javascript modules.

For total noobs: Composer and Docker Compose are unrelated. Docker Compose is used to deploy a software stack while Composer is used to manage PHP dependencies.

More documentation forthcoming. Feel free to ask any questions via the Issues tab.

sdk-foundation-vue's People

Contributors

maietta avatar hsnd90 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.