Skip to content

BarakChamo/frontend-automation

Repository files navigation

Front-End Automation Workshop

Workshop on Front-End Development Automation with Webpack and Docker.

This is the excercise and demo repo for the Front-End Automation talk and workshop. It provides the steps for setting up a basic, isolted automated development enviroment power by Webpack and contained inside a Docker container.

Prequisites

The Front-End environment built in this workshop is driven by Webpack and Docker. You must have node.js, npm and docker installed to follow the steps and run the builds.

Installing Node.js

Installing NPM

Installing Docker

Following the workshop

Clone the repo's initial branch

git clone https://github.com/BarakChamo/frontend-automation.git

Follow workshop instructions

Step-by-step instructions to setting up the development environment are available in README files in the steps folder of the repository.

Complete solutions for each step

Each step branch poses a small challenge in configuring webpack and automating front-end development. You can try the challenges by checking out the workshop branch. If you want to see the full and 'solved' configuration look at the code for each step in the master branch of this repository.

Workshop Chapters

  1. Basic Webpack configuration and module bundling
  2. Module loaders and inline asset requirements
  3. Webpack Dev Server
  4. Module Chunk Splitting
  5. Production & Development configurations
  6. Docker containerization

Running the complete development environment

Building the docker container

From the project folder, run:

$ docker build -t workflow-docker .


#### To run the environment in ```development``` mode ```$ docker run --name my-webpack-docker -p 80:4000 -e NODE_ENV=dev webpack-docker```
#### run the environment in ```production``` mode ```$ docker run --name my-webpack-docker -p 80:4000 webpack-docker```
#### To launch the app, you need to know the ip address of the virtual machine ##### Run the following in your terminal to get the machine's ip:

$ docker-machine ip default


##### Run the development container:

docker run -e NODE_ENV=dev workflow-docker


##### Evaluate the development container's envvariables.

On OSX/Linux:

eval $(docker-machine env default)

On Windows:

docker-machine.exe env --shell cmd dev

About

Front-end Automation Workshop Follow-along

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published