An application example to show how to use Azk, Nginx, React and Webpack
Already have azk installed a want to run this project with one click?
This is a project has the basic setup for these technologies:
- React: Front-end framework created by Facebook.
- Azk: An evolution of Vagrant that uses Docker and can easily reuse local setup for deployment.
- Webpack: Automation tool to convert JS, JSX, SCSS, CSS and other files into browser format.
- Nginx: CDN to serve static files.
The main goal of this project is to setup a working development environment that works on Linux, Mac and Windows to write front-end code using React.js
that will be served to the browser through Nginx
.
- Install Azk: http://docs.azk.io/en/installation/
- Clone this project:
$ git clone https://github.com/agendor/react-webpack-sample/tree/azk
(Be sure that you clone azk
branch. The master
branch is not completed because it's used by this blog post tutorial)
$ cd react-webpack-sample
$ azk start
azk: ↑ starting `app-cdn` system, 1 new instances...
azk: ✓ checking `azkbuild/fe789d5c32-app-cdn:3bdf3e19feddd9c49a6e6ecce055661b470828c5` image...
azk: ⇲ building `azkbuild/fe789d5c32-app-cdn:3bdf3e19feddd9c49a6e6ecce055661b470828c5` image...
azk: ◴ waiting for `app-cdn` system to start, trying connection to port http/tcp...
azk: System `app-builder` already started
┌───┬─────────────┬───────────┬───────────────────────────┬─────────────────────────┬────────────────┐
│ │ System │ Instances │ Hostname/url │ Instances-Ports │ Provisioned │
├───┼─────────────┼───────────┼───────────────────────────┼─────────────────────────┼────────────────┤
│ ↑ │ app-builder │ 1 │ dev.azk.io │ - │ 18 minutes ago │
├───┼─────────────┼───────────┼───────────────────────────┼─────────────────────────┼────────────────┤
│ ↑ │ app-cdn │ 1 │ http://app-cdn.dev.azk.io │ 1-80:32770, 1-443:32769 │ an hour ago │
│ │ │ │ │ 1-http:32768 │ │
└───┴─────────────┴───────────┴───────────────────────────┴─────────────────────────┴────────────────┘
Our files will be served through http://app-cdn.dev.azk.io
. Let's test it:
# index page
curl http://app-cdn.dev.azk.io
# request an asset
curl http://app-cdn.dev.azk.io/assets/app.js