Pixelhandler-dev

Blog (client) application for https://pixelhandler.dev

• Written with TypeScript
• End-to-end tests with Webdriver.io
• Data source: api.pixelhandler.dev JSON API

Development

Build Webpack with TypeScript

Pick one:

make
make build
make watch

Server with Node

make server

Or, use Nginx

sudo nginx -c path_to… ./etc/nginx/nginx.conf
sudo nginx -s stop
tail -f /usr/local/var/log/nginx/error.log

Styles

PostCSS modules

• postcss-import, postcss-nested

Compile styles, runs in make build

./bin/process-css.js

Or,

postcss styles/app.css -c ./postcss.config.js -o dist/styles.css

Testing

See webdriver docs.

Install Selenium executable and driver

cd test

curl -O http://selenium-release.storage.googleapis.com/3.0/selenium-server-standalone-3.0.1.jar

curl -L https://github.com/mozilla/geckodriver/releases/download/v0.11.1/geckodriver-v0.11.1-macos.tar.gz | tar xz

Download and install Java SE JDK, e.g jdk-8u131-macosx-x64.dmg

Start Selenium Server

make selenium

Run tests

make test

Run Webdriver REPL

make test-repl
browser.url('https://pixelhandler.dev/tags')

For Ubuntu (e.g. WSL) may need to run headless

sudo apt-get install firefox

sudo apt-get -y install xvfb gtk2-engines-pixbuf
sudo apt-get -y install xfonts-cyrillic xfonts-100dpi xfonts-75dpi xfonts-base xfonts-scalable

Xvfb -ac :99 -screen 0 1280x1024x16 &
export DISPLAY=:99

Release

make dist

• Upload to S3, set metadata

Metadata for JS/CSS Assets

Cache-Control
max-age=63072000, public

Content-Encoding
gzip

Content-Type
application/javascript
text/css

Expires
Tue, 01 Jan 2030 00:00:00 GMT

Metadata for HTML

Content-Type
text/html; charset=UTF-8

Cache-Control
max-age=14

Content-Encoding
gzip

Troubleshooting

• issue with node-gyp xcode-select --install npm install -g node-gyp