JavaScriptだけでWebサイト開発

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

node.js

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開発-モデル定義 前提条件と目的およ…

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を利用 ブラウザで確認 環境…

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を使用するテンプレートを作成しま…

node.js+React CMS を設計する(外部仕様)

nexpress(CMS名称)画面構成 1. サイト画面構成 SSR(Server Side Rendering)にする トップページ 記事リストページ カテゴリ(サブカテゴリ) 検索結果 タグ検索 ランキング 新着 その他条件リスト 記事本文ページ (ユーザープロフィールや固定ページ) 2. 管…

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アプリケーションで共通の処理手順をその…

node.js と mongodbで掲示板アプリを作ってみる

前回つくった掲示板サービスはnode.jsのhttpサーバー起動中の配列に書き込みデータを保存したため、サーバー再起動でデータが消えてしまいます。 今回はmongodbにデータを保存してみます。 1. mongodbのインストールと起動 2. node.jsでmongodbのdriverを使…

node.jsだけで掲示板アプリを作ってみる(後編)

「node.jsだけで掲示板アプリを作ってみる(前編)」のつづきです。 1. 前回までのまとめ 2. 投稿ページ 3. 投稿データを保存する 4. 投稿された書き込みを表示する 5. Not Found ページの実装 5. まとめ 付録. 全ソース 全体構造がわかるようにapp.js という…

node.jsだけで掲示板アプリを作ってみる(前編)

node.jsだけで掲示板アプリを作ってみる いろいろ便利なライブラリやパッケージを利用する前に素のnode.jsで一通りの機能を作ってみる node.jsだけで掲示板アプリを作ってみる 1. nodeのインストール 2. ディレクトリ作成 3. Hello World 4. URL毎に処理を変…

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