Introduction

• Simply run localhost.bat to start the local server to preview and auto-compile changes. NOTE: For computers that do no use Windows, the BAT script will need to be modified. OS compatible executables will also need to be downloaded separately for Node.js. You can download them here.
• Open a browser and enter localhost:80 as the URL address.
  • NOTE: If port 80 is already being used by some other service, you change the port number in make.js.
• Active webpages will still need to be refreshed with F5.
  • NOTE: In some cases, the page cache might also need to be cleared. You can do that using Ctrl+F5 instead to refresh with cleared page cache.

FAQ

Error - Error: listen EADDRINUSE :::80

• make.js is known to cause this error when the port is already in use with another service. Feel free to change the port value in make.js to a different value.

Error - 302

• make.js is known to send a 302 error if you attempt to access a webpage without inserting its .html extension and there is no redirect stated in the localhost.

Getting a 404 error

• make.js is known to send a 404 if a URL is invalid, for instance if a webpage or file is missing.

Compiling release notes is slow

• Compiling of release notes can sometimes be slow due to the large amount of files that needed to be compiled. If you do not need to compile release notes, you can set the COMPILE_NOTES variable in make.js to false to disable compiling of release notes.
  • NOTE: Do not forget to re-enable this variable when modifying the release notes source.

Modifying make.js does not seem to update anything

• Changes to the make.js script itself require any active instances of make.js terminals to be closed and restarted in order for changes to be updated.

Webpage Development

Introduction

• The webpages that reside in the root /armory_web/ directory are the webpages meant to be hosted, not the components.
  • WARNING: Do not edit the non-component / host-only webpages. Instead, modify the component counterparts that reside in the /armory_web/templates/ directory. On save, the components are dynamically compiled into their host-able counterparts via make.js and Node.js.

Webpage components

• Basically the component structure (except for release notes) is: header.html + main.html (community component in this example) + footer.html content. Each webpage in the root /armory_web/ directory; except header.html, footer.html & notes.html is comprised of three components sections: header + %main_content% + footer. %main_content% can be any unique component, such as community.html or download.html.

Component examples

Modifying header content

• Make changes to your header.html webpage.
• Save the changes.
• Run make.js if you do not already have an instance of it running.
• Refresh your browser if the old webpage is active to view the new changes.

Modifying %main_content% content

• Make changes to your %main_content% webpage.
  • %main_content% can be any unique component, such as community.html or download.html.
• Save the changes.
• Run make.js if you do not already have an instance of it running.
• Refresh your browser if the old webpage is active to view the new changes.

Modifying footer content

• Make changes to your footer.html webpage.
• Save the changes.
• Run make.js if you do not already have an instance of it running.
• Refresh your browser if the old webpage is active to view the new changes.

Release notes structure

• Release notes are comprised of six components:
  • header.html (header component)
  • notes.html (notes component)
  • content.html (content section component)
  • data.json (template data)
  • %monthly_content% (changelog component)
  • index.html (latest downloadable release)
  • footer.html (footer component)

Modifying homepage (release date)

• Modify the index.html page.
  • TIP: The download button should be one of the first things you see in preview mode.

Modifying header or footer content

• Same setup as described above for the other components.

Modifying release notes (tabs and content sections)

• You can do this in notes.html.
  • NOTE: Do not forgot to modify the initDate variable to correctly set the date for the landing page of the release notes.

Modifying content section component

• With content.html.
  • WARNING: You should only modify content.html if you need to change the template look for all release note pages, globally.

Modifying other content sections

• With data.json (template data).
• With one of the webpages in /releases/ (changelog component).

Asset Guidelines

Best quality

• Original formats for static assets should be JPEG or PNG.
• Original formats for animated assets should be GIF or MP4.
• Original resolution for both images and videos should be of 1920x1080 (or higher) screen resolution in original form for best quality before compression and resizing. NOTE: If assets are already at the required standard of 960x480, no resizing will be needed. Compression may still need to be done however.

Optimal loading times

• Images in their final form should be of JPEG format.
• Videos in their final form should be of MP4 format.
  • NOTE: Videos should also be muted (no audio).
• Final images or videos should be of resolution 960x480 for correct aspects and optimal loading times/

Asset Resources

• Ezgif (Multi-format image & video converter).
• GetYouTubeThumbnail (gets URL links for Youtube video thumbnails).
• TubeRipper (Youtube ripper).
• Armory3D archive (original, missing, or unlisted/private asset content).
• PageSpeed (good website analyzer: speed, tips, etc.).
• W3C - HTML (HTML validator).
• W3C - CSS (CSS validator).
• JSHint (JavaScript validator).
• JSLint (JavaScript validator).