JavaScriptだけでWebサイト開発

node.js + Express + mongodb系 + React でサービスを作るメモ

Express

Express+mongoose+passportでユーザー登録認証&セッション全部やる

使用するミドルウェア これらを使用するとロジックをコーディングする必要がなくなる mongoose express-session passport passport-local passport-local-mongoose connect-mongo setup $ cd ~/ $ express userlogin $ cd userlogin $ npm install $ npm ins…

node.js+React CMS開発-ソフトウェア構成

CMS開発の続きです node.js+ReactベースのCMS開発をはじめます node.js+React CMS を設計する(外部仕様)) node.js+React CMS を設計する(データベース仕様)) node.js+React CMS開発-サーバー雛形を作成 node.js+React CMS開発-モデル定義 前提条件と目的およ…

create-react-appのアプリをExpress内で配置、配信する

クライアントReactアプリとWebサーバー&APIサーバーを分けるのが面倒で一箇所(プロセス)でホスティングしたいときがあります create-react-app で作成したプロジェクトをexpressの /_admin 以下で動作(配信)させてみます Express環境 $ express together …

express-react-views+Material-UIをSSRで試す

わざわざServer Side Renderingでやるべきことではないですが、やってみました。 やったこと express-generator で雛形を作る app.jsで view engineに express-react-views を設定 view 内の layout.jsxとindex.jsx でmaterial-uiを利用 ブラウザで確認 環境…

Express+mongooseでsession管理

mongooseでセッション管理 パッケージインストール $ npm install --save mongoose $ npm install --save express-session $ npm install --save connect-mongo プロジェクト雛形作成 $ express session app.js var express = require('express'); var sessi…

node.js+React CMS開発-モデル定義

CMS開発シリーズの続きです node.js+ReactベースのCMS開発をはじめます node.js+React CMS を設計する(外部仕様)) node.js+React CMS を設計する(データベース仕様)) node.js+React CMS開発-サーバー雛形を作成 今回は前回作成した雛形にmongooseスキーマ&…

mongooseでpasswordを暗号化して保存してチェックする方法

Express+mongooseでパスワードを暗号化して保存する方法 mongoose-bcrypt をインストール npm install mongoose-bcrypt --save app.js ルーティングの/ でデータ登録、/checkでパスワードをチェックしてみます app.js var mongoose = require('mongoose'); c…

node.js+React CMS開発-サーバー雛形を作成

CMS開発シリーズの続きです node.js+ReactベースのCMS開発をはじめます node.js+React CMS を設計する(外部仕様) node.js+React CMS を設計する(データベース仕様) 今回は Expressのプロジェクト作成とviewエンジンにReactを使用するテンプレートを作成しま…

mongooseでauto increment のフィールド定義と動作確認

Express+mongooseで RDBのようなAUTO INCREMENTフィールドを実現する mongoose-sequence パッケージをインストール $ npm install --save mongoose-sequence app.js var mongoose = require('mongoose'); const option = { useMongoClient: true, }; mongoos…

React(create-react-app)とExpress(REST API)で画像アップ掲示板を作ってみる(1)

前回の続きです。 前回まではテキストのみを投稿する掲示板でしたが、画像もアップできるようにします。 作るもの これまで作ってきた掲示板を拡張 フロントエンドはcreate-react-appで作成 バックエンドはExpress 書き込みと同時に画像をアップロードできる…

ExpressでMongoDBへのCRUD機能を実現するRESTful Web APIを作ってみる

作るもの 開発環境 1. Express プロジェクト作成 2. express-restify-mongoose をインストール 3. app.jsを編集 4. まとめ 作るもの Express内で定義したMongoDBのスキーマに対してデータをCreate,Read,Update,DeleteするWebAPIインターフェース これまで作…

node.js+Express+mongooseの掲示板をReact view(SSR)で実装

前回の「node.js+Express+mongooseで掲示板を作ってみる」ではview engineをpugで実装しました。 これを機能はそのままに Reactをview engineとして使ってみます。 目次 目次 1. express-react-views パッケージインストール 2. app.js で view engine を変…

node.js + Express + mongoose で掲示板アプリを作ってみる

前回の「node.js+mongodbで掲示板アプリを作ってみる」ではnode.jsとmongodbのnative driverだけでapp.jsのみで実装しました。 独自ルーティング デザインもHTMLも混在 dbのドキュメント構造がわかりにくい その他Webアプリケーションで共通の処理手順をその…

macOS High Sierra(v10.13)でJavaScript開発環境を整える

macOS High SierraでJavaScript開発環境を整える macOS High SierraでJavaScript開発環境を整える 0. 開発するもののイメージ 1. Homebrew をインストール 2. nodebrew をインストール 3. node.jsをインストール 4. 開発で使うnode パッケージをグローバルに…

©ichi-bit