THIS IS JUST A PRESONAL DEV LOG React startをDockerで 前提 ## stage 3 - Create React App の npm start で React を起動する Dockerfile を作り、React コンテナを起動できること - Next.js を起動する Dockerfile を作り、Next.js コンテナを起動できること ## stage 4 - Docker Compose とは何か理解し説明できること - Docker Compose を用いてデータベースを使うアプリケーションを起動できること (例: Laravel, Ruby on Rails, Nest.js, etc.) これの stage 3 を達成するためにやる。 Local Project作成 npm init react-app docker-react --use-npm npx: installed 98 in 5.736s npx create-react-app ではなくnpm init react-app AppNameで作成する create-react-appでできるものと同じだった。 Remote GitHub Project 連携 GitHubでdocker-reactのrepository作成。 git remote add origin git@github.com:kaede0902/docker-react.git remote origin にkaede0902/docker-reactを設定。 git status On branch master No commits yet Untracked files: (use "git add <file>..." to include in what will be committed) .gitignore README.md package-lock.json package.json public/ src/ .gitignoreを先にcommit 他をreact initとしてcommit そしてpush Dockerfile 次にDockerfileをかく Dockerfile FROM node:13.12.12.0-alpine WORKDIR /app ENV PATH /app/node_modules/.bin:$PATH COPY package.json COPY package-lock.json RUN npm install --silent RUN npm install react-scripts@3.4.1 -g --silent COPY . ./ CMD ["npm", "start"] Dockerにnode13.12をpullしてきて 作業ディレクトリとしてDockerに /app を作成 Dockerの環境のPATHを /app/node_modules/.bin に設定 package(-lock).json を rootの./にMacから複製してDockerに作成。 Dockerにpackage.jsonに沿って依存関係をinstall package.jsonに書いてなかったreact-script@3.4.1をinstall COPY . ./ これはよくわからない、おまじない？？？ . を ./ にcopyするってなんだろう、日報の質問に書く docker build 書いてある通りにアルパインを使ってのエラー docker build -t docker-react:dev . Step 1/9 : FROM node:13.12.12.0-alpine manifest for node:13.12.12.0-alpine not found: manifest unknown: manifest unknown node 13.12のmanifest unknownとでた。 ググるとこれにあたる。 https://hub.docker.com/r/mhart/alpine-node/ この13.12...alpine っていうのがmhartさんの作ったversionで、13は廃止されて12か14を使えってことなのかな？ nodeだけでやった時には FROM node:12 だけだしこれでやる Alpineの正体。減量モデル 教えていた堕胎。 node:-alpine This image is based on the popular Alpine Linux project, available in the alpine official image. Alpine Linux is much smaller than most distribution base images (~5MB), and thus leads to much slimmer images in general. なお alpineは軽くするためにglibcといったLinuxの基盤中の基盤のライブラリを差し替えてたりする といった独自エラーの原因になることがあるので気をつけたほうがよさそう。 でも 本番で使ってるDockerでもかなりスリム化頑張ってやってる とのことなのでじゃあnode:12だけ使っていればいいやということにはならない Imageですけど、基本的には公式のイメージにalpineベースのものがある場合が多い(言語環境とかフレームワークとか)ので、セキュリティ的な意味でもそれを使うのが吉です ただ今回はnode:12(公式イメージ？)使います！！！ docker run docker run \ -it \ --rm \ -v ${PWD}:/app \ -v /app/node_modules \ -p 3001:3000 \ -e CHOKIDAR_USEPOLLING=true \ docker-react:dev を実行 optionは-pしか理解してないです！ -rmは実行後のimage 削除？ Compiled successfully! You can now view docker-react in the browser. Local: http://localhost:3000 On Your Network: http://172.17.0.2:3000 Note that the development build is not optimized. To create a production build, use npm run build. と出るが、実際 localhost3000 にアクセスしても This site can’t be reachedlocalhost refused to connect. Try: Checking the connection Checking the proxy and the firewall ERR_CONNECTION_REFUSED localhost 3001 にアクセスすればReactが動いている docker runで出ている表示はDocker側のサーバーの情報らしい。 確かに見ているのはReactがいうとおりlocalだが、それはDockerのlocalだった！！！ 別のペインでlorem50をぶち込んで保存されたら即座にcompileされて反映されたのを確認！！！ヨシ！！ コンテナ間の通信ではEXPOSE 必要 ナシ！！！ -p 3001:3000 はMac:Docker だった！！ XXXX:YYYY と指定したならば、Mac の localhost:XXXX がコンテナのポート YYYY に繋がるということですね。 既に説明されていたっ 次は Next.js を起動する Dockerfile を作り、Next.js コンテナを起動できること します

React Nativeの学習中にFontAwesomeのアイコンを使用するやり方が若干めんどくさかったので、
メモとして残しておく

ライブラリのインストール

# expo-fontのインストール 
npm install expo-font --save

FontAwesomeのサイトから使用するアイコンをダウンロード

公式サイト
FontAwesome.com

①Start For Freeをクリック

②画面を下にスクロールしてdownloadをクリック

③Download Font Awesome Free for the Webをクリック

④ダウンロードしたwebfontsを自分のproject/assets/fontsの配下に置く

※今回はfa-solid-900.ttfを使用する

使用するアイコンを決める

①公式サイトのSearch Iconsで使用したいアイコンを検索する

②使用するアイコンのユニコードをコピーする

※今回だとf062

実装

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import * as Font from 'expo-font';
import fontAwesome from '../../assets/fonts/fa-solid-900.ttf';

export default class App extends React.Component {
  // fontAwesomeのLoad 
  componentDidMount() {
    Font.loadAsync({
      FontAwesome: fontAwesome,
    });

  render() {
    return (
      <View style={styles.container}>
        <Text>
          // \u + 先ほどコピーしたユニコードにする
          {'\uf062'}
        </Text>
      </View>
    );
  }
}

// 省略

補足

これで一応表示はできるが、実際はLoadをasync awaitで待ったり、
ユニコードを直接指定するのではなく、expo/vector-iconsを使って名前を指定したりするけど
とりあえず今回は表示まで。。

aws Amplify Cognito + Reactで認証の実装をしていた時に遭遇したので共有しておきます。

本題

Cognito + Reactの情報を探していると、withAuthenticatorは以下のように、'aws-amplify-react'からインポートしている情報が殆どでした。

App.js

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure(awsconfig);

function App() {
  return (
    ...
  );
}

export default withAuthenticator(App); 

しかし、このままログイン画面を表示すると

このようにスタイリングが反映されていないものになります。

対処法

こちらの公式ドキュメントにあるように'@aws-amplify/ui-react'からインポートしてあげましょう。

  yarn add @aws-amplify/ui-react

App.js

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
// '@aws-amplify/ui-react'に変更
import { withAuthenticator } from "@aws-amplify/ui-react";

Amplify.configure(awsconfig);

function App() {
  return (
    ...
  );
}

export default withAuthenticator(App); 

表示されるようになりました。

UI Componentsが新しいバージョンになったため@aws-amplify/ui-<framework>を使うようにしましょう。

リンク

Amplify Framework announces new, rearchitected UI Component and modular JavaScript libraries

内容まとめ

gatsby developで以下のエラーが出て動かない

Error: EBADF: bad file descriptor, uv_pipe_open
    at Object._forkChild (child_process.js:122:5)
    at setupChildProcessIpcChannel (internal/bootstrap/pre_execution.js:329:30)
    at prepareMainThreadExecution (internal/bootstrap/pre_execution.js:54:3)
    at internal/main/run_main_module.js:7:1 {
  errno: -4083,
  code: 'EBADF',
  syscall: 'uv_pipe_open'
}

環境

• win10
• node 14.4.0
• npm 6.14.5

gatsby-cliのインストール

$ npm i -g gatsby-cli

バージョンの確認

$ gatsby --version
Gatsby CLI version: 2.12.60

新規サイトの作成

$ gatsby new gatsby-site

ローカルサーバーの立ち上げ

以下のエラーでストップする

$ cd ./gatsby-site
$ gatsby develop

child_process.js:122
  p.open(fd);
    ^

Error: EBADF: bad file descriptor, uv_pipe_open
    at Object._forkChild (child_process.js:122:5)
    at setupChildProcessIpcChannel (internal/bootstrap/pre_execution.js:329:30)
    at prepareMainThreadExecution (internal/bootstrap/pre_execution.js:54:3)
    at internal/main/run_main_module.js:7:1 {
  errno: -4083,
  code: 'EBADF',
  syscall: 'uv_pipe_open'
}

BuildコマンドやServeコマンドは実行可能

$ gatsby build
$ gatsby serve

解決方法

• 直接の原因が分からなかった
• 同じPCで動いている別のGatsbyサイトがあった

上記から、ひとまずパッケージのバージョンを合わせることで解決

...
"dependencies": {
    "gatsby": "^2.24.2", -> "^2.20.12"
    "react": "^16.13.1", -> "^16.12.0"
    "react-dom": "^16.13.1" -> "^16.12.0"
},
"devDependencies": {
    "prettier": "2.0.5" -> "2.0.4"
},
...

Laravel + React シンプルなTodoアプリ(アーキテクチャ設計)

構成

• Laravel: CRUD API（updateは未実装）
• React: フォーム送信機能

Laravel環境構築

• Laravel 5.8
• React
• VirtialBox
• Vagrant
• Macの場合、Xcode、Homeblue必須

Laravel環境構築 チートシート
この記事内のvagrant@homestead:~$ cd codeまでおこなってください。
Laravelデータは作成した方を入れるのでデフォルトデータはクローンしなくて大丈夫です。

GitHubデータをクローン

どこでもいいのでデータクローン。
使うのは中身のファイルです。

# 別ウィンドウでターミナルを立ち上げて(コマンド+T)
$ cd Desktop
$ git clone https://github.com/dai-570415/laravel-react-example.git

クローンできたら
中身のファイル一式を「/Laravelファイル名/code/」ディレクトリに直接移動

# Laravelプロジェクト側

# 依存関係インストール
vagrant@homestead:~$ npm install
# テーブル生成
vagrant@homestead:~$ php artisan migrate
# React監視
vagrant@homestead:~$ npm run watch-poll

こちらで無事表示できたかと思います。

中身の説明はGit Hubにまとめましたので、そちらからみてください。
Git Hub

はじめに

Apollo Client 3がリリースされました。バージョン2の時と比べて、特にローカルのステート管理周辺が改善された印象です。今回はtypePoliciesとReactive Variableという機能のご紹介します。

typePolicies

ローカルのキャッシュ（Apollo ClientのInMemoryCacheと呼ばれる）において、GraphQLスキーマの各タイプをどう扱うかをtypePoliciesで定義できるようになりました。また、バージョン2まで@clientとローカルリゾルバで行っていた同様の処理を扱うことができます（AC3からLocal Resolverはdeprecatedとなっています）。

呼び出し時（read）

const cache = new InMemoryCache({
  typePolicies: {
    Person: {
      fields: {
        name: {
          read(name) {
            return name.toUpperCase();
          }
        }
      },
    },
  },
})

// クエリの例
export const GET_PERSON = gql`
  query getPersion($id: String!) {
    person(id: $id) {
      id
      name
      age   
    }
  }
`

レンダーされるnameが大文字に。

更新時（merge）

const cache = new InMemoryCache({
  typePolicies: {
    Agenda: {
      fields: {
        tasks: {
          merge(existing = [], incoming: any[]) {
            return [...existing, ...incoming];
          },
        },
      },
    },
  },
})

上記はキャッシュに存在する配列とサーバーから送られる配列の値をマージする例。

Reactive Variable

上記typePoliciesのreadからReactive Variableを参照すれば、Reactive Variableを更新することでキャッシュが返す値を更新することが可能。

import { makeVar } from '@apollo/client'

const cartItems = makeVar([])

// 値のセット
cartItems([100, 101, 102])

// 値の取得
const currentCartItems = cartItems()

まとめ

今回はApollo Client 3で追加されたtypePoliciesとReactive Variableを紹介しました。サンプルはこちら。

References

• https://www.apollographql.com/blog/announcing-the-release-of-apollo-client-3-0/

初めに

この記事はQitta夏祭りのテーマである「〇〇言語のみで△△アプリを作るなら？」に関連した内容です。
筆者は5年間ほぼバックエンド＋jQueryというレガシーマンで、近代JavaScriptの環境構築の難易度に挫折したのでKotlinを使ってフロントエンドをやってみました。
同じように入門してみたい方がいらっしゃれば参考になるといいなぁと思います。
暇潰しに読んでいただければ幸いです。

この記事の目次と成果物

作ったものはこんなTodoListです。全然できてない
https://github.com/mamoru12150927/festivalFrontend
この記事は以下の順に進みます。

• Kotlinとは？
• Reactとは？
• 環境構築
• 画面を作る
• 終わりに&次回予告

全てを読むと、一応同じものが作れるはずです。

Kotlinとは？

googleとoracleのゴタゴタで一躍有名になった静的型付け・オブジェクト指向の言語です。この言語1つでスマホアプリからデスクトップアプリまで何でも作れてしまうのが大きな特徴です。

言語の特性としては歴史あるJavaの思想を継承しつつうまく弱点を解消したPostJavaとも言える言語です。※JavaにはJavaの良さがあります。

今回はそんなマルチプレイヤー、Kotlinが主役です！

Reactとは？

もはや言語仕様がいい方に変わりすぎたJavaScriptのViewフレームワークで、現在のトップシェアを誇ります。
パーツ単位で画面を構成するコンポーネント指向という思想によりコードの再利用性を高く保つことができ、Reactコードの中にHTMLを書く記法のおかげでHTMLとRender()関数さえ知っていればとりあえず書き始められる、敷居の低いが使いこなすのは難しい(と感じる)優れたフレームワークです。
今回はKotlinで書いたコードをJavaScriptに変換するトランスパイルという仕組みを用いて利用します。

環境構築

この見出しでインストール・導入するものは以下です。

• JDK8
• IntelliJ IDEA コミュニティ版
• Node.js

JDK8のインストール

JDK(Java Developer Kit)はJavaの開発に使うものをひとまとめにしたものでKotlinの実行環境であるJVM(Java virtual machine)もこの中に入っています。後述するIntelliJでもインストールできますが今回は普通にインストールします。

JDKには

• Oracleが提供している有償だがサポートが有るOracle JDK
• オープンソースで無償だがサポートのないOpen JDK

の2種類がありますが、今回はOpen JDKを使います。
openjdkのダウンロードサイトから,
RI Binaries (build 1.8.0_41-b04)欄にあるOSに合わせたものをダウンロードし任意のディレクトリに解凍します。（筆者はC:\Java\）にしました。

解凍が完了したらコントロールパネルを開いて「システム環境変数の編集」を選択し、「システム環境変数」欄に以下の値を追加します。

変数名：JAVA_HOME、値：解凍先ディレクトリ\JDK(筆者ならc:\Java\JDK名)
変数名：Path、値：%JAVA_HOME%\bin

これでJDKのインストールは完了です。お疲れさまでした。

IntelliJ IDEA コミュニティ版のインストール

IntelliJ IDEAはKotlinと同じ開発元であるJetbrainsが開発しているIDE(統合開発環境)です。JVM系言語での使用においてはかなり使いやすい上、Kotlinはほぼこれしか選択肢がないようにも思います。。。
IntelliJ IDEAのダウンロードサイトからコミュニティ版を選択しインストーラーをダウンロード、実行します。

• Create Desktop Shortcut(デスクトップにショートカットを作る)
• Update context menu(フォルダをIntelliJで開けるようにする)

にのみチェックを付けて後はNext連打でインストールを完了させましょう！

日本語化

デフォルトでは英語なので日本語化しましょう！
Pleiadesの日本語化パッチのダウンロードサイトからOSに合ったものをダウンロードし解凍します。
解凍したフォルダの中にあるsetup.exeを実行すると以下のような画面が表示されます。

「日本語化するアプリケーション」欄にIntelliJの実行ファイル（idea or idea64.exe）を指定して「日本語化する」ボタンをクリックすると次回起動時以降日本語化されます。

Node.jsのインストール

Node.jsはJavaScriptの地位をここまで押し上げた１つであり、サーバサイドのJavaScript実行を可能とします。それだけでなく色々便利な機能を追加しています。
今回はNPMというフロントエンドでよく使われるパッケージマネージャのみを利用しますが、Node.jsをインストールするのが手っ取り早い為インストールします。
Node.jsのダウンロードサイトより推奨版をダウンロードし実行して下さい。こちらはNext連打でインストール完了です！

ここまでで準備はOkです！死した私とこれから一緒にコーディングしていきましょう！

画面を作る

ここまでお付き合いありがとうございます。それではコーディングしていきましょう。
まずは作業ディレクトリを一つ作成し、IntelliJ開いて下さい。
下のターミナルを開いて以下のコマンドを入力。プロジェクトの雛形を作っていきましょう！

npx create-react-kotlin-app プロジェクト名
筆者の場合；npx create-react-kotlin-app frontend

これは面倒な設定を一切排除しすぐコーディングができるような雛形を作ってくれるコマンドです。
プロジェクト名のディレクトリが作成されたのでそのディレクトリに移動してから

npm start

と入力し暫く待つとブラウザが開いて以下の画面が表示されます。

今後はこのプロジェクトをいじっていきましょう！

Hello world

まずはsrc/app/App.ktファイルを以下のように書き換えて下さい。

App.kt

package app

import org.w3c.dom.HTMLInputElement
import react.dom.h1

class App() : RComponent<Props, State>(props) {
    override fun RBuilder.render() {
            h1 {
                +"Hello world"
            }
    }

fun RBuilder.app() = child(App::class) {}

この状態でlocalhost:3000を見てみるとHello worldと見出しで表示されているはずです。
1行ずつ見ていきましょう。

App.kt

class App(props: Props) : RComponent<Props, State>(props) {

React.jsのextends ComponentのKotlin版です。これによりコンポーネント（部品）として宣言します。

App.kt

    override fun RBuilder.render() {
            h1 {
                +"Hello world"
            }
    }

React.jsのReactDOM.render()のKotlin版です。このブロック内に指定したhtmlタグが描画対象となります。
h1はHTMLのh1タグに対応し、このコードなら大見出しでHello worldを描画します。

App.kt

fun RBuilder.app() = child(App::class) {}

React.jsのexport defaultのKotlin版です。この命令によって他クラスからApp()を扱えるようになります。

実際にhtmlに描画をしているのはsrc/index/index.ktファイルとなります。

index.kt

package index

import app.*
import kotlinext.js.*
import react.dom.*
import kotlin.browser.*

fun main(args: Array<String>) {
    requireAll(require.context("src", true, js("/\\.css$/")))

    render(document.getElementById("root")) {
        app()
    }
}

requireAll(require.context("src", true, js("/\\.css$/")))はsrc配下の全てのcssを読み込みます。
renderは、rootというIDをもつHTMLタグ内にapp()のrender（）の内容を描画する処理です。

基本的には

• いろんな部品を作る（Componentsを作る）
• app.tkのように1つにまとめる
• render()で指定したIDを持つhtmlに描画

という流れで動作しています。
次はJSライブラリの呼び出しをしてみましょう！

JSライブラリの呼び出し

今回は画面が寂しいので、Bootstrap4とmaterial-uiを使ってみます。
まずはmaterial-uiをインストールします。

npm install @material-ui/core

BootStrapの方はCDNで読み込みます。public/index.htmlにCDNの読み込みを追加します。

index.html

<head>
    <meta charset="utf-8">
    <！--追加-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <！--中略-->
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

kotlinでJSライブラリを使うには、ライブラリをラップする必要があります。
試しにMaterial-uiのAppbarをラップしてみます。
まずはJSのものだとわかるディレクトリをsrc配下に作成します。(筆者はJSModule/materialuiとしました)

Appbar.kt

@file:JsModule("@material-ui/core/AppBar")

package jsmodule.materialui

import react.RClass
import react.RProps

@JsName("default")

external val AppBar: RClass<AppBarProps>

external interface AppBarProps : RProps {
    var className:String?
}

1つずつ見ていきましょう

Appbar.kt

@file:JsModule("@material-ui/core/AppBar")

読み込む対象とするJSライブラリを指定します。当然node_modules配下に対象ライブラリがいないとエラーになります。

Appbar.kt

external val AppBar: RClass<AppBarProps>

これでReactで使用するときと同様、ReactClassとして読み込めるようになります。

Appbar.kt

external interface AppBarProps : RProps {
    var className:String?
}

そのDOMが持つ属性をinterfaceの中で指定します。RPropsを型に指定するとReactのprops同様親に値を渡せます。
ブロック内で定義する属性は全てではなく使いたいもののみでOKです。今回はBootStrapのCSSを当てたいため、HTMLタグでのclassに相当するclassNameを指定しました。
String?はKotlinのルールでnull許容をする変数を宣言する方法です。
nullを許容しない場合はStringとなります。
動的言語たるJavaScriptの型を扱えるように全てを受け入れるdynamic型というものも存在します。

ラップが成功したので読み込んでみます。
App.ktにて読み込みを行います。

App.kt

import jsmodule.materialui.AppBar
class App(props: Props) : RComponent<Props, State>(props) {
    override fun State.init(props: Props) {
        items = props.initialItems
        text = ""
    }

    override fun RBuilder.render() {
        AppBar {
            h1 {
                +"TodoList"
            }
            attrs.className="bg-dark text-center"
        }

読み込みはまず対象ファイルをimportして、以下のように行います。

app.kt

    override fun RBuilder.render() {
        AppBar {
            h1 {
                +"TodoList"
            }
            attrs.className="bg-dark text-center"
        }

AppBar{}の内部にh1タグを格納し、interfaceで指定したものをattrsの中で代入しています。これによりBootstrapのクラス、bg-darkとtext-centerをあてることができます。

ButtonならonClick()やdisabled等、Reactで指定できるものは基本的に問題なく設定できました。

終わりに&次回予告

ここまでお付き合いありがとうございました！
尻切れトンボ感がすごいですが、いかがでしたか？個人的にはTypeScriptに次ぐ読みやすさを誇り、日本語の情報が増えればもっと盛り上がるのかなと思いました。結構Kotlinらしく記述できますし！
KotlinはWeb Assemblyへの対応やReact/NativeならぬKotlin\Nativeといったビジネスロジックをプラットフォームを問わず共有できる仕組みがあります。

次回はこのあたりを使って

• UIの改善
• バックエンド処理の追加（認証・CRUD）
• Androidアプリ化

あたりをやっていこうかと思っています！

aws Amplify Cognito + Reactで認証の実装をしていた時に遭遇したので共有しておきます。

本題

Cognito + Reactの情報を探していると、withAuthenticatorは以下のように、'aws-amplify-react'からインポートしている情報が殆どでした。

App.js

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure(awsconfig);

function App() {
  return (
    ...
  );
}

export default withAuthenticator(App); 

しかし、このままログイン画面を表示すると

このようにスタイリングが反映されていないものになります。

対処法

こちらの公式ドキュメントにあるように'@aws-amplify/ui-react'からインポートしてあげましょう。

  yarn add @aws-amplify/ui-react

App.js

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
// '@aws-amplify/ui-react'に変更
import { withAuthenticator } from "@aws-amplify/ui-react";

Amplify.configure(awsconfig);

function App() {
  return (
    ...
  );
}

export default withAuthenticator(App); 

表示されるようになりました。