AdonisJS + React.JS + MySQLでCRUDを作ってみた 。vol1

シェアする

フリーランスのIT・Web業界のリモート案件なら⇨リモートのみの案件を紹介【リモートビズ】

「Node.jsを使って開発してみたいな〜」
「AdonisっていうNode.jsフレームワークがイケてるらしい」
「PHPのLaravelのようなフルスタックなフレームワークをNode.jsで使いたい」

AdonisJS + React.JS + MySQLでCRUDを作ってみました。PHPのLaravelのようなフルスタックなフレームワークをNode.jsで使いたいと考えている方は、ぜひ参照ください。
AdonisJS + React.JS + MySQLでCRUDを作ってみました。PHPのLaravelのようなフルスタックなフレームワークをNode.jsで使いたいと考えている方は、ぜひ参照ください。

なんて思っている人いるのではないのでしょうか?

僕はPHPerなので、Laravel風Node.jsフレームワーク「Adonis」に興味を持っていました。

今回の記事では、AdonisJS + React.JS + MySQLでCRUDを作ってみようと思います。
vueにするかもしれません。

今回のプロジェクトを作業する上でのdocker

今回は、珍しくgitを用意しました。どっかのgithubから良さげなものを見つけてこれにAdonisJSをインストールして利用します。

=>https://github.com/leben-jp/adonisjs-docker-node.js

Adonisをインストールする

必要要件としてNodeとnpmのバージョンは事前にご確認ください。

Node.js >= 8.0.0
npm >= 3.0.0

npmコマンドでAdonisのCLIをグローバルインストールします。

npm i -g @adonisjs/cli

Adonisコマンドで環境の作成

プロジェクト名を変えたい場合は、削除するか名前変更することで新しいプロジェクト名を作成することができます
以下のコマンドでAdonisの環境を新規作成できます。

adonis new [directory-name]

実行

プロジェクトファイルのある場所で、adonis serve –devを実行してください。

今回の設定では、http://0.0.0.0:3333/ のアドレスに次ののような画面が広がります。

ReactJS

依存関係

adonisJSのプロジェクト直下で実行

npm install path @babel/core @babel/preset-react react babel-loader react-dom --save

Webpack

npm install webpack webpack-cli --global

webpack.config.js

resources/js/components/Example.js

resources/js/app.js

resources/views/welcome.edge

Run Webpackを使ってビルド

webpack --config webpack.config.js
sudo webpack --watch

ここまでの作業がうまくいくと、下記のような画面が表示されます。
Reactで表示した文言が画質が悪くて見えませんが。、。

今回の記事では、実際のCRUDを作成するところまで進んでいないのですが、基本的なAdonisJSの開発手順が学べたのではないかと思います。

ここまでのソースは、githubへあげました。

/leben-jp/adonisjs_react1

うまく動かないところを確認したり、自分の作りたいように修正するのにご使用ください。

シェアする

フォローする