Skip to content

Commit 723e4d4

Browse files
jdillickjdillick
committed
Setup readme.
1 parent ff4b9f6 commit 723e4d4

File tree

3 files changed

+95
-52
lines changed

3 files changed

+95
-52
lines changed

‎Reactium.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
![](https://image.ibb.co/ee2WaG/atomic_reactor.png)
2+
3+
# Reactium
4+
5+
An opinionated framework for creating React + Redux apps.
6+
7+
[Reactium documentation](https://docs.reactium.io/)
8+
9+
## Quick Start
10+
11+
To run in development mode from your project directory for local development:
12+
13+
```
14+
$ npx reactium init
15+
$ npm run local
16+
```
17+
18+
## The Approach
19+
20+
Reactium follows Domain Drive Design (DDD) and aims to ease the creation of complex applications by connecting the related pieces of the software into an ever-evolving model.
21+
22+
DDD focuses on three core principles:
23+
24+
- Focus on the core domain and domain logic.
25+
- Base complex designs on models of the domain.
26+
- Constantly collaborate with domain experts, in order to improve the application model and resolve any emerging domain-related issues.
27+
28+
### Advantages of Domain Driven Design
29+
30+
- **Eases Communication:** With an early emphasis on establishing a common and ubiquitous language related to the domain model of the project, teams will often find communication throughout the entire development life cycle to be much easier. Typically, DDD will require less technical jargon when discussing aspects of the application, since the ubiquitous language established early on will likely define simpler terms to refer to those more technical aspects.
31+
- **Improves Flexibility:** Since DDD is based around modularity, nearly everything within the domain model will be based on an object and will, therefore, be quite encapsulated. This allows for various components, or even the entire system as a whole, to be altered and improved on a regular, continuous basis.
32+
- **Emphasizes Domain Over Interface:** Since DDD is the practice of building around the concepts of domain and what the domain experts within the project advise, DDD will often produce applications that are accurately suited for and representative of the domain at hand, as opposed to those applications which emphasize the UI/UX first and foremost. While an obvious balance is required, the focus on domain means that a DDD approach can produce a product that resonates well with the audience associated with that domain.
33+
- **Encourages Iterative Practices:** DDD practices strongly rely on constant iteration and continuous integration in order to build a malleable project that can adjust itself when necessary. Some organizations may have trouble with these practices, particularly if their past experience is largely tied to less-flexible development models, such as the waterfall model or the like.
34+
35+
## Styling
36+
37+
Reactium takes the approach of **NOT** bundling CSS in JS.
38+
39+
There are a many reasons why, but the most important ones to us are:
40+
41+
- Traditional styling allows you to declare which style wins very clearly and easily.
42+
- Bundling the styles as a separate file allow for easy holistic replacement.
43+
- Easy delivery of the styles to a CDN or other resource management tool.
44+
- Faster Webpack compilation.
45+
46+
## Reactium Features
47+
48+
- **Fast Local Development Workflow:** Javascript tooling is hard, laborious, and annoying. We've spent a lot of time working through dozens of _"what if..."_ scenarios to deliver a minimal pain dev workflow!
49+
- **Built-in Design System:** No need to have a separate design system like Pattern Lab or Storybook. [Learn more](https://github.com/Atomic-Reactor/Reactium/blob/master/markdown/design-system.md).
50+
- **Robust Command Line Interface:** Reactium heavily relies on boiler-plated code to normalize and ease the dev workflow. Creating a component or a design system element can be done with the stroke of a few keys. No need to memorize all the commands either, you can use `--flags` or follow prompts. You can even customize the CLI by replacing or creating your own commands. [Learn more](https://www.npmjs.com/package/@atomic-reactor/cli).
51+
- **Easy Deployment:** Reactium creates a Node server for both front-end and server side rendering making it easy to deploy to the host of your choice. We even have a docker setup included for you dev-opers.
52+
- **Single Page App or Isolated Component Development:** Build anything from a full website to a single component and package for distribution.
53+
- **Built-in React Router Support**: Build routed websites in a single application with no additional setup. Learn more about [React Router](https://reacttraining.com/react-router/web/guides/quick-start)
54+
- **Plugin Architecture**: Registered components, rendering Zone components, and run-time extensibility!

‎reactium_modules/@reactium/graphql/reactium-boot.cjs

+16-6
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,29 @@ const { Enums } = ReactiumBoot;
44

55
const graphqlProxyPath = process.env.GRAPHQL_PROXY_URL || '/graphql';
66
const playgroundURL = process.env.GRAPHQL_PLAYGROUND_URL || '/playground';
7-
const playgroundEnabled = process.env.GRAPHQL_PLAYGROUND === 'on' || process.env.NODE_ENV === 'development';
8-
;
7+
const playgroundEnabled =
8+
process.env.GRAPHQL_PLAYGROUND_ENABLED === 'on' ||
9+
process.env.NODE_ENV === 'development';
910
const proxyEnabled = process.env.GRAPHQL_PROXY_ENABLED !== 'off';
1011
const graphqlAPI =
1112
process.env.GRAPHQL_URL || `http://127.0.0.1:4000${graphqlProxyPath}`;
1213
const logLevel = process.env.DEBUG === 'on' ? 'debug' : 'error';
1314

1415
BOOT('GraphQL Module for Reactium...');
1516
BOOT('GraphQL API:', graphqlAPI);
16-
DEBUG('Set GraphQL API URL with GRAPHQL_URL environment variable (defaults to http://127.0.0.1:4000/graphql)');
17+
DEBUG(
18+
'Set GraphQL API URL with GRAPHQL_URL environment variable (defaults to http://127.0.0.1:4000/graphql)',
19+
);
1720

1821
BOOT('GraphQL Proxy:', proxyEnabled ? graphqlProxyPath : 'disabled');
19-
DEBUG('Set GraphQL Proxy URL with GRAPHQL_PROXY_URL environment variable. Disable with GRAPHQL_PROXY_ENABLED=off (defaults to /graphql)');
22+
DEBUG(
23+
'Set GraphQL Proxy URL with GRAPHQL_PROXY_URL environment variable. Disable with GRAPHQL_PROXY_ENABLED=off (defaults to /graphql)',
24+
);
2025

2126
BOOT('GraphQL Playground:', playgroundEnabled ? playgroundURL : 'disabled');
22-
DEBUG('Set GraphQL Playground URL with GRAPHQL_PLAYGROUND_URL environment variable. Disable with GRAPHQL_PLAYGROUND=off (default in production)');
27+
DEBUG(
28+
'Set GraphQL Playground URL with GRAPHQL_PLAYGROUND_URL environment variable. Disable with GRAPHQL_PLAYGROUND=off (default in production)',
29+
);
2330

2431
ReactiumBoot.Hook.registerSync(
2532
'Server.AppGlobals',
@@ -60,7 +67,10 @@ if (playgroundEnabled && graphqlAPI) {
6067
const playgroundMiddleware =
6168
require('graphql-playground-middleware-express').default;
6269
const Router = express.Router();
63-
Router.get(playgroundURL, playgroundMiddleware({ endpoint: graphqlProxyPath }));
70+
Router.get(
71+
playgroundURL,
72+
playgroundMiddleware({ endpoint: graphqlProxyPath }),
73+
);
6474

6575
ReactiumBoot.Server.Middleware.register('graphql-playground', {
6676
name: 'graphql-playground',

‎readme.md

+25-46
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,33 @@
1-
![](https://image.ibb.co/ee2WaG/atomic_reactor.png)
1+
# Reactium GraphQL Plugin
22

3-
# Reactium
3+
Provides an Apollo GraphQL client on Reactium.GraphQL singleton in Reactium project.
44

5-
An opinionated framework for creating React + Redux apps.
5+
## Install
66

7-
[Reactium documentation](https://docs.reactium.io/)
7+
`npx reactium install @reactium/graphql`
88

9-
## Quick Start
9+
## Configuration
1010

11-
To run in development mode from your project directory for local development:
11+
- **GraphQL Playground** - Enabled by default in local development, disabled by default in production environment. To set the playground URL **(Defaults to `/playground`)**, set the environment variable `GRAPHQL_PLAYGROUND_URL`
12+
13+
```bash
14+
export GRAPHQL_PLAYGROUND_URL="/my-playground"
15+
```
1216

13-
```
14-
$ npx reactium init
15-
$ npm run local
16-
```
17+
To enable playground in production, set `GRAPHQL_PLAYGROUND_ENABLED=on`
18+
- **GraphQL Server URL** - To set the GraphQL server URL (defaults to localhost:4000/graphql):
19+
```bash
20+
export GRAPHQL_URL="https://my.graphql.host/graphql"
21+
```
22+
- **GraphQL Proxy** - Enabled by default, Reactium will proxy `/graphql` to the GraphQL Server URL (See above). If this behavior is disabled, the Apollo Client will use your server URL directly (You will be responsible for setting up your GraphQL Server for [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)). To disable proxy behavior:
23+
24+
```bash
25+
export GRAPHQL_PROXY_ENABLED="off"
26+
```
1727

18-
## The Approach
28+
The default proxy URL (provided by http-proxy middleware) for your GraphQL api is `/graphql`. To change this:
1929

20-
Reactium follows Domain Drive Design (DDD) and aims to ease the creation of complex applications by connecting the related pieces of the software into an ever-evolving model.
21-
22-
DDD focuses on three core principles:
23-
24-
- Focus on the core domain and domain logic.
25-
- Base complex designs on models of the domain.
26-
- Constantly collaborate with domain experts, in order to improve the application model and resolve any emerging domain-related issues.
27-
28-
### Advantages of Domain Driven Design
29-
30-
- **Eases Communication:** With an early emphasis on establishing a common and ubiquitous language related to the domain model of the project, teams will often find communication throughout the entire development life cycle to be much easier. Typically, DDD will require less technical jargon when discussing aspects of the application, since the ubiquitous language established early on will likely define simpler terms to refer to those more technical aspects.
31-
- **Improves Flexibility:** Since DDD is based around modularity, nearly everything within the domain model will be based on an object and will, therefore, be quite encapsulated. This allows for various components, or even the entire system as a whole, to be altered and improved on a regular, continuous basis.
32-
- **Emphasizes Domain Over Interface:** Since DDD is the practice of building around the concepts of domain and what the domain experts within the project advise, DDD will often produce applications that are accurately suited for and representative of the domain at hand, as opposed to those applications which emphasize the UI/UX first and foremost. While an obvious balance is required, the focus on domain means that a DDD approach can produce a product that resonates well with the audience associated with that domain.
33-
- **Encourages Iterative Practices:** DDD practices strongly rely on constant iteration and continuous integration in order to build a malleable project that can adjust itself when necessary. Some organizations may have trouble with these practices, particularly if their past experience is largely tied to less-flexible development models, such as the waterfall model or the like.
34-
35-
## Styling
36-
37-
Reactium takes the approach of **NOT** bundling CSS in JS.
38-
39-
There are a many reasons why, but the most important ones to us are:
40-
41-
- Traditional styling allows you to declare which style wins very clearly and easily.
42-
- Bundling the styles as a separate file allow for easy holistic replacement.
43-
- Easy delivery of the styles to a CDN or other resource management tool.
44-
- Faster Webpack compilation.
45-
46-
## Reactium Features
47-
48-
- **Fast Local Development Workflow:** Javascript tooling is hard, laborious, and annoying. We've spent a lot of time working through dozens of _"what if..."_ scenarios to deliver a minimal pain dev workflow!
49-
- **Built-in Design System:** No need to have a separate design system like Pattern Lab or Storybook. [Learn more](https://github.com/Atomic-Reactor/Reactium/blob/master/markdown/design-system.md).
50-
- **Robust Command Line Interface:** Reactium heavily relies on boiler-plated code to normalize and ease the dev workflow. Creating a component or a design system element can be done with the stroke of a few keys. No need to memorize all the commands either, you can use `--flags` or follow prompts. You can even customize the CLI by replacing or creating your own commands. [Learn more](https://www.npmjs.com/package/@atomic-reactor/cli).
51-
- **Easy Deployment:** Reactium creates a Node server for both front-end and server side rendering making it easy to deploy to the host of your choice. We even have a docker setup included for you dev-opers.
52-
- **Single Page App or Isolated Component Development:** Build anything from a full website to a single component and package for distribution.
53-
- **Built-in React Router Support**: Build routed websites in a single application with no additional setup. Learn more about [React Router](https://reacttraining.com/react-router/web/guides/quick-start)
54-
- **Plugin Architecture**: Registered components, rendering Zone components, and run-time extensibility!
30+
```bash
31+
export GRAPHQL_PROXY_URL="/my-graphql-api"
32+
```
33+
> Note: Changing this proxy URL will also change the default GraphQL Server URL (unless you have set it with `GRAPHQL_URL`)

0 commit comments

Comments
 (0)