reframe

Web app

ghuser.io is a Reframe web app.

Table of Contents

• Run locally
• How is the code organized
  • Pages
  • React components
• Deploy the app online

Run locally

/reframe$ cd reframe/
/reframe$ npm install
/reframe$ npm run local
...
 ✔ Server running (for development)
     http://localhost:3000/ -> LandingPage
     http://localhost:3000/:username -> ProfilePage
     http://localhost:3000/logo -> LogoPage

You can now open e.g. http://localhost:3000/AurelienLourot in your browser.

How is the code organized

Pages

Each page is defined as a pages/*.config.js file. It connects a route/endpoint to a React component. The most important page ProfilePage for example connects any /:username URL to the Profile React component:

const ProfilePage = {
  route: '/:username',
  view: ({route: {args: {username}}}) => <Profile ... />
};

React components

Each React component is defined as a views/**/*.js file starting with a capital letter. Some components also have a special *.css stylesheet. The main component of a profile page is Profile and is implemented by the LeftPanel and RightPanel components.

NOTE: we're trying to keep ghuser's style as close as possible to GitHub's style.

Deploy the app online

We run the web app on AWS Lambda using Up. See How to deploy a Reframe web app on Up.

NOTE: this can only be done by the maintainers.

The scripts used to set up AWS IAM accordingly can be found here.