Skip to content

8. Final Build

Jump to bottom
jadens3 edited this page Oct 22, 2021 · 8 revisions

Once the content has been finalized, it is necessary to upload a final build of the wiki so that the content is no longer editable. Due to iGEM restrictions, the content for the site cannot be hosted separately on firebase. This requires updating the code with data from firebase, updating the code to serve this data instead of using firebase, and redeploying the main.js build file.

Copying Firebase Data Over

The first portion of the final build process is copying the data stored on firebase into the code so that all the data can be uploaded to the iGEM website.

  1. Navigate to the project Firebase Console Realtime Database
  2. Expand the igem-wikis dropdown, expand the dropdown corresponding to the current year, and click Content Data to view that json object
  3. Click the 3 dots aligned vertically in the upper right corner of the box in the center of the screen to expand the options menu, and click Export JSON. This will initiate a download of the ContentData JSON object
  4. Copy the ContentData object, which consists of the entire downloaded file, and paste it into the contentData constant assignment at the bottom of the src\components\_data\Data.ts file

Detaching Firebase from Code

This portion includes updating the code to read the local contentData object instead of reading it from firebase.

  1. Navigate to src\index.tsx in the code
  2. Under the comment that says COMMENT/UNCOMMENT BELOW TO ENABLE OR DISABLE FIREBASE TO THE PROJECT comment out lines related to firebase, and uncomment the line setting firebase to null. For Example:
// COMMENT/UNCOMMENT BELOW TO ENABLE OR DISABLE FIREBASE TO THE PROJECT
// import * as firebase from 'firebase/app';
// import 'firebase/app'
// import 'firebase/messaging';
// import 'firebase/database';
// import 'firebase/auth';

// const firebaseConfig = {
// 	apiKey: "AIzaSyBkr6jirFdzkMofucO2z_KzN13hMDeWkVI",
// 	authDomain: "uwigem-wikis.firebaseapp.com",
// 	databaseURL: "https://uwigem-wikis.firebaseio.com",
// 	projectId: "uwigem-wikis",
// 	storageBucket: "uwigem-wikis.appspot.com",
// 	messagingSenderId: "131891776719",
// 	appId: "1:131891776719:web:0bf2382aec94dcdf"
// };
// firebase.initializeApp(firebaseConfig);
let firebase = null;
// firebase.auth().signInWithPopup(provider);
  1. Navigate to src\App.tsx
  2. Under the comment that says Comment out this in final build comment out the lines below like so:
{/** Comment out this in final build */}
// {pageTitle === "/Editor" &&
//   <ContentEditor
//     contentData={contentData}
//     currYear={currYear}
// />}

Building and Uploading

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. Run npm run build Note: If there are type errors when building, try setting the type of the contentData constant at the bottom of the src\components\_data\Data.ts file to any
  2. Navigate to the build folder and find static/js/main.js
  3. copy paste that into http://2020.igem.org/Template:Washington/JavaScript. (Note the capital S in JavaScript. This assumes that the CSS has already been uploaded)
  4. Save the changes, and the JavaScript should now be updated to use the included data instead of Firebase data. This means that future changes in the editor will not be visible unless this process is repeated with the new data, or the firebase editor is re-enabled.

Clone this wiki locally