Help us understand the problem. What is going on with this article?

vagrantでWordPressを立ててAgular2でフロントエンド開発

More than 1 year has passed since last update.

VagrantでWordPressを立てる

virtualboxのインストール
Vagrantのインストール

VCCW v3 をダウンロードする。
http://vccw.cc/

vagrant-hostsupdaterをインストールする。

vagrant
vagrant plugin install vagrant-hostsupdater

プラグインインストール後にupしてWordPressを立てる

cmd
cd vccw
vagrant up

WordPressの設定

正常にupできていれば

にアクセスできる。

日本語とかにしとくと幸せになれる。
Wordpressは最新にしておく。

Angular2のインストール

https://angular.io/docs/ts/latest/cli-quickstart.html
を参照

nodeとnpmをインストールする。
https://nodejs.org/en/

インストールが終わったらAngular2のCLIをインストールする。

cmd
npm install -g @angular/cli

インストールが終わったらプロジェクトを作成する。

cmd
ng new my-app

プロジェクトが作成されたら実行してみる。

cmd
cd my-app
ng serve

http://localhost:4200/ にアクセスして
app works! みたいなの出れば動いてる。

Angular2をコンパイルしてVagrantで動かす

Angular2をbuildする

cmd
ng build

終わると dist/ というフォルダが生成されている。
dist/ を先程のvccw/wordpress/ にコピーする。
http://vccw.dev/dist/ にアクセスすると先程のapp worksが出る。

トップページごと変えたい場合はdist/の中の全部をvccw/wordpress/にぶち込む。

最後に

最近(4.7から?)のWordPressもAPIが提供されているのでとりあえずローカルで試せる環境の構築をした。
WordPressの管理画面は使いたいけどPHPでデザインとかはやりたくないしフロントエンドでいろいろやったほうが楽だと思ってる。
とりあえず開発環境はできたので色々やりたい。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした