React App Example Accelerator

awsdocs / aws-doc-sdk-examples

Welcome to the AWS Code Examples Repository. This repo contains code examples used in the AWS documentation, AWS SDK Developer Guides, and more. For more information, see the Readme.md file below.

Apache License 2.0

9.64k stars 5.66k forks source link

React App Example Accelerator #3581

Closed cpyle0819 closed 2 years ago

cpyle0819 commented 2 years ago

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 git@github.com: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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Probably something like:

git clone git@github.com: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 commented 2 years ago

What about keeping it in a monorepo, as this:

git --depth=1 clone git@github.com: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?