{"id":51031031,"url":"https://github.com/dreamfactorysoftware/dreamfactory-demo-pwa","last_synced_at":"2026-06-22T00:30:57.101Z","repository":{"id":36914754,"uuid":"227580816","full_name":"dreamfactorysoftware/dreamfactory-demo-pwa","owner":"dreamfactorysoftware","description":"DreamFactory demo PWA application","archived":false,"fork":false,"pushed_at":"2023-01-05T02:53:36.000Z","size":77988,"stargazers_count":2,"open_issues_count":31,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-05T00:35:04.226Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dreamfactorysoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-12T10:32:27.000Z","updated_at":"2024-03-22T09:33:34.000Z","dependencies_parsed_at":"2023-01-17T07:15:19.787Z","dependency_job_id":null,"html_url":"https://github.com/dreamfactorysoftware/dreamfactory-demo-pwa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dreamfactorysoftware/dreamfactory-demo-pwa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fdreamfactory-demo-pwa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fdreamfactory-demo-pwa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fdreamfactory-demo-pwa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fdreamfactory-demo-pwa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreamfactorysoftware","download_url":"https://codeload.github.com/dreamfactorysoftware/dreamfactory-demo-pwa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fdreamfactory-demo-pwa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34630753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-21T02:00:05.568Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-22T00:30:56.324Z","updated_at":"2026-06-22T00:30:57.094Z","avatar_url":"https://github.com/dreamfactorysoftware.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Demo PWA\n\n### Setup database:\n[MySQL example employee database](https://dev.mysql.com/doc/employee/en/) was used for this application, but with extra tables and fields.\n\nTo set up the database follow these steps:\n1. Unzip archive mysql-employee-example-database.zip that contains database.\n2. Open \"database\" folder path in shell.\n3. Execute the next command to setup mysql in docker and see logs:\n    ```\n    docker-compose up -d \u0026\u0026 docker-compose logs -f\n    ```\n   Wait a bit for logs to full stop, then Ctrl + C and you are all set.\n4. Configure the database in your DF using [this guide](https://guide.dreamfactory.com/docs/chapter03.html#generating-a-mysql-backed-api).\n\n### Configuring Okta\nTo configuring Okta for your app use [this guide](https://guide.dreamfactory.com/docs/chapter04.html#authenticating-with-okta).\n\n### Configuring Salesforce service\nIf you don't want to use Salesforce service, you can go to your `.env` file and change value from `true` to `false` in the `VUE_USE_SALESFORCE` field.\n \nTo configuring Salesforce service for your app use [this guide](https://guide.dreamfactory.com/docs/salesforce.html#configuring-the-salesforce-service).\n\n### Environment:\nThere is a **.env.example** file in the root of the app. You would need to copy it and name it **.env** (for development) and **.env.production** (for production).\nThen open them and fill all env variables with respective values.\n\nMore about environment variables [here](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables). \n\n### DF Scripts\nEvent Scripts are used to hide the last 4 symbols of employee's phone number and for search employees on employees by department page\n\nFirst of all, go to the scripts tab in your DF.\n\nAdd scripts for the next endpoints using related scripts from a df-script folder in the root path.\n\n1. Script that will hide the last 4 symbols of all employees phone numbers:\n    ```\n    mysql \u003e mysql._table.{table_name} \u003e mysql._table.{table_name}.get.post_process \u003e mysql._table.employees.get.post_process\n    ```\n   \n    Script file: **hide-last-4-phone-symbols-for-all-employees.php**.\n\n2. Script that will hide the last 4 symbols of an employee phone number:\n    ```\n    mysql \u003e mysql._table.{table_name}.{id} \u003e mysql._table.{table_name}.{id}.get.post_process \u003e mysql._table.employees.{id}.get.post_process\n    ```     \n   Script file: **hide-last-4-phone-symbols-for-one-employee.php**.\n   \n3. Scripts for the search feature on employees by department page:\n    ```\n    mysql \u003e mysql._table.{table_name}.{id} \u003e mysql._table.{table_name}.{id}.get.post_process \u003e mysql._table.departments.{id}.get.post_process\n    ```\n   Script file: **search-employees-by-department.php**.\n   \nConfiguration is the same for all scripts, to choose script from your desktop click \"**Select file**\" button in \"**Import a script file**\" area.   \n\nExample:\n\n![hide 4 symbol script config 1](readme/config-for-hiding-last-symbols-script-1.png) \n\n#### Note: \nIn case you specify employees database DF service namespace something different from \"mysql\", you would need to change $related_service_name variable value to suitable service name in the **search-employees-by-department.php**. Also, you would need to change event scripts endpoints from \"mysql\" to your service name.\n\nOtherwise, search on employees by department page will not work because it is [using event scripts to filter related data](https://blog.dreamfactory.com/event-scripts-filter-related-data/).\n\n### DF Mailgun\nDF Mailgun feature used to send support emails.\n\n1. Create Mailgun account [here](https://www.mailgun.com/).\n2. Create DF Mailgun connector using [this guide](http://wiki.dreamfactory.com/DreamFactory/Tutorials/Connecting_to_Email_Services#Mailgun_Email_Service).\n\n### PWA Functions:\nFor PWA functionality to work, the app must be served over HTTPS.\nIn case you are using a Digital Ocean server, [this guide](https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-18-04) might come in handy.\nOr if you are using a reverse proxy see [this guide](https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-with-ssl-as-a-reverse-proxy-for-jenkins) (but without Jenkins redirect). You can also use [NGROK](https://ngrok.com/) for development.\n\n### Setup in Production mode:\n\n#### First way - using [serve](https://www.npmjs.com/package/serve) package\n\n1. Build app\n    ```\n    npm run build\n    ```\n2. Run using serve package\n    ```\n    serve -s dist\n    ```\n#### Second way - using docker  \n\n1.  Build docker image\n    ```\n    docker build . -t my-app\n    ```\n\n2. Run app\n    ```\n    docker run -d -p 8080:80 my-app\n    ```\n\n### Setup in dev mode:\n1. Install all modules for app:\n    ```\n    npm install\n    ```\n\n2. Run app with compiles and hot-reloads:\n    ```\n    npm run serve\n    ```\n   \n#### ESLint\nRun ```eslint --ext .js,.vue src``` to see lint problems\n\nAdd ```--fix``` flag to fix problems   \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamfactorysoftware%2Fdreamfactory-demo-pwa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreamfactorysoftware%2Fdreamfactory-demo-pwa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamfactorysoftware%2Fdreamfactory-demo-pwa/lists"}