(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{65:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return b})),n.d(t,"default",(function(){return u}));var i=n(2),a=n(6),r=(n(0),n(131)),l=n(133),o=n.n(l),s=n(132),c={title:"Environment",description:"Environment of the NI-APH repository"},p={unversionedId:"environment",id:"environment",isDocsHomePage:!1,title:"Environment",description:"Environment of the NI-APH repository",source:"@site/docs\\environment.md",slug:"/environment",permalink:"/docs/environment",version:"current",sidebar:"docs",previous:{title:"Introduction",permalink:"/docs/seminars"},next:{title:"Course requirements",permalink:"/docs/requirements"}},b=[{value:"Project structure",id:"project-structure",children:[]},{value:"Parcel",id:"parcel",children:[]},{value:"Basic setup",id:"basic-setup",children:[]},{value:"Deployment",id:"deployment",children:[]}],d={rightToc:b};function u(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(r.b)("wrapper",Object(i.a)({},d,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("h2",{id:"project-structure"},"Project structure"),Object(r.b)("pre",null,Object(r.b)("code",Object(i.a)({parentName:"pre"},{}),"project\n\u2502\n\u2514\u2500\u2500\u2500examples                // coding examples\n\u2502   \u2502   assets              // assets that are copied into build folder\n\u2502   \u2502   libs                // libraries for examples and demo projects\n\u2502   \u2502   src                 // source files\n\u2502   \u2502   view                // PUG templates that are bundled by Parcel\n\u2502   \n\u2514\u2500\u2500\u2500scripts                 // scripts for pre-build, post-build, deployment etc.\n\u2502\n\u2514\u2500\u2500\u2500slides                  // RevealJS-powered slides\n\u2502   \u2502   assets              // assets (images, svg files, code snippets)\n\u2502   \u2502   backgrounds         // background files for presentations\n\u2502   \u2502   plugins             // RevealJS plugins\n\u2502   \u2502   themes              // RevealJS themes (including APH theme for slides)\n\u2502   \u2502   view                // PUG templates with all texts and declarations\n\u2502\n\u2514\u2500\u2500\u2500wiki                    // docusaurus-powered wiki\n\u2502   \u2502   blog                // place for a blog... not used right now\n\u2502   \u2502   docs                // markdown documents with instructions, tutorials, guides etc.\n\u2502   \u2502   plugins             // some plugins\n\u2502   \u2502   src                 // React sources with custom components and themes\n\u2502   \u2502   static              // static files (slides and examples are copied into this folder) \n\u2502   \u2502   types               // additional Typescript declarations\n\u2502\n\u2502   CHANGELOG.md            // changelog\n\u2502   package.json            // npm scripts and dependencies\n\u2502   README.md               // README file\n\u2502   tsconfig.json           // typescript config (only for pre-build)\n\u2502   tslint.json             // typescript linter settings for static checking\n")),Object(r.b)("h2",{id:"parcel"},"Parcel"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://parceljs.org/"}),"parcelJS")," is a simple bundler that requires minimum configuration (alternative to webpack)"),Object(r.b)("li",{parentName:"ul"},"great for prototyping, especially for PixiJS, as we only need a single canvas element and the rest will be stored in scripts"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"how it works"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"you have a HTML file"),Object(r.b)("li",{parentName:"ul"},"this file is referencing other files, such as JavaScript files, TypeScript files, SASS styles, LESS,..."),Object(r.b)("li",{parentName:"ul"},"Parcel tries to process all referenced files and find appropriate parsers for each"),Object(r.b)("li",{parentName:"ul"},"for instance, TypeScript files need to be compiled into JavaScript, SASS has to be transformed into CSS"),Object(r.b)("li",{parentName:"ul"},"once everything is completed, Parcel will create ",Object(r.b)("strong",{parentName:"li"},"another")," file in the output directory (e.g. ",Object(r.b)("inlineCode",{parentName:"li"},"build_examples"),") where it will store all processed files, appending hash strings to their filenames"),Object(r.b)("li",{parentName:"ul"},"this directory can be treated as a static webpage")))),Object(r.b)("div",{className:o.a.figure},Object(r.b)("img",{src:Object(s.a)("img/docs/environment.svg")})),Object(r.b)("h2",{id:"basic-setup"},"Basic setup"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"install ",Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://nodejs.org/en/download/"}),"nodejs")),Object(r.b)("li",{parentName:"ul"},"go to the root directory of this project"),Object(r.b)("li",{parentName:"ul"},"install all dependencies: ",Object(r.b)("inlineCode",{parentName:"li"},"npm install")),Object(r.b)("li",{parentName:"ul"},"run the dev-server: ",Object(r.b)("inlineCode",{parentName:"li"},"npm run dev-examples"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"go to ",Object(r.b)("inlineCode",{parentName:"li"},"localhost:1234/index.html")," - you should see a simple dashboard"),Object(r.b)("li",{parentName:"ul"},"navigate to one of the examples"),Object(r.b)("li",{parentName:"ul"},"if you are using ",Object(r.b)("strong",{parentName:"li"},"Visual Studio Code"),", don't forget to install ",Object(r.b)("inlineCode",{parentName:"li"},"Debugger for Chrome")),Object(r.b)("li",{parentName:"ul"},"go to ",Object(r.b)("inlineCode",{parentName:"li"},"localhost:1234/01_sprite.html")," - you should see a rotating sprite. Try out your debugger by setting a breakpoint in ",Object(r.b)("inlineCode",{parentName:"li"},"examples/src/01-helloworld/sprite.ts")),Object(r.b)("li",{parentName:"ul"},"try to change a few lines of code and save your changes. ",Object(r.b)("inlineCode",{parentName:"li"},"Parcel")," should re-compile and reset the page"))),Object(r.b)("li",{parentName:"ul"},"if you want to build the slides, run ",Object(r.b)("inlineCode",{parentName:"li"},"npm run dev-slides")," and navigate to ",Object(r.b)("inlineCode",{parentName:"li"},"localhost:1234/index.html")),Object(r.b)("li",{parentName:"ul"},"if you want to build the wiki:",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"go to wiki folder"),Object(r.b)("li",{parentName:"ul"},"execute ",Object(r.b)("inlineCode",{parentName:"li"},"npm install")),Object(r.b)("li",{parentName:"ul"},"execute ",Object(r.b)("inlineCode",{parentName:"li"},"npm start")," and navigate to ",Object(r.b)("inlineCode",{parentName:"li"},"localhost:3000")))),Object(r.b)("li",{parentName:"ul"},"if you want to build everything",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"execute ",Object(r.b)("inlineCode",{parentName:"li"},"npm run deploy-all")," from the root folder. Everything gets bundled into ",Object(r.b)("inlineCode",{parentName:"li"},"build_wiki")," ")))),Object(r.b)("h2",{id:"deployment"},"Deployment"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"every week, the current version goes public in ",Object(r.b)("a",Object(i.a)({parentName:"li"},{href:"https://aph.dodo.me"}),"aph.dodo.me"))))}u.isMDXComponent=!0}}]);