1"use strict";(self.webpackChunkphpvms_docs=self.webpackChunkphpvms_docs||[]).push([[7822],{4019(e,s,n){n.r(s),n.d(s,{assets:()=>o,contentTitle:()=>l,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>a});const i=JSON.parse('{"id":"developers/building-assets","title":"Building Assets","description":"The default CSS/Javascript is built and packaged using","source":"@site/versioned_docs/version-v7.x/developers/building-assets.md","sourceDirName":"developers","slug":"/developers/building-assets","permalink":"/developers/building-assets","draft":false,"unlisted":false,"editUrl":"https://github.com/phpvms/docs/tree/master/versioned_docs/version-v7.x/developers/building-assets.md","tags":[],"version":"v7.x","frontMatter":{"id":"building-assets","title":"Building Assets"},"sidebar":"docs","previous":{"title":"Environment Configuration","permalink":"/developers/environment"},"next":{"title":"Addons","permalink":"/developers/addons"}}');var t=n(74848),d=n(28453);const r={id:"building-assets",title:"Building Assets"},l=void 0,o={},a=[{value:"Source Layout",id:"source-layout",level:2},{value:"Javascript",id:"javascript",level:4},{value:"CSS",id:"css",level:4},{value:"Compiled Assets",id:"compiled-assets",level:4},{value:"Required Tools",id:"required-tools",level:2},{value:"Building CSS",id:"building-css",level:2},{value:"Building JS",id:"building-js",level:2}];function c(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",ul:"ul",...(0,d.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["The default CSS/Javascript is built and packaged using\n",(0,t.jsx)(s.a,{href:"https://webpack.js.org/",children:"webpack"}),". The main Javascript files used are compiled\ntogether into a single JS file, which is then minimized. While most settings are\nexposed, you might still want to customize them."]}),"\n",(0,t.jsx)(s.hr,{}),"\n",(0,t.jsx)(s.h2,{id:"source-layout",children:"Source Layout"}),"\n",(0,t.jsx)(s.p,{children:'The "source" files for the assets are in one of two places:'}),"\n",(0,t.jsx)(s.h4,{id:"javascript",children:"Javascript"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"resources/js"})," - Has the JS files required for one of:","\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"admin"})," - JS files for the admin panel"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"frontend"})," - JS files required for the frontend"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.h4,{id:"css",children:"CSS"}),"\n",(0,t.jsx)(s.p,{children:"The default skins use open-source free templates based on Bootstrap. The SASS\nfiles are located in either:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"resources/sass/admin"})," - The admin panel SASS files"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"resources/sass/now-ui"})," - The frontend SASS files"]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:"These are then compiled into CSS files, which are placed into their own\nrespective directories"}),"\n",(0,t.jsx)(s.h4,{id:"compiled-assets",children:"Compiled Assets"}),"\n",(0,t.jsx)(s.p,{children:"The compiled assets are placed in 3 separate folders (by default):"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{children:"public/assets/admin\npublic/assets/frontend\npublic/assets/global\n"})}),"\n",(0,t.jsxs)(s.p,{children:["Each of those folders have a ",(0,t.jsx)(s.code,{children:"js"})," and ",(0,t.jsx)(s.code,{children:"css"})," folder, and the respective assets\nare placed in those folders. After building those assets, the files are placed\ninto there."]}),"\n",(0,t.jsx)(s.admonition,{type:"caution",children:(0,t.jsxs)(s.p,{children:["On an update, the files in ",(0,t.jsx)(s.code,{children:"public/assets/*"})," will be overwritten, so be careful\nwhen updating to make sure those files aren't overwritten. You can do a diff\nagainst the original JS files in ",(0,t.jsx)(s.code,{children:"resources/js"})," and then rebuild, to make sure\nyour changes are included"]})}),"\n",(0,t.jsx)(s.hr,{}),"\n",(0,t.jsx)(s.h2,{id:"required-tools",children:"Required Tools"}),"\n",(0,t.jsxs)(s.p,{children:["nodejs and npm are required to build. Follow the\n",(0,t.jsx)(s.a,{href:"https://nodejs.org/en/download/",children:"instructions for your platform"})," to install\n",(0,t.jsx)(s.code,{children:"nodejs"}),". After installing it, run the following in your phpvms folder (the same\ndirectory as the ",(0,t.jsx)(s.code,{children:"package.json"})," file). This installs webpack and the associated\ndependencies into ",(0,t.jsx)(s.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-bash",children:"npm install\n"})}),"\n",(0,t.jsx)(s.p,{children:"Building both the CSS and Javascript use the same command."}),"\n",(0,t.jsx)(s.hr,{}),"\n",(0,t.jsx)(s.h2,{id:"building-css",children:"Building CSS"}),"\n",(0,t.jsx)(s.p,{children:"For the frontend and backend, the CSS is built from SASS templates, which are\nbased on bootstrap, with some pre-built templates."}),"\n",(0,t.jsxs)(s.p,{children:["The frontend template uses Bootstrap 4 built using\n",(0,t.jsx)(s.a,{href:"https://demos.creative-tim.com/now-ui-kit/index.html",children:"now-ui"}),"; the SASS is\nlocated in ",(0,t.jsx)(s.code,{children:"resources/sass/now-ui"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["The backend template is built using Bootstrap 3, with the template being based\non ",(0,t.jsx)(s.a,{href:"https://www.creative-tim.com/product/paper-dashboard",children:"paper-dashboard"}),"; the\nSASS files are located in ",(0,t.jsx)(s.code,{children:"resources/sass/admin"}),"."]}),"\n",(0,t.jsx)(s.p,{children:"To build the CSS, run the build command:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-bash",children:"npm run production\n"})}),"\n",(0,t.jsx)(s.hr,{}),"\n",(0,t.jsx)(s.h2,{id:"building-js",children:"Building JS"}),"\n",(0,t.jsx)(s.p,{children:"The Javascript files are divided into two types:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"vendor.js"})," - This contains all of the vendor files that are compiled and\nminimized together"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"app.js"})," - These are the main Javascript files used by the frontend"]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:"To update the Javascript files (for example, if you update the livemap file,\netc), you need to rebuild the JS files:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-bash",children:"npm run production\n"})}),"\n",(0,t.jsxs)(s.p,{children:["Then reupload the files from ",(0,t.jsx)(s.code,{children:"public/assets"}),"."]})]})}function h(e={}){const{wrapper:s}={...(0,d.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},28453(e,s,n){n.d(s,{R:()=>r,x:()=>l});var i=n(96540);const t={},d=i.createContext(t);function r(e){const s=i.useContext(d);return i.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),i.createElement(d.Provider,{value:s},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.