ryanjyost

import React from "react";
import { Link } from "react-router-dom";
import ROUTES, { RenderRoutes } from "./routes";

function App() {
  return (
    <div style={{ display: "flex", height: "100vh", alignItems: "stretch" }}>
      <div style={{ flex: 0.3, backgroundColor: "#f2f2f2" }}>
        {displayRouteMenu(ROUTES)}
      </div>

ryanjyost

const ROUTES = [
  { path: "/", key: "ROOT", exact: true, component: () => <h1>Log in</h1> },
  {
    path: "/app",
    key: "APP",
    component: RenderRoutes, // here's the update
    routes: [
      {
        path: "/app",
        key: "APP_ROOT",

ryanjyost

/**
 * Use this component for any new section of routes (any config object that has a "routes" property
 */
export function RenderRoutes({ routes }) {
  return (
    <Switch>
      {routes.map((route, i) => {
        return <RouteWithSubRoutes key={route.key} {...route} />;
      })}
      <Route component={() => <h1>Not Found!</h1>} />

ryanjyost

import React from "react";
import { Route, Switch } from "react-router-dom"; // <-- New code

//...route configs don't change...
export default ROUTES;

/**
 * Render a route with potential sub routes
 * https://reacttraining.com/react-router/web/example/route-config
 */

ryanjyost

import React from "react";

const ROUTES = [
  { path: "/", key: "ROOT", exact: true, component: () => <h1>Log in</h1> },
  {
    path: "/app",
    key: "APP",
    component: () => <h1>App</h1>,
    routes: [
      {

ryanjyost

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/dashboard">
    <Dashboard />
  </Route>

ryanjyost

import React from "react";

function App() {
  return (
    <div style={{ display: "flex", height: "100vh", alignItems: "stretch" }}>
      <div style={{ flex: 0.3, backgroundColor: "#f2f2f2" }}>route menu</div>
      <div>content</div>
    </div>
  );
}

ryanjyost

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />

ryanjyost

const qs = require("qs");

module.exports = function(promise) {
  const normalized = {
    error: "Something went wrong",
    data: null,
    ok: false,
    original: null,
    status: null
  };

ryanjyost

# Create an S3 Bucket that hosts a React app
# Use AWS CLI to execute the file like the below snippet
# aws cloudformation deploy --template-file ./cloudformation_basic.yml --stack-name basic --parameter-overrides BucketName=<BUCKET_NAME>

AWSTemplateFormatVersion: 2010-09-09

Parameters: # params passed to "--parameter-overrides" in CLI
  BucketName:
    Description: Unique name for your bucket. This will be in the S3 url to your React app.
    Type: String