This project accompanies the Medium post:

How to Create a Navigation Bar With React-Router, Styled-Components, And Infrastructure-Components

Download/Clone this repository and run npm i

Simply use npm run build to build your app. Your package.json defines this command (scripts build src/index.tsx). As you can see, this points the entry-point of your app.

NOTE: Running the build-command adds further scripts to your package.json: ${webapp-id}, deploy-${env-name}, domain-${env-name}.

When you develop a React-App, you may want to see your changes directly. Use the script npm run ${stackname}. This starts the webpack-hot-middleware.

Open your the url localhost:3000 in a browser.

Your changes become effective once you reload the browser-page. Have a look at the output of your console to not miss any error messages.

If you specified an Environment in your app, the build command adds a script deploy-{env-name}. This command npm run deploy-{env-name} deploys your app to AWS. The script displays the url of your deployed app, e.g. http://{stackname}-{env-name}.s3-website-{region}.amazonaws.com

You must specify the credentials of a programmatic AWS account in your .env file, like:

AWS_ACCESS_KEY_ID=****
AWS_SECRET_ACCESS_KEY=****

Have a look at our documentation.

Infrastructure-Components are under active development. If you find a bug or need support of any kind, please have a look at our Spectrum-Chat.

Further, we frequently publish descriptions and tutorials on new features on Medium.com.