「Node.jsを使って開発してみたいな〜」
「AdonisっていうNode.jsフレームワークがイケてるらしい」
「PHPのLaravelのようなフルスタックなフレームワークをNode.jsで使いたい」
なんて思っている人いるのではないのでしょうか？
僕はPHPerなので、Laravel風Node.jsフレームワーク「Adonis」に興味を持っていました。
今回の記事では、AdonisJS + React.JS + MySQLでCRUDを作ってみようと思います。
vueにするかもしれません。
Contents
今回のプロジェクトを作業する上での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をグローバルインストールします。
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へあげました。
うまく動かないところを確認したり、自分の作りたいように修正するのにご使用ください。