JavaScriptだけでWebサイト開発

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

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

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

create-react-appでreact-router

環境設定 routerフォルダでプロジェクトを作成 $ cd ~/ $ create-react-app router react-routerインストール 今回はwebサイト $ cd ~/router $ npm install --save react-router-dom src/App.js 編集 前ページ共通で表示するHeader,Footer トップページは/ …

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 …

create-react-app で Material-UIの画面を表示してみる

create-react-appでプロジェクトを作成し、Material-UIを利用した画面を表示します 環境設定 ローカルの開発環境はこちら * macOS High Sierra(v10.13)でJavaScript開発環境を整える create-react-app でプロジェクトの雛形作成して起動してみる $ cd ~/ $ c…

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…

node.js+React CMS を設計する(データベース仕様)

nexpressスキーマ構成を定義する。 必要最低限の要件を元にシンプルな構造を定義する。 1. Schemaに対する要件 ユーザー登録がエントリーポイント ユーザー ユーザーはサイトを複数作成できる サイトを新規作成したとき、自動的にそのサイトの最高権限ユーザ…

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

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

node.js+ReactベースのCMS開発をはじめます

なぜCMSか 現在CMSのデファクトスタンダードはwordpressです。PHPが動作するサーバーであれば簡単に設置でき、豊富なプラグイン、デザインテーマがあって使いやすくなっています。 これに匹敵できるようなCMSをnode.jsベースで開発してみます。CMSはWebアプ…

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

掲示板の続きです。 これまではテキストのみを投稿する掲示板でしたが、画像もアップできるようにします。 前回とExpress(REST_API)で画像アップ掲示板を作ってみる(1))はサーバーサイドのAPIをファイルアップロードに対応しました。 今回はフロントエンドの…

©ichi-bit