React App Example Accelerator

[cpyle0819]

The user story

As a code example writer, I want tools for accelerating the creation of React app examples so that I can focus less on client side code and more on service code.

I know this is done when:

• I don't have to make a new react app from scratch every time I make a new example
• I don't have copy/paste/modify an existing example
• I can quickly generate new pages and navigation entries

Suggestion

• a single base app that allows 'plugins' to be registered
• each plugin would consist of some configuration and a main component containing the working service example
• a package repository for the plugins, so users can select the examples they want to run a la carte

Example run commands:

git clone [email protected]:awsdocs/aws-doc-sdk-examples.git
cd resources/clients/react/base-app
yarn add @awsdocs/front-end-iam @awsdocs/front-end-lambda
yarn start

Epic link (recommended)

No response

[DavidSouther]

Can we elaborate a bit on what the plug&play aspect of the plugins looks like?

Do we envision one single page app with all the scenario pages? Will users be able to choose at startup which plugins are included? Or would that be controlled by adding modules to the workspace, and having discovery be implicit?

Making this plugin based doesn't eliminate the first block of bullet points, it only moves them down a layer (instead of making an app, I need to make or modify a plugin). What's the difference in size between a plugin and an app?

[cpyle0819]

Hey @DavidSouther , all great observations. My current thought is more or less what you described. There would be a 'base app' which would allow you to declare a list of compatible plugins that would provide an entry in the navigation tree and a component for rendering an example. The plugins would ideally be node packages hosted someplace or another and a user would be able to install a plugin as a package and declare it in state somewhere.

The plugin would be slightly less cumbersome to develop than a full app. Rather than having to copy/paste an existing app or build one from scratch, you could just build out your component within the base app and then publish it. Some of the time saved there would likely be offset with the steps to build and publish a package though.

A lot of the benefit here would go to the customer. They could pick and choose which examples to install rather than having to load up a monster just to see 1 or 2 examples.

[DavidSouther]

They could pick and choose which examples to install rather than having to load up a monster just to see 1 or 2 examples.

This is the core of what we want, right? Can we sketch out what the onboarding experience will look like? EG: Pre-write the command line session. Something like...

npm init @awsdocs/front-end front-end-runner
cd front-end-runner
npm install \
  @awsdocs/front-end-iam \
  @awsdocs/front-end-lambda \
  @awsdocs/font-end-scenario-movies
npm start

[cpyle0819]

Probably something like:

git clone [email protected]:awsdocs/aws-doc-sdk-examples.git
cd resources/clients/react/base-app
yarn add @awsdocs/front-end-iam @awsdocs/front-end-lambda
yarn start

[DavidSouther]

What about keeping it in a monorepo, as this:

git --depth=1 clone [email protected]:awsdocs/aws-doc-sdk-examples.git
cd aws-doc-sdk-examples/resources/clients/react/base-app/plugins
npm link ../front-end/iam ../front-end/lambda
cd ..
npm start

Now, all plugins are in plugins/package.json::dependencies, and that is itself the registry for current plugins?