Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

React.js開発環境をサーバー上に作る

More than 3 years have passed since last update.

React.js簡易開発環境

概要

React.jsを自分のサーバー環境を使用して使いたい場合の環境構築です。
ついでにLivereload機能とか、BowerでクライアントサイドJSライブラリを管理する環境を試しに作ってみました。

ゴール

  • クライアントサイドJSライブラリの管理 bower
  • クライアントサイドJSライブラリの配置を自動化 gulp-bower
  • Webサーバーでコンテンツを配信 Gulp.js
  • ライブリロード Browersync
  • React.jsのクイックスタートコードが動く React.js

環境

  • Linux (今回はCentOS7.0 on Vagrant on Windows7)
  • Node.js 4.0

流れ

  1. プロジェクト用フォルダを作成
  2. 各種npmモジュール、必要なコマンドのインストール
  3. 各種設定ファイル作成
  4. 実行

スーパークイックスタート

フォルダと主要ファイル構成
./gulp-bower-browersync-react-sample
|-- gulpfile.js
|-- app
|   |-- index.html
|   |-- css/main.css
|   `-- js/main.js
|       `-- lib
|-- bower_components
|   `-- react
`-- node_modules

プロジェクトフォルダを作成

bash
mkdir gulp-bower-browersync-react-sample
cd gulp-bower-browersync-react-sample/

初期化とインストール

bash
npm init
npm install --save-dev gulp gulp-bower browser-sync
npm install -g bower
bower install --save react

基本フォルダとファイルの作成

bash
mkdir -p app/css
mkdir -p app/js
touch app/css/main.css
touch app/js/main.js

Gulpの設定ファイルを作成

  • bowerでインストールしたモジュールを公開フォルダにコピー
  • Browsersyncでサーバーを実行、watchタスクで指定したファイルに変更があればブラウザをリロード
gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var bower = require('gulp-bower');
var reload = browserSync.reload;

gulp.task('default', ['bower','serve']);

gulp.task('bower', function() {
  return bower().pipe(gulp.dest('app/js/lib/'))
});

// watch files for changes and reload
gulp.task('serve', function() {
    browserSync({
        server: {
            baseDir: 'app'
        },
        port: 3001,
        ui: {
            port: 3002,
            weinre: {
                port: 3003
            }
        }
    });

    gulp.watch(['*.html', 'css/**/*.css', 'js/**/*.js'], {
        cwd: 'app'
    }, reload);
});

index.htmlを作成

React:Getting Started
のhelloworld.htmlを使いますが、今回の構成にあわせてソース読み込みのパスを変更しています。
/bower_components -> /js/lib

app/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="/js/lib/react/react.js"></script>
    <script src="/js/lib/react/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src='/js/main.js'></script>
    <link rel="stylesheet" href="/css/main.css" type="text/css" >
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

サーバーの実行

run!
gulp

ブラウザからサーバーにアクセスして、"Hello,World!"が画面上に表示されれば成功です。

エラーの対処

rootユーザーで作業する場合、bowerコマンドではエラーが出る場合がある。

  • Error: ENOTDIR: not a directory, open '/root/.config/configstore/bower-github.yml' /root/.configが存在する場合、問題なければ一旦削除して以下の様に--allow-rootオプションを加えて実行する

bower install --save react --allow-root


Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away