Overview

This is the repository for https://advocacy.mozilla.org

As of April 2016, there are three parts to the site.

Homepage and Open Web Fellows are an index.html file statically generated by a server at build time. This single index page then renders the requested page on the client side.

Encrypt Campaign doesn't use an html file and nothing is built on the server, instead the server generates the pages as requested and passed to the client. The result page is cached on the server in memory after the first request, so the next request is not generated again.

Getting Started

Clone a copy of the repository using something like git.

To get a local version of the site running, you'll need node 4 or higher installed on your local machine.

Build

To start local development, install and run the following commands:

$ cp sample.env .env
$ npm install
$ npm start

Develop Workflow

After successfully building and running the server, go to localhost:8080/

You can now start changing files in the /src directory, such that saving your changes and refreshing the browser will show your changes.

Files outside of /src require npm start to be rerun

Sitemap

/ -> /src/pages/home.js
/encrypt/ -> /src/pages/encrypt/index.js
/open-web-fellows/ -> /src/pages/open-web-fellows/overview.js
/open-web-fellows/info/ -> /src/pages/open-web-fellows/info.js
/open-web-fellows/fellows/ -> /src/pages/open-web-fellows/fellows.js

Source Structure

Running npm start is the entry point to build our code and run our server. All our npm scripts and npm dependencies are stored in package.json.

Our client side code is written in react and lives in /src. Our files are organized into two directories, /src/components/ and /src/pages/. Components are shared UI elements, like header and footer used to build pages.

We have an npm script that uses babel to compile the contents of /src from es6 to /dist as es5. These are built to run on the server and client.

We use webpack to package our client side files into /public, which is handled in webpack.config.js

We use react-router to handle the site structure, which live in /src/avocacy-main.js and /src/encrypt-main.js.

We use node version 4 or higher to run our server, which is handled in app.js.

"Encrypt" pages are handled a bit differently from the rest. The standard routes, and source, use /src/advocacy-main.js for pretty much all the generating and packaging of files, routes, and source. Encrypt uses /src/encrypt-app.js to package client side files, and uses /src/encrypt-main.js and /src/lib/react-server-rooute.js to handle server side rendering.