SymfonyでJS、SCSSをWebpack encoreでビルドするには

Symfonyで、JavascriptやCSSなどフロントエンドのアセットを管理する仕組みとして、以前はAsseticが用意されていましたが、Webpackを利用するWebpack Endoreに置き替わり今時な構成になりました。

Laravelで言うところのElixirにあたります。

Webpack Encoreの利用方法については、公式ドキュメント Managing CSS and JavaScript に一通りの使い方が載っています。
また、Symfonyのでもアプリ symfony/symfony-demo が、Webpack Encoreを使った構成になっているので、こちらのソースを読むほうが解りやすいかもしれません。

この記事では、公式ドキュメントの例、First Example を試してみた手順をまとめいます。
公式ドキュメントでは、nodeのパッケージ管理システムにyarnを使っていますが、私は普段まだnpmを使っているので、npmを利用してパッケージをインストールしています。

プロジェクトの構成

symfony/symfony-demo を参考に、以下のようなディレクトリ構成にします
“SymfonyでJS、SCSSをWebpack encoreでビルドするには” の続きを読む

React x TypeScript x Webpackの開発環境でjQuery (Bootstrap)を使うには

TypeScriptで記述しているReactアプリケーションをWebpackでビルドしている開発環境で、jQueryライブラリをあわせて使う構成について調べたことをまとめてみました。

ここでは、前回の記事 「TypeScript,WebPackを利用したReactJS開発環境セットアップまとめ」で構築したプロジェクトに、jQuery Bootstrapを追加してみます。

jQueryは、TypeScriptのコンパイルはimportで通りますが、そのままでは、jQueryがbundle.jsに含まれません。
jQueryをbundle.jsに含めるためには、ProvidePluginを利用することで解決できます。
また、jQuery本体については、CDNからjsを含めても依存の問題は発生しにくいので、scriptタグで指定してしまうのが良い気もします。

ReactでBootstrapを使いたい場合は、React-Bootstrapを使うほうが筋が良いと思いますが、ここではあえて本家のBoostrapを利用してみます。

パッケージのインストール

jqueryとbootstrap、その型定義をインストールします
また、bootstrapのPopoverはpopper.jsに依存しているのでpopper.jsも追加しておきます

$ npm install --save jquery @types/jquery bootstrap @types/bootstrap popper.js

“React x TypeScript x Webpackの開発環境でjQuery (Bootstrap)を使うには” の続きを読む

React x SCSS x Webpack開発環境セットアップ手順まとめ

スタイルシートをSCSSで、JSはES6で記述するReactJSのアプリケーションを、Webpackでビルドする手順についてまとめてみました。

スタイルシートはバンドルされたJSに含めず、ExtractTextWebpackPluginを利用してファイルを分けるようにしています。

この記事を試したnodeのバージョンは以下の通りです

$ node -v
v6.9.4
$ npm -v
3.10.10

プロジェクトの構成とnpmの初期化

プロジェクトのディレクトリ構成は以下のようにします

“React x SCSS x Webpack開発環境セットアップ手順まとめ” の続きを読む

TypeScript,WebPackを利用したReact開発環境セットアップまとめ

TypeScriptの公式チュートリアル React & Webpack · TypeScriptをベースに、TypeScriptで記述したReactJSアプリをWebpackでビルドする開発環境の構築手順についてまとめています。

nodeのバージョン

この記事では、以下のバージョンのnode.jsを利用しました。

$ node -v
v8.5.0
$ npm -v
5.3.0

プロジェクトのディレクトリ構成を準備

プロジェクトの構成は、以下のようにsrcディレクトリにReactJSのコンポーネントを置き、distディレクトリをWebpackのビルドターゲットとします。

以下コマンドで、プロジェクトのディレクトリ構成を作成します

“TypeScript,WebPackを利用したReact開発環境セットアップまとめ” の続きを読む

Laravel Angular Material Starter API認証周りの構成についてのメモ

Laravel Augnlar Material Starterは、フロントエンドにAngular Material、バックエンドAPIにLaravelを利用したシングルページアプリケーションを開発するためのスターターパッケージです。

Laravelは、Laravel ElixirというJavascriptやCSSなどのアセットをビルドするためのgulpタスクがフレームワークに予め含まれていますが、Laravel Angular Material Starterは、AngularJSとAngularJSベースのUIコンポーネントフレームワーク Angular MaterialをビルドするためにLaravel Elixirが予め構成されたLaravelプロジェクトと言った構成になっています。
また、フロントエンドのAngularJSから呼び出されるLaravel側のAPIに対する認証はJWTを利用します。

この記事では、主にフロントエンドのAPIの呼び出しと、バックエンドのJWT生成、検証に利用されるパッケージの構成について調べたことをまとめていきます。

含まれるパッケージ

Laravel Angular Material Starterには、2016.7時点でLaravel 5.2とAngularJS 1.5をベースに以下のパッケージが含まれています。

公式ドキュメントでは「Libraries involved」に載っています。

Composerパッケージ

Laravel側のパッケージは、バックエンドAPIおよび認証をサポートする以下のようなパッケージを含んでいます。

  • dingo/api: Laravel、LumenでRestful APIを管理するミドルウェアを提供するパッケージ
  • tymon/jwt-auth: Laravel、Lumen用のJWTの生成、認証の仕組みを提供するパッケージ
  • barryvdh/laravel-cors: Laravel、Lumen用のCross-Origin Resource Sharingを提供するパッケージ

“Laravel Angular Material Starter API認証周りの構成についてのメモ” の続きを読む

Azure WebアプリにNode.js expressアプリをGitからデプロイ

Azureにデプロイするアプリの開発は.Net以外でもVisual StudioのAzure統合ぶりがとても便利そうですが、Node.jsアプリの開発となると、私も含め普通はMacで開発している人がほとんどかと思います。
Build 2016で発表があったBotFrameworkを試していて、BotをAzure WebAppにデプロイするために、Azure向けのNode.jsアプリをMac OS X上で開発・デプロイする手順について調べてみたことをまとめてみます。

割りと驚いたのは、いつのまにかHerokuの様にgitと連携したデプロイができるようになっているんですね。非常にこれは便利です。
今回は、Bitbucketにpushしたらデプロイする手順を試しています。

Azureは、2,3年前にWebSitesを試して以来ですがとても進化してますね。
以前の記事は「Windows Azure WebサイトでFuelPHPアプリを動かす」の時は旧ポータルでした。

Node.jsの開発については、改めてまとめずとも公式ドキュメントにもちゃんと日本語で説明があります。
Azure App Service での Node.js Web アプリの作成

Hello Worldまでは、この説明のみで必要十分なので、npmでパッケージを管理する例としてexpressを利用する例についてもまとめてみました。
“Azure WebアプリにNode.js expressアプリをGitからデプロイ” の続きを読む

AWS Lambda (Node.js) からRDS PostgresqlまたはRedShiftへ接続するには

Node.jsのLambda関数からデータベースにアクセスするには、Postgresqlの場合はnpm pgパッケージが利用できます。
npmパッケージはプロジェクトにローカルインストールするとnode_modulesディレクトリに保存されるので、それを一緒にZipするとLambda関数のJSで読み込めるようになります。

Node.jsのLambda関数をnpmでパッケージ管理して開発する手順について調べてみたことを手順化してまとめてみました。
前提条件として、Node.JSとAWS CLIが利用できる環境が必要です。
“AWS Lambda (Node.js) からRDS PostgresqlまたはRedShiftへ接続するには” の続きを読む

Yii2 AssetをGruntでビルドするには

前回の記事 Yii2のAssetsでNPMやBowerパッケージを読み込むには でYii2のAssetシステムの使い方についてまとめましたが、今回は、Yii2のAssetを使わずに、JavascriptやCSSをGruntで管理する方法について調べた内容をまとめてみました。

前半は、Yii2 CookbookのAsset processing with Gruntの内容を試したメモで、その後簡単なサンプルを作成してみます。

解説の前提として、Yiiプロジェクトが作成されているところからになります。

Gruntのセットアップ

ますは、Node.jsの環境を準備します。

Ubuntuの場合は以下のコマンドでインストールできます。

$ curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
$ sudo apt-get install -y nodejs

他のプラットフォームのパッケージインストールについては Installing Node.js via package manager を参照してください。

OS Xの場合は、nodebrewがおすすめです。

Gruntをグローバルインストールします。

$ sudo npm install -g grunt-cli

プロジェクトディレクトリに移動して、npm initしてpackage.xmlを作成した後、必要なGruntプラグインをインストールしていきます
“Yii2 AssetをGruntでビルドするには” の続きを読む

Yii2のAssetsでNPMやBowerパッケージを読み込むには

Yii2には、Ruby on Railsのような、割りとしっかりしたAssetの仕組みが用意されています。
Assetを利用してフロントエンドのパッケージを、NPMやBowerで管理する手順について調べたのでまとめてみました。

NPM / Bowerパッケージの追加方法

Yii2は、プロジェクトの構成にNPMやBowerをComposerで管理するためのパッケージfxp/composer-asset-pluginを使うことを前提としています。

fxp/composer-asset-pluginを利用すると以下のコマンドで、NPMやBowerパッケージを追加することができます。

NPMの場合

$ composer require npm-assets/angular

Bowerの場合

$ composer require bower-assets/angular

参照: Bower and NPM Assets
“Yii2のAssetsでNPMやBowerパッケージを読み込むには” の続きを読む

MEANスタック MEAN.IOおよびMEAN.JSの使い方

MEANスタックは、Webアプリケーション開発のためのJavascriptソフトウェアスタックで、MongoDB、Express、AngularJS、Node.jsを組み合わせて利用します(Wikipedia: MEAN)。

で、ここまでは問題無いと思いますが、主にMEAN.IOMEAN.JSの2つ流派があり、さらに亜種がいくつかとブログ記事によっては独自の組み合わせとして説明していたりとなかなか混乱してしまいます。

mean-io-mean-js-logos

また、この2つの他にも、以下に挙げるような方法で、MEANスタックを利用することもできます。

この記事では、メインストリームであるMEAN.IOとMEAN.JSを取り上げて、それぞれの使い方について見ていった後に整理してみます。

それぞれの成り立ちと比較については、いずれも2014年の古い情報ですが、「MEAN.io vs MEAN.JS – A Comparison」と「Difference between MEAN.js and MEAN.io」あたりに書いてあります。
要約すると「どっちも Amos Havivさんが作っていて、最初にMEAN.IOを作っていたけど会社の方針と合わなくなってMEAN.JSを始めた。MEAN.IOの方が有名だけど、Amosさんは今はMEAN.JSの開発に携わってるからこっちの方がいいんじゃね」ということらしいです。
“MEANスタック MEAN.IOおよびMEAN.JSの使い方” の続きを読む