Skip to content

5. Deploying

Jump to bottom
jadens3 edited this page Aug 19, 2021 · 1 revision

Building and deploying is an annoying process for the Wiki because of the way the website is laid out. We are required to paste our code within text boxes on the iGEM Wiki, due to the MediaWiki framework that they have on the website. I have engineered a workaround that allows us to use React (or really any modern framework) on the website. React works well because it uses Webpack to bundle the code into a bundle file. (Newer versions of React did some code splitting, but we found a workaround that forces it to bundle into a single file. This can be found in scripts/build-non-split.js)

For us to achieve this, we paste our JavaScript code to a page (http://2019.igem.org/Template:Washington/JavaScript), our CSS code to a page (http://2019.igem.org/Template:Washington/CSS), and we call those two in an HTML base that we put on a template page (https://2019.igem.org/Template:Washington) (See below for the code). Then, we can access it by typing {{Washington}} <html></html> on the content page we want to modify.

Build process

This process may be able to be automated. We can attempt to create tools to do this. For now, it is a manual process.

  1. npm run build
  2. Navigate to the build folder, find static/css/main.css and static/js/main.js and copy paste those into http://2019.igem.org/Template:Washington/CSS and http://2019.igem.org/Template:Washington/JavaScript respectively. (Note the capital S in JavaScript)
    • If you didn't update any CSS files, you won't need to update the CSS template
  3. Add the base template to pages you need to exist

Base Template

<html>

<!-- Set up mobile viewport and meta tag -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<!-- Import CSS -->
<link href="https://2019.igem.org/Template:Washington/CSS?action=raw&ctype=text/css" type="text/css" rel="stylesheet" />

<!-- Create root div for React to inject information into -->
<div id="root">Please enable JavaScript to view this page. If you are viewing this page with javascript enabled, please contact wkwok16@uw.edu and send a screenshot of the developer console. Here is our project abstract:<br /><br />

<h1>Work in progress site</h1>

</div>

<!-- Add on-page javascript for destroying default iGEM CSS and adding a loading animation -->
<!-- I do it twice to run once so the page loading animation gets correct styling the first run -->
<!-- Second run is just to make sure everything gets ran -->
<script type="text/javascript">
    $('link[rel="shortcut icon"]').attr('href','http://2018.igem.org/wiki/images/d/d9/T--Washington--HLogo1.png');
    $('div#content').removeAttr('id').attr('id', 'contentBox');
    $('a#top').remove();
    $('div#top_title').remove();
    $('div#HQ_page').removeAttr('id');
    $('div.mw-body').removeAttr('class');
    $('div#mw-content-text').removeAttr('id');
    $('div#bodyContent').removeAttr('id');
    $('div.mw-content-ltr>p').addClass('meta');
    $('div.mw-content-ltr').removeAttr('class');
    document.getElementById("root").innerText = "Page loading...";
    $(document).ready(function () {
        $('link[rel="shortcut icon"]').attr('href','http://2018.igem.org/wiki/images/d/d9/T--Washington--HLogo1.png');
        $('div#content').removeAttr('id').attr('id', 'contentBox');
        $('a#top').remove();
        $('div#top_title').remove();
        $('div#HQ_page').removeAttr('id');
        $('div.mw-body').removeAttr('class');
        $('div#mw-content-text').removeAttr('id');
        $('div#bodyContent').removeAttr('id');
        $('div.mw-content-ltr>p').addClass('meta');
        $('div.mw-content-ltr').removeAttr('class');
    })
</script>

<!-- Import React Javascript -->
<script src="https://2019.igem.org/Template:Washington/JavaScript?action=raw&ctype=text/javascript" type="text/javascript"></script>

</html>

Fairly standard. Note the $('link[rel="sortcut icon"]) in the jQuery code. That is what replaces the favicon. In the future, this code may be deprecated once the iGEM wiki (hopefully) moves away from jQuery. It is up to future people working on this to figure out a new way to do change the favicon. Shouldn't be too bad, but it makes the website look just that much better.

In addition, note the ?action=raw&ctype=text/javascript and similar for CSS.

Page Base

Currently the iGEM Wiki uses MediaWiki to link templates to allow you to use HTML from one page to another by putting a simple reference. In the above, that HTML was put in Template:Washington. To access this, you would put the below on any page like so:

{{Washington}}
<html></html>

This also shares the JavaScript and CSS from the template. The empty html tags are critical because if they are not there on judged pages, it will not qualify us for the judging for some reason.

Clone this wiki locally