{"id":19019547,"url":"https://github.com/ff0000-ad-tech/wp-creative-server","last_synced_at":"2025-04-23T05:19:57.263Z","repository":{"id":27119672,"uuid":"112577819","full_name":"ff0000-ad-tech/wp-creative-server","owner":"ff0000-ad-tech","description":"An app that manages Webpack compilation for all the ad sizes, variations, and deliveries.","archived":false,"fork":false,"pushed_at":"2023-01-07T03:56:33.000Z","size":8722,"stargazers_count":8,"open_issues_count":17,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-29T22:23:36.478Z","etag":null,"topics":["advertising","animated","banner","dashboard","es6","javascript","webpack"],"latest_commit_sha":null,"homepage":"https://github.com/ff0000-ad-tech/tmpl-standard-base","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ff0000-ad-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-30T07:12:33.000Z","updated_at":"2021-11-19T17:56:21.000Z","dependencies_parsed_at":"2023-01-14T06:01:30.307Z","dependency_job_id":null,"html_url":"https://github.com/ff0000-ad-tech/wp-creative-server","commit_stats":null,"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff0000-ad-tech%2Fwp-creative-server","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff0000-ad-tech%2Fwp-creative-server/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff0000-ad-tech%2Fwp-creative-server/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ff0000-ad-tech%2Fwp-creative-server/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ff0000-ad-tech","download_url":"https://codeload.github.com/ff0000-ad-tech/wp-creative-server/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248808802,"owners_count":21164893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["advertising","animated","banner","dashboard","es6","javascript","webpack"],"created_at":"2024-11-08T20:13:01.113Z","updated_at":"2025-04-17T07:31:40.985Z","avatar_url":"https://github.com/ff0000-ad-tech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"##### RED Interactive Agency - Ad Technology\n\n[![npm (tag)](https://img.shields.io/npm/v/@ff0000-ad-tech%2Fwp-creative-server.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fwp-creative-server)\n[![GitHub issues](https://img.shields.io/github/issues/ff0000-ad-tech/wp-creative-server.svg?style=flat-square)](https://github.com/ff0000-ad-tech/wp-creative-server)\n[![npm downloads](https://img.shields.io/npm/dm/@ff0000-ad-tech%2Fwp-creative-server.svg?style=flat-square)](https://www.npmjs.com/package/@ff0000-ad-tech%2Fwp-creative-server)\n\n[![GitHub contributors](https://img.shields.io/github/contributors/ff0000-ad-tech/wp-creative-server.svg?style=flat-square)](https://github.com/ff0000-ad-tech/wp-creative-server/graphs/contributors/)\n[![npm license](https://img.shields.io/npm/l/@ff0000-ad-tech%2Fwp-creative-server.svg?style=flat-square)](https://github.com/ff0000-ad-tech/wp-creative-server/blob/master/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n# Webpack - Creative Server\n\nConfigurable interface designed to simplify the process of building properly packaged, highly optimized, technically respectable banner campaigns.\n\n[Getting Started](#getting-started)\n\n[Features](#features)\n\n[Technical Overview](#technical-overview)\n\n[Plugins](#plugins)\n\n[CS Frontend Development](#cs-frontend-development)\n\n# Getting Started\n\n\u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nWe recommend you start with [a working template](https://github.com/ff0000-ad-tech/tmpl-standard-base). Once you have a feel for the eco-system, adapt CS as needed to your process.\n\n# Webpack 4 Migration\n\nWe migrated our build process to Webpack 4 on July 18, 2018. You can read more about it [here](https://github.com/ff0000-ad-tech/ad-docs/blob/master/MIGRATION/webpack4.md).\n\n# Features\n\n\u003ca name=\"features\"\u003e\u003c/a\u003e\n\n### Dashboard\n\nUtilize Webpack in a browser interface for ES6 banner development:\n\n![Creative Server](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/wp-creative-server/full-app.png)\n\n-   many sizes, many indexes\n-   non-redundant, modular builds\n-   watch states per size/index, optionally concurrent\n-   debug \u0026 production bundles\n\n![Dashboard](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/wp-creative-server/dashboard.png)\n\n### Deploy Profiles\n\nManage deploy-profiles, Webpack settings, and any other collection data:\n\n![Deploy Profile Settings](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/wp-creative-server/deploy-profile-settings.png)\n\n### Browser\n\nEnable navigation of assets/outputs:\n\n![Browser](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/wp-creative-server/browser.png)\n\n-   Open files in associated editor app\n-   Open directories in system file manager\n\n### Preview\n\nProvide a localhost for quickly testing builds:\n\n![Preview](https://github.com/ff0000-ad-tech/ad-docs/blob/master/assets/wp-creative-server/preview.png)\n\n-   Run compiled units in browser\n-   Easily refresh\n-   Open units in a stand-alone tab for measuring k-weight\n\n### Plugins\n\nPlugin architecture for running additional, custom processes.\n\n# Technical Overview\n\n\u003ca name=\"technical-overview\"\u003e\u003c/a\u003e\n\nThe Webpack scripts are independent of Creative Server. They run as their own process \u0026 communicate with Creative Server's REST API via https://github.com/ff0000-ad-tech/wp-process-manager.\n\nOtherwise, Creative Server data is a proxy of the file-system, the only source of truth.\n\nPersistant state is maintained by `profile.json`, `plugins.json`, and the like. Said state is then acquired by the Express/NodeJS runtime and is made available to the React/Redux view via RPC, on-demand, providing low-latency indication of:\n\n1.  available sizes/indexes\n2.  deploy profiles\n3.  busy-state\n4.  error-state\n5.  last conpile time\n6.  a view of the project file-system\n\n### Default Hierarchy\n\nCreative Server can be installed in your banner project. CS expects the following hierarchy:\n\n```\n. Project Context\n├── 1-build\n| ├── 300x250\n| | ├── index.html\n| | └── ...\n| ├── 320x50\n| | ├── index.html\n| | └── ...\n| └── ...\n|\n├── 2-debug\n| └── ...\n|\n├── 3-traffic\n| └── ...\n|\n├── package.json\n├── plugins.json\n├── webpack.config.js\n└── ...\n```\n\n`npm install --save-dev @ff0000-ad-tech/wp-creative-server.git`\n\nInstalling adds the following to your project:\n\n```\n├── node_modules\n| └── @ff0000-ad-tech\n|  └── wp-creative-server\n|   ├── index.js\n|   └── ...\n```\n\n### Size Targets\n\nSizes will be discovered in `./[context]/['1-build']/...` on folder-names that match `/[0-9]+x[0-9]+/`.\n\n### Index Targets\n\nIndexes will be discovered in `./[context]/['1-build']/[size]/...` on file-names that match `/index/`.\n\n# Plugins\n\n\u003ca name=\"plugins\"\u003e\u003c/a\u003e\n\n### Declaring a Plugin\n\nAdd a `./plugins.json` at your `--context` location. It will contain an object with NPM-style dependencies, like:\n\n```json\n{\n\t\"ad-es6-particles\": \"git+ssh://git@stash.ff0000.com:7999/at/ad-es6-particles.git\",\n\t\"@ff0000-ad-tech/cs-plugin-bulk-compile\": \"git+ssh://git@github.com:ff0000-ad-tech/cs-plugin-bulk-compile.git\",\n\t\"@ff0000-ad-tech/cs-plugin-vendor-indexes\": \"git+ssh://git@github.com:ff0000-ad-tech/cs-plugin-vendor-indexes.git\"\n}\n```\n\n### Writing a Plugin\n\nA plugin can be a frontend tool that runs in the browser (\"app\" style plugin) and makes calls to a system-level backend. Or it can simply hook into various UI elements\nin the app and spawn system-level operations (\"api\" style plugin).\n\nTo make your plugin compatible, the following object must be added to your plugin's `package.json`:\n\n```javascript\n\t\"name\": \"ad-es6-particles\", // standard NPM name\n\t...\n\t\"wp-creative-server\": {\n\t\t\"routes\": {\n\t\t\t\"app\": \"/dist\", // route to the directory in your plugin that will be served as the app root\n\t\t\t\"api\": \"/lib/api.js\" // route to the Node script in your plugin that will be used as the API endpoint\n\t\t},\n\t\t\"hooks\": {\n\t\t\t\"size-control\": {\n\t\t\t\t\"Particle Simulator\": \"/app/index.html\" // the query to either \"/app/\" or \"api\", plus whatever static paths \u0026 params are needed\n\t\t\t}\n\t\t}\n\t}\n```\n\n#### Plugin Routes\n\nOnce a plugin is installed in your `--context`'s `node_modules`, Creative Server will create several routes, based on the plugin's `package.json`.\nThese will be available on the server like:\n\n```\nhttp://10.0.7.126:5200/ad-es6-particles\n```\n\nAll plugin routes are sent the following:\n\n-   `api` - Creative Server endpoint URL\n-   `folders.build` - name of the build folder\n-   `folders.debug` - name of the debug folder\n-   `folders.traffic` - name of the traffic folder\n\n#### Plugin Hooks\n\nHooks are various UI-elements in Creative Server to which plugins can be attributed. Depending on the hook, additional data is passed.\n\nCurrently available hooks are:\n\n1.  `size-control` - your command will appear in a menu next to each ad-size. It will be passed:\n\n    -   `size` - the requested size-folder name.\n\n2.  `bulk-control` - your command will appear in a drop-down that will execute when the 🔥 is clicked. It will be passed:\n    -   `profile` - name of the currently selected deploy profile (also the folder to which traffic-compiled ads are output)\n    -   `targets` - an object with keys specifying paths to traffic-compiled output folders\n\n# CS Frontend Development\n\n\u003ca name=\"cs-frontend-development\"\u003e\u003c/a\u003e\n\nTo build the React/Redux/ES6 frontend:\n\n1.  Install all of the dev-dependencies.\n2.  Run `npm run build`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fff0000-ad-tech%2Fwp-creative-server","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fff0000-ad-tech%2Fwp-creative-server","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fff0000-ad-tech%2Fwp-creative-server/lists"}