DEV Community

loading...
Cover image for a first look at amplify with vite

a first look at amplify with vite

ajcwebdev profile image anthony-campolo Updated on ・7 min read

AWS Amplify is a set of tools and services to help frontend web and mobile developers build scalable fullstack applications with AWS infrastructure that includes:

With these tools combined, Amplify has achieved a unique synecdoche¹ by creating their own opinionated version of AWS within AWS itself.

This tutorial will follow the Getting Started guide for React from the Amplify documentation, except we will be using Vite and the officially supported React template instead of create-react-app. This way the kids will know that I am, "with it."

Setup

The code for this article can be found on my GitHub.

Configure AWS CLI with aws configure

Make sure you have the AWS CLI installed and an AWS account. For general use, aws configure is recommended as the fastest way to set up your AWS CLI installation.

aws configure
Enter fullscreen mode Exit fullscreen mode

When you enter this command, the AWS CLI prompts you for four pieces of information:

  • Access key ID
  • Secret access key
  • AWS Region
  • Output format

Go to My Security Credentials to find your Access Key ID, Secret Access Key, and default region. You can leave the output format blank.

AWS Access Key ID: <YOUR_ACCESS_KEY_ID>
AWS Secret Access Key: <YOUR_SECRET_ACCESS_KEY>
Default region name: <YOUR_REGION_NAME>
Default output format [None]: 
Enter fullscreen mode Exit fullscreen mode

Install Amplify CLI

npm install -g @aws-amplify/cli
Enter fullscreen mode Exit fullscreen mode

Output:

----------------------------------------
Successfully installed the Amplify CLI
----------------------------------------

JavaScript Getting Started
https://docs.amplify.aws/start

Android Getting Started
https://docs.amplify.aws/start/q/integration/android

iOS Getting Started
https://docs.amplify.aws/start/q/integration/ios

Flutter Getting Started
https://docs.amplify.aws/start/q/integration/flutter

Amplify CLI collects anonymized usage data, which is
used to help understand how to improve the product.
If you don't wish to send anonymized Amplify CLI usage data
to AWS, run amplify configure --usage-data-off  to opt-out.

Learn more - https://docs.amplify.aws/cli/reference/usage-data

+ @aws-amplify/cli@4.50.2
added 1186 packages from 776 contributors in 79.825s
Enter fullscreen mode Exit fullscreen mode

Create React App

You need a React app, which means first you have to create one. You could do the sensible thing and use a tool literally called create-react-app, or you could listen to a random person on the internet and use this thing you've never heard of and have no idea how to pronounce. If you're not convinced you can refer to this blog post from the aforementioned random person on the internet.

Initialize project

Vite (French word for "fast", pronounced /vit/, rhymes with "street") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two parts:

  • A dev server with Hot Module Replacement (HMR)
  • A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production
yarn create @vitejs/app ajcwebdev-amplify --template react
Enter fullscreen mode Exit fullscreen mode

Output:

success Installed "@vitejs/create-app@2.2.5" with binaries:
      - create-app
      - cva

Scaffolding project in /Users/ajcwebdev/ajcwebdev-amplify...

Done. Now run:

  cd ajcwebdev-amplify
  yarn
  yarn dev

✨  Done in 2.18s.
Enter fullscreen mode Exit fullscreen mode

Start development server

cd ajcwebdev-amplify
yarn
yarn dev
Enter fullscreen mode Exit fullscreen mode
  vite v2.2.4 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://10.0.0.175:3000/

  ready in 668ms.
Enter fullscreen mode Exit fullscreen mode

01-create-vite-app

You could click the counter. Or you could not click the counter and instead live the rest of life wondering whether it actually would have incremented or not.

Project Structure

├── src
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── yarn.lock
Enter fullscreen mode Exit fullscreen mode

package.json

Our package.json includes scripts for starting the development server, building for production, and serving local previews of production builds.

{
  "name": "ajcwebdev-amplify",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react-refresh": "^1.3.1",
    "vite": "^2.2.3"
  }
}
Enter fullscreen mode Exit fullscreen mode

App component

// src/App.jsx

import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <header className="App-header">
        <img
          src={logo}
          className="App-logo"
          alt="logo"
        />

        <p>Hello Vite + React!</p>

        <p>
          <button onClick={() => setCount((count) => count + 1)}>
            count is: {count}
          </button>
        </p>

        <p>
          Edit <code>App.jsx</code> and save to test HMR updates.
        </p>

        <p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>

          {' | '}

          <a
            className="App-link"
            href="https://vitejs.dev/guide/features.html"
            target="_blank"
            rel="noopener noreferrer"
          >
            Vite Docs
          </a>
        </p>
      </header>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

Change stuff

// src/App.jsx

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img
          src={logo}
          className="App-logo"
          alt="logo"
        />

        <p>ajcwebdev</p>

        <p>Amplify + Vite</p>

        <p>
          <a
            className="App-link"
            href="https://dev.to/ajcwebdev"
            target="_blank"
            rel="noopener noreferrer"
          >
            Blog
          </a>

          {' | '}

          <a
            className="App-link"
            href="https://github.com/ajcwebdev"
            target="_blank"
            rel="noopener noreferrer"
          >
            GitHub
          </a>
        </p>
      </header>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

02-create-vite-app-edited

Initialize Amplify project with amplify init

To initialize a new Amplify project, run amplify init from the root directory of your frontend app.

amplify init
Enter fullscreen mode Exit fullscreen mode
? Enter a name for the project ajcwebdevamplify
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript

Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  yarn build
? Start Command: yarn dev

Using default provider  awscloudformation

? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
Enter fullscreen mode Exit fullscreen mode

Output:

CREATE_IN_PROGRESS
amplify-ajcwebdevamplify-dev-172320
AWS::CloudFormation::Stack - Sun May 09 2021 17:23:21

User Initiated             

CREATE_IN_PROGRESS
AuthRole
AWS::IAM::Role - Sun May 09 2021 17:23:26

CREATE_IN_PROGRESS
UnauthRole
AWS::IAM::Role - Sun May 09 2021 17:23:26

CREATE_IN_PROGRESS
DeploymentBucket
AWS::S3::Bucket - Sun May 09 2021 17:23:26

CREATE_IN_PROGRESS
AuthRole
AWS::IAM::Role - Sun May 09 2021 17:23:26

Resource creation Initiated

CREATE_IN_PROGRESS
UnauthRole
AWS::IAM::Role - Sun May 09 2021 17:23:26

Resource creation Initiated

CREATE_IN_PROGRESS
DeploymentBucket
AWS::S3::Bucket - Sun May 09 2021 17:23:27

Resource creation Initiated

CREATE_COMPLETE
UnauthRole
AWS::IAM::Role - Sun May 09 2021 17:23:41

CREATE_COMPLETE
AuthRole
AWS::IAM::Role - Sun May 09 2021 17:23:41

CREATE_COMPLETE
DeploymentBucket
AWS::S3::Bucket - Sun May 09 2021 17:23:48

CREATE_COMPLETE
amplify-ajcwebdevamplify-dev-172320
AWS::CloudFormation::Stack - Sun May 09 2021 17:23:50

✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.

Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!
Enter fullscreen mode Exit fullscreen mode

Deploy to hosting with CloudFront and S3

amplify add hosting
Enter fullscreen mode Exit fullscreen mode
? Select the plugin module to execute Amazon CloudFront and S3
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name ajcwebdevamplify-20210509181751-hostingbucket
? index doc for the website index.html
? error doc for the website index.html

You can now publish your app using the following command:
Command: amplify publish
Enter fullscreen mode Exit fullscreen mode
amplify publish
Enter fullscreen mode Exit fullscreen mode
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | Create    | awscloudformation |

? Are you sure you want to continue? Yes
Enter fullscreen mode Exit fullscreen mode

Output:

UPDATE_IN_PROGRESS
amplify-ajcwebdevamplify-dev-181429
AWS::CloudFormation::Stack Sun May 09 2021 18:18:10

User Initiated

CREATE_IN_PROGRESS
hostingS3AndCloudFront
AWS::CloudFormation::Stack Sun May 09 2021 18:18:15

CREATE_IN_PROGRESS
hostingS3AndCloudFront
AWS::CloudFormation::Stack Sun May 09 2021 18:18:16
Resource creation Initiated

CREATE_IN_PROGRESS
amplify-ajcwebdevamplify-dev-181429-hostingS3AndCloudFront-OTPFNWODIIBU
AWS::CloudFormation::Stack Sun May 09 2021 18:18:16

User Initiated

CREATE_IN_PROGRESS
S3Bucket
AWS::S3::Bucket Sun May 09 2021 18:18:20

CREATE_IN_PROGRESS
S3Bucket
AWS::S3::Bucket Sun May 09 2021 18:18:21

Resource creation Initiated

CREATE_COMPLETE
S3Bucket                                                                AWS::S3::Bucket Sun May 09 2021 18:18:44

CREATE_COMPLETE
amplify-ajcwebdevamplify-dev-181429-hostingS3AndCloudFront-OTPFNWODIIBU
AWS::CloudFormation::Stack Sun May 09 2021 18:18:45

CREATE_COMPLETE
hostingS3AndCloudFront
AWS::CloudFormation::Stack Sun May 09 2021 18:18:50

UPDATE_COMPLETE_CLEANUP_IN_PROGRESS
amplify-ajcwebdevamplify-dev-181429
AWS::CloudFormation::Stack Sun May 09 2021 18:18:52

UPDATE_COMPLETE
amplify-ajcwebdevamplify-dev-181429
AWS::CloudFormation::Stack Sun May 09 2021 18:18:53

All resources are updated in the cloud

Hosting endpoint:
http://ajcwebdevamplify-20210509181751-hostingbucket-dev.s3-website-us-west-1.amazonaws.com

yarn run v1.22.10
warning package.json: No license field
$ vite build
vite v2.2.4 building for production...
✓ 21 modules transformed.
dist/assets/favicon.17e50649.svg   1.49kb
dist/assets/logo.ecc203fb.svg      2.61kb
dist/index.html                    0.51kb
dist/assets/index.0673ce28.css     0.76kb / brotli: 0.40kb
dist/assets/index.e0cc5c52.js      1.32kb / brotli: 0.55kb
dist/assets/vendor.de62f314.js     127.23kb / brotli: 36.03kb
✨  Done in 1.87s.

frontend build command exited with code 0
Publish started for S3AndCloudFront
✔ Uploaded files successfully.
Your app is published successfully.

http://ajcwebdevamplify-20210509181751-hostingbucket-dev.s3-website-us-west-1.amazonaws.com
Enter fullscreen mode Exit fullscreen mode

You will then be taken to the very memorably named endpoint for your S3 bucket.

03-create-vite-app-hosted

[1] - wherein a part of something represents the whole, or vice versa.

Discussion (0)

Forem Open with the Forem app