Ubuntuでローカルにexpress-generatorをインストールしてtypescriptで動かす

ネットにはグローバルにインストールする方法が多いのでローカルにインストールしてみる。

環境

まずはjavascriptで動かす

expressをインストールしたいフォルダに移動して、下記コマンドを実行

yarn add express-generator

さらに、アプリの雛形を作成(ローカルでインストールする場合、npxで実行する必要がある)

npx express <アプリ名>

指定したアプリ名のフォルダに移動して、下記コマンドを実行して足りないパッケージをインストール

yarn install

下記コマンドを実行してlocalhost:3000にアクセスして動作確認

yarn start

Express  
Welcome to Express

ブラウザでhttp://localhost:3000にアクセスして上記のように表示されていればOK。

TypeScriptに対応する

TypeScriptとExpressの型定義をインストール

yarn add --dev typescript @types/express

--devをつけるのはdevDependenciesにインストールしたいから。
typescriptや型定義ファイルは開発時に必要な依存関係なので、devDependenciesでOK。 引用元

tsconfig.jsonの作成

npx tsc --init

必要に応じてtsconfig.jsonを修正する

私は以下の3点を変更。

"target": "es2020",
"sourceMap": true,
"outDir": "./dist",

sourceMapは出力された JavaScript ファイルが実際に動作させるときに、デバッガーやその他のツールが元の TypeScript ソースファイルを表示できるようになります。 引用元
outDirを設定すると、.jsファイル（.d.tsや.js.mapファイルも同様）がこのディレクトリ内に出力されます。 元のソースファイルのディレクトリ構造は保存されます。引用元

なお、この時点だと、以下のような問題があると怒られるかもしれません。

構成ファイル 'XXX/XXX/tsconfig.json' で入力が見つかりませんでした。指定された 'include' パスは '["**/*"]' で、'exclude' パスは '["./dist"]' でした。

しかし、現時点では無視して構わないです。.tsファイルを作成していくとエラーが解消します。

app.jsで使われているモジュールの型宣言ファイルをインストールする

yarn add --dev @types/http-errors @types/cookie-parser @types/morgan

app.jsをapp.tsに変更、commonJSをES6な書き方に変更

以下のようにする。

import createError from 'http-errors';
import express, { ErrorRequestHandler } from 'express';
import cookieParser from 'cookie-parser';
import logger from 'morgan';

import { indexRouter } from './routes/index';
import { usersRouter } from './routes/users';

const app = express();

// view engine setup
app.set('views', 'views');
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static('public'));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use((req, res, next) => {
  next(createError(404));
});

// error handler
const errorHandler: ErrorRequestHandler = (err, req, res, next) => {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
}
app.use(errorHandler);

export default app;

補足

最終行のexport default appは変更せずにmodule.exports = appのままでも良いかもしれません。 module.exportsのままの場合、トランスパイルしてもmodule.exportsのままであり、requireのみで問題ありません。
そのため、後述のwwwファイルを変更するときに、.defaultは不要です。

index.jsおよびusers.jsも.tsに変更、commonJSをES6な書き方に変更

  • index.ts
import express from 'express';
export const indexRouter = express.Router();

/* GET home page. */
indexRouter.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
  • users.ts
import express, { Request, Response, NextFunction } from 'express';
export const usersRouter = express.Router();

/* GET users listing. */
usersRouter.get('/', (_req:Request, res:Response, next:NextFunction) => {
  res.send('respond with a resource');
});

パスを変更する

<アプリを作成したパス>/bin/wwwを以下のように修正する

var app = require('../dist/app').default;

export defaultをトランスパイルするとexports.defaultになるようです。
なので.defaultで読み込む必要があります。

トランスパイルする

npx tsc

yarn startしてlocalhost:3000とlocalhost:3000/usersの動作を確認

respond with a resource

localhost:3000/usersにアクセスした場合、上記の一文だけが表示される。

djangoでmakemigrationsがNo changes detected

初歩ミスなのに、なかなか気づけなかったのでメモ。

環境

事象概要

startappして、postgreSQLと接続して初回のmakemigrationsとmigrateを完了。
その後、models.pyを変更したので、makemigrationsした。しかし、"No changes detected"が表示され、変更が反映されない。

原因

setteings.pyのINSTALLED_APPSに作ったアプリの追加し忘れ。
凡ミス。

すぐに気がかなかった理由

初めてpostgreSQLと接続してdjangoを使ってみたので、postgreSQLの設定等の問題ばかりを疑ってしまったため。

UbuntuでERBを使うための初期設定

Ubuntu 20.4にまるっきり1からelectron-react-boilerplate(ERB)の環境構築をしたので、せっかくなのでメモしておく

やることリスト

  • Node.jsのインストール
  • curlのインストール
  • yarnのインストール
  • gitのインストール
  • ERBのクローン
  • 動くか確認

さっそくやってみる

Node.jsのインストール

ローカルパッケージインデックスの更新

sudo apt update

Node.jsのインストール

sudo apt install nodejs

インストールできたか確認する

nodejs -v

ついでにnpmもインストールしておく

sudo apt install npm

Node.jsのインストールは以上。

<参考> Ubuntu 20.04にNode.jsをインストールする方法 | DigitalOcean

curlのインストール

yarnのインストールに必要なので、curlのインストールをする。 以下コマンドでインストール。
sudo apt install curl

curlのインストール終わり。

yarnのインストール

Debianパッケージリポジトリの設定

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

yarnのインストール

sudo apt-get update && sudo apt-get install yarn

yarnのインストール終わり。

<参考>
インストール | Yarn

gitのインストール

以下コマンドでインストール

sudo apt-get install git

インストールされたか確認する

dpkg -l git

ERBのクローン

以下コマンドでインストール

git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
your-project-nameに自分の好きな名前を入れる。

ディレクトリを変更してyarnする

cd your-project-name
yarn

<参考>
GitHub - electron-react-boilerplate/electron-react-boilerplate: A Foundation for Scalable Cross-Platform Apps

動くか確認する

以下コマンドで実行

yarn start

画像のように表示されればOK。
(12/11にERBがv2.0.0になり、以前までのCounterページがなくなりました。詳しくは別で書こうと思います。)

yarnStart
ERByarnStart