• Stars
    star
    254
  • Rank 160,264 (Top 4 %)
  • Language
    JavaScript
  • Created about 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An Electrode application that showcases all of your components in a live demo

Electrode Explorer

An electrode application that allows you to view all the components in your organization, play with the components, read the component docs, view the different versions of the component, and more - All in your browser.
View The Live Demo

Prerequisites

  • node: ">=4.2.0"
  • npm: ">=3.0.0"
  • Github access token

Overview

This is a central place where you can view

  • demos of all the components under the organizations you specified
  • documentations of your components
  • dependencies your components have (dependencies)
  • other components/applications that depend on your components (usages)

There are 2 ways the components can update dynamically:

  1. Add github hooks to send POST requests to /api/update/{org}/{repoName} when a new tag is created
  2. Enable ./server/poll plugin to set up cron job that sends the POST requests every day

After the server receives the POST request, it will fetch the package.json file under yourGithubUrl/org/repoName, update data/orgs.json and data/{org}/{repoName}.json files. If there is a newer version, it will try to download the new component through npm (scripts/install-module.sh) after a waiting period, babel transpile, and webpack the demo module (scripts/post-install-module.sh).

To make the server update immediately or force an update, add a url parameter to the POST request, /api/update/{org}/{repoName}?updateNow=1.

This post processing script works well with all electrode components (meaning components using our archetype). If you have non-electrode components, you can modify your scripts/post-install-module.sh. See our wiki page for more details.

Config

// config/default.json
{
  "plugins": {
    "./server/poll": {
      "options": {
        "enable": true
      }
    }
  },

  "githubApi": {
    "version": "3.0.0",
    "pathPrefix": "/api/v3",
    "protocol": "https",
    "host": "github.com"
  },

  "ORGS": [
    // org/user names under which components will be included in the explorer
    // for example, put ["xxx", "yyy"] to include every repo under github.com/xxx and github.com/yyy
  ],

  "REPOS_USAGE_INCLUDE": [
    // consumers need to contain one of these substrings to be included in usages
    // for example, put ["react"] so consumers named /*react*/ will be included in usages
  ],

  "REPOS_USAGE_EXCLUDE": [
    // consumers containing any of these substrings won't be included in usages
    // for example, put ["training"] so consumers named /*training*/ will be excluded in usages
  ],

  "MODULE_PREFIXES_INCLUDE": [
    // only module names beginning with one of these strings will be included in dependencies
    // for example, put ["react"] so only modules with name starting with "react" will be included in dependencies
  ],

  "NPM_WAITING_TIME": 300000, // wait for 5 minutes before `npm install`

  "GHACCESS_TOKEN_NAME": "GHACCESS_TOKEN" // github token variable name, your token would be accessible via `process.env["GHACCESS_TOKEN"]`
}

Start server

First install dependencies

npm i

Export github access token or set it as an environment variable

export GHACCESS_TOKEN=YOUR_GITHUB_TOKEN

For development mode

gulp dev

or

GHACCESS_TOKEN=YOUR_GITHUB_TOKEN gulp dev

For production mode

gulp build

and

NODE_ENV=production node .

or

GHACCESS_TOKEN=YOUR_GITHUB_TOKEN NODE_ENV=production node .

Deploy

Since this is an electrode app, it can be deployed the same way as any other electrode app. Just remember to set your github token as an environment variable.

Learn more

Wish to learn more? Check our wiki page!

Built with ❀️ by Team Electrode @WalmartLabs.

More Repositories

1

electrode

Web applications with node.js and React
HTML
2,101
star
2

electrode-native

A platform to ease integration&delivery of React Native apps in existing mobile applications
TypeScript
725
star
3

electrode-io.github.io

The public website of the Electrode platform
HTML
336
star
4

electrode-react-ssr-caching

Optimize React SSR with profiling and component caching
JavaScript
316
star
5

electrode-electrify

Electrify is an webpack visualizer for analyzing webpack bundles.
JavaScript
230
star
6

electrode-server

Electrode's configurable web server using Hapi.js atop Node.js
JavaScript
224
star
7

electrode-ota-server

Electrode Over The Air Server for hot deployment of React Native and Cordova mobile apps
JavaScript
204
star
8

electrode-csrf-jwt

Stateless Cross-Site Request Forgery (CSRF) protection with JWT
JavaScript
126
star
9

above-the-fold-only-server-render

An Electrode component for optionally skipping server side render of components outside of Above the fold
JavaScript
117
star
10

electrode-confippet

node.js environment aware application configuration
TypeScript
108
star
11

isomorphic-loader

Webpack isomorphic loader tools to make Node require handle files like images for Server Side Rendering (SSR)
JavaScript
68
star
12

electrode-archetype-njs-module-dev

A WalmartLabs flavored NodeJS Module archetype
JavaScript
67
star
13

electrode-bundle-analyzer

Analyze your webpack deduped and minified bundle JS file.
JavaScript
66
star
14

electrode-webpack-reporter

A HTML based reporter for webpack dev server
JavaScript
59
star
15

electrode-gulp-helper

Helper functions for using gulp
JavaScript
59
star
16

electrode-check-dependencies

An Electrode module to verify component dependencies against a list
JavaScript
58
star
17

electrode-docgen

A custom metadata extractor and documentation generator for the Electrode framework
JavaScript
57
star
18

fynpo

πŸ› οΈπŸ“¦ a node.js monorepo manager
JavaScript
55
star
19

electrode-static-paths

Electrode server decor to serve static files
JavaScript
55
star
20

react-native-electrode-bridge

Electrode Native - Bridge
Java
44
star
21

xarc-run

npm run scripts concurrently and serially, and more.
JavaScript
42
star
22

memcache

Node.js memcached client with the most efficient ASCII protocol parser
TypeScript
37
star
23

electrode-ota-desktop

Electrode OTA Desktop Client
JavaScript
22
star
24

electrode-ota-ui

[Deprecated for electrode-ota-server/electrode-ota-ui] Electrode OTA Web/Client UI
JavaScript
17
star
25

ern-navigation

Electrode Native solution for React Native navigation
JavaScript
12
star
26

movies-reloaded-miniapp

Our new movie miniapp built on the Electrode Native Navigation.
JavaScript
10
star
27

car-buying-instructions

JavaScript
9
star
28

movielist-miniapp

Electrode Native - Movie List MiniApp (Getting Started)
Objective-C
8
star
29

fastify-server

Electrode using Fastify
TypeScript
6
star
30

moviedetails-miniapp

Electrode Native - Movie Details MiniApp (Getting Started)
JavaScript
6
star
31

electrode-keepalive

node.js HTTP agent with customized keep alive
JavaScript
6
star
32

kax

TypeScript
5
star
33

react-native-livebundle

LiveBundle Native Module
Java
3
star
34

livebundle

LiveBundle CLI
TypeScript
3
star
35

electrode-native-starter-manifest

Electrode Native - Starter Manifest
3
star
36

react-native-ernnavigation-api

Electrode Native - Navigation API (Getting Started)
Swift
3
star
37

electrode-native-manifest

Electrode Native - Master Manifest
Java
3
star
38

electrode-native-showcaseapp-android

Native application that showcases electrode native MiniApps and APIs.
Java
2
star
39

electrode-native-sample-cauldron

Sample Electrode Native Cauldron
2
star
40

fynpo-old

Supplement tools for using fyn with lerna
JavaScript
2
star
41

car-buying-service

mock service for car buying app
JavaScript
2
star
42

car-buying

A sample car buying app
JavaScript
2
star
43

ern-bundle-store

Electrode Native Bundle Store Server
TypeScript
2
star
44

electrode-native-website

The site and docs for Electrode Native
JavaScript
2
star
45

react-native-ernmovie-api

Electrode Native - Movie API (Getting Started)
Swift
2
star
46

ernnavigation-api-impl-native

Native implementation of ernnavigation-api
Objective-C
2
star
47

electrode-demo-app

Demo application generated by Electrode platform unmodified
JavaScript
1
star
48

react-native-ernmovie-api-impl

Objective-C
1
star
49

ern-sourcemap-store

Electrode Native sourcemap store server
TypeScript
1
star
50

electrode-native-binarystore

Electrode Native - Binary Store
JavaScript
1
star
51

ern-container-transformer-xcframework

Electrode Native XCFramework Container Transformer
Shell
1
star
52

ern-container-publisher-maven

Electrode Native Maven Container Publisher
TypeScript
1
star
53

resolve-alias

set virtual module aliases for resolve and require
JavaScript
1
star
54

ern-base-composite-starter

Electrode Native Base Composite Starter
JavaScript
1
star
55

electrode-native-showcaseapp-ios

Swift
1
star
56

react-native-ernmovie-api-impl-js

JavaScript
1
star