Develop and Publish a React Web App on the Cloud in Minutes with AWS Cloud9, AWS Amplify and AWS Mobile CLI with Authentication and Private Images

Ed Lima
Ed Lima
May 23, 2018 · 4 min read
> nvm i v8
> npm install -g create-react-app
> npm install -g awsmobile-cli
> create-react-app cloud9-reactapp
> cd cloud9-reactapp
> npm install aws-amplify aws-amplify-react
> awsmobile init
awsmobile push
import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
import Amplify from ‘aws-amplify’;
import { withAuthenticator, S3Album } from ‘aws-amplify-react’;
import aws_exports from ‘./aws-exports’;
Amplify.configure(aws_exports);function AppName(props){
return (<h2>{props.name}</h2>);
}
class App extends Component {
render() {
console.log(“Look ma, Developer console inception!”)
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<AppName name = “My S3 Album”/>
</header>
<br/>
<S3Album level=”private” path=”pics/” picker />
</div>
);
}
}
export default withAuthenticator(App, {includeGreetings: true});
awsmobile run
awsmobile publish

Ed Lima

Written by

Ed Lima

Solutions Architect @AWScloud - Working hard. Having fun. Making history. (Opinions. My. Own.)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade