Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
こんにちは！Amplifyの改善を行っている @watilde です。この記事は AWS Amplify Advent Calendar 2021 と Figma Advent Calendar 2021 の 25 日目の記事です。 Amplify Studio の発表 2021年の12月3日に開催された re:Invent にて Amplify Studio が発表されました。新機能としてFigmaでデザインしたコンポーネントを Amplify Studio にてデータベース内のテーブルのスキーマと紐付けし、可読性の高い React のコンポーネントとして出力する “Figma to code” が追加されました。 https://docs.amplify.aws/console/ 本記事では、amplifyコマンドがどのように Figma, Amplify Studio で設定したコン
React & TypeScriptのプロジェクト作成 | TypeScript Deep Dive 日本語版
コピー{ "compilerOptions": { "sourceMap": true, "module": "commonjs", "esModuleInterop": true, "resolveJsonModule": true, "experimentalDecorators": true, "target": "es5", "jsx": "react", "lib": [ "dom", "es6" ] }, "include": [ "src" ], "compileOnSave": false } コピー{ "name": "react-typescript", "version": "0.0.0", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/basarat/react
React Native for Windows を試してみたので備忘録もかねて手順をメモしてみました。 作業開始時点の私の環境は以下のようになります。 Windows 10 Pro 1909 (設定アプリから開発者モードに変更してください） Visual Studio 2019 16.4.2 ユニバーサル Windows プラットフォームワークロードの C++(v141) ユニバーサル Windows プラットフォーム ツール。デフォルトでチェックが入っていないので入れる。142 じゃなくて 141 なので注意 個別のコンポーネントから MSVC v141 - VS 2017 C++ ARM ビルドツール(v14.16)、MSVC v141 - VS 2017 C++ x64/x86 ビルド ツール (v14/16) の 2 つを入れる Node.js v12.9.1 (注意：現時点で最
I recently listened to a podcast where the creator of React Router, Michael Jackson mentioned a new pattern with hooks, returning a component. At first, I couldn't grasp how this would differ from just calling a render function or another React component, and it seemed to go against the whole "Components for UI, hooks for behavior" mantra. But I think I've stumbled on a use case. By the end of the
既存のサイトにモダンな感じで React.js + TypeScript を導入する とりあえずReactをはじめるたい時はCreateReactAppとか使うと簡単に始められるのですが、基本SPA用なので、すでにあるサイトに導入とかバックエンドフレームワークに導入とか難しかったりします。 そこでWebpackを使用して既存のサイトにReactを導入する方法をご紹介します。 投稿日2020年08月26日 更新日2020年09月08日 前提条件 予めnode.jsをインストールしておいてください。 npmの初期化とモジュールのインストール 適当なプロジェクトディレクトリを作ったらnpm initでpackage.jsonを作ります。 $ npm init -y 次にWebpack関係のモジュールからインストール $ npm i -D webpack webpack-cli typescrip
Jamstackサイトへ超簡単にサイト内検索を実装できる、クロール型検索 Site Search 360！ | 東京都・駒込のWeb制作 ペンタプログラム
Jamstackサイトへ超簡単にサイト内検索を実装できる、クロール型検索 Site Search 360！ かつてのGoogleカスタム検索のように、サイト内検索を手軽に実装できる手段があればなあ…データを用意しなくても勝手にクロールしてくれたらなあ…あわよくば無料で…という願望への答えがありました。 それがSite Search 360です。 このページではNext.jsで利用する方法をご紹介しますが、いわゆる静的HTMLサイトにもJavaScriptを数行埋め込むだけで実装できます。また、WordPressプラグインもあるようです。最終的にHTMLとして生成されるページなら、CMSを問わず、もちろんプレーンなHTMLでも使える、嬉しいサービスです。 Jamstackのみならず、Googleカスタム検索の代替手段をお探しの方におすすめです。 Site Search 360 無料版でできる
Reactとreact-routerとconnected-react-routerとTypeScript - Qiita
はじめに 通常Webサイトを作るときは複数ページ構成になることが多いと思います。 Reactを使って、複数ページを行き来する場合はreact-routerなるものを使うのが一番近道だと思います。 例によってフロントを始めた時に、こんなドキュメントがあればハマらなかっただろうな…と思うことの備忘です。 いつものように、よくわからなければ公式ドキュメントとエラーメッセージをよく読むのが解決への近道です。 前提条件 https://qiita.com/IgnorantCoder/items/88f13569cbf0a1c5eaa1 が終わってる。つまりreduxとreact-reduxは使ったことがある前提です。 そもそもreact-routerとは React routerとはなにかですが、公式を見に行けば説明が書いてあります。 Components are the heart of Reac
AWS Amplify と AWS Cognito と TypeScript で作る ユーザー認証機能付き Next.js アプリ - Software development of explosion! －夢の破片（カケラ）たちの日々－
AWS Amplify とは？ aws.amazon.com モバイルアプリケーションやウェブアプリケーションを構築するための JavaScript フレームワークです。 これを使うことで、後述する AWS Cognito を簡単に使用できます。 AWS Cognito とは？ ユーザー管理を一括で行ってくれるユーザー認証サービスです。 Auth0 の AWS版といったところでしょうか。 この様に色々と設定できます。 Next.js とは？ React.js でサーバーサイドレンダリングするためのフレームワークです。 Vue.js の Nuxt.js のようなものですね。 やってみよう！ 1. Next.js with TypeScript な環境を作る https://nextjs.org のサイトの手順を参考に、TypeScript に対応した Next.js アプリが実行できる環境を
blog.kwst.site
Using TypeScript with React Native · React Nativeを参考にしながらReactNativeでTypeScriptを使う環境構築をしていきたいと思います。 ReactNative自体の環境構築は以前のこちらの記事を参照してください。 React Native環境構築 | blog.kwst.site ReactNativeプロジェクトにTypeScriptを導入していく initコマンドでプロジェクトをまず作ります。 npx react-native init ReactNativePractice TypeScript関連のモジュールをインストールする TypeScriptの他に既にインストールされているモジュールの型定義モジュールをインストールします。 yarn add --dev typescript @types/jest @types/
【備忘録】【エラー解決】ModuleNotFoundError: No module named 'todos,' - Qiita
DjangoとReactの開発環境を完全に独立させたTodoアプリを作っています。 migrationファイルを作成しようとして下記を実行した結果、 Traceback (most recent call last): File "manage.py", line 22, in <module> main() File "manage.py", line 18, in main execute_from_command_line(sys.argv) File "/Users/asamitakaoka/Desktop/todo-react/lib/python3.8/site-packages/django/core/management/__init__.py", line 425, in execute_from_command_line utility.execute() File "
Docker で Node.js + Express の開発環境を作成する - takaya030の備忘録
VirtualBox + Docker 環境で Node.js + Express を動作させたときの手順メモ 検証環境 Windows10 Home Edition VirtualBox 5.2.22 Docker version 18.05.0-ce, build f150324 docker-machine version 0.14.0, build 89b8332 docker-compose version 1.20.1, build 5d8c71b パッケージインストールのためのイメージ作成 VirtualBox の共有フォルダ内にパッケージをインストールしようとすると、シンボリックリンクが作成できずエラーになるため Docker イメージ内にインストールする node.Dockerfile FROM node:8-alpine MAINTAINER takaya030 ENV
Azure-Samples/azure-search-openai-demo で azd up でエラー - Qiita
TL;DR 素直に Dev Container か GitHub Codespace を使いましょう。 はじめに Azure Open AI Service をサクッと試したい時のサンプルとして以下のリポジトリがあります。 このリポジトリは Azure Developer CLIの azd up で簡単にリソースを構築できるように構成されています。 発生した問題 README どおりに azd up とすすめると以下のエラーが発生しました。 環境は WSL2 の Ubuntu です。 $ azd up (✓) Done: Downloading Bicep ? Select an Azure Subscription to use: ★選択したサブスクリプション★ (✓) Done: Retrieving locations... ? Select an Azure location to
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amplify StudioがどのようにFigmaデータをReact componentに変換しているのか
React Native for Windows を試してみよう。そして型も手に入れよう。
New React Hooks Pattern? Return a Component
既存のサイトにモダンな感じで React.js + TypeScript を導入する