lmanukyan / print-designer

T Shirt Design (Fabric.js + Vue.js)

Print Designer

Print Designer is open source project, which based on Payload CMS, Vue.js and Fabric.js

Demo

https://app.print-rtp.ru/

Database

For storing records is used MongoDB

Installation

Clone the project

git clone https://github.com/lmanukyan/print-designer.git
cd print-designer

Create .env file

cp .env.example .env
# do not forget fill the file

Installation of dependencies

yarn install
yarn install:app

Development

Start the backend

yarn dev
# Admin panel is available on address
# http://localhost:3050/admin

Start the frontend

yarn dev:app
# App is available on address
# http://localhost:3040

Environment Variables

Backend .env variables

MONGODB_URI - MongoDB connection string

PAYLOAD_SECRET - Payload secret key

PAYLOAD_DOMAIN - Site address

SMTP_HOST - SMTP host

SMTP_PORT - SMTP port

SMTP_USER - SMTP login

SMTP_PASS - SMTP password

SMTP_NAME - Sender name

MANAGER_EMAIL - Receiver email address

Frontend .env variables

VUE_APP_API_URL - Address for API requests

Deployment

Build backend & frontend

yarn build

Run backend via pm2

NODE_ENV=production && pm2 start server.js

Nginx config

server {
  listen 80;
  server_name _;
  
  location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:3050;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

print-designer's Issues

when i run the project just showing app state??

When I run yarn dev:app command an error occurs

When I run yarn dev:app command an error occurs

error in ./src/styles/quasar.sass

Syntax Error: SassError: Undefined function.
╷
43 │ $rad: math.div($angle, 180) * $PI
│ ^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\quasar\dist\quasar.sass 43:9 sin()
node_modules\quasar\dist\quasar.sass 4560:16 @import
src\styles\quasar.sass 3:9 root stylesheet

ERROR in ./src/styles/quasar.sass (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-29.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-29.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-29.use[3]!./node_modules/vue-cli-plugin-quasar/lib/loader.sass.js!./src/styles/quasar.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
╷
43 │ $rad: math.div($angle, 180) * $PI
│ ^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\quasar\dist\quasar.sass 43:9 sin()
node_modules\quasar\dist\quasar.sass 4560:16 @import
src\styles\quasar.sass 3:9 root stylesheet
@ ./src/styles/quasar.sass 4:14-306 15:3-20:5 16:22-314
@ ./src/quasar-user-options.js 1:0-30
@ ./src/main.js 6:0-54 9:27-44

when i run the project just showing app state?? and kindly tell how to run backend of that project