Dockerizing the frontend
Create a file named Dockerfile in the root of our module with the following content
FROM node:7.8.0
ENV NPM_CONFIG_LOGLEVEL warn
COPY . .
RUN yarn
CMD yarn start
EXPOSE 3000
This basically tells docker that this module is based on the node image, which is basically a really tiny debian distribution with nodejs installed on it.
Then we copy all the files from our project into that linux, and run yarn to install all the dependencies.
That will create the image which is like a definition of a small "virtual machine".
We also declare two extra data there
- which command to start when creating a container from this image, which in our case is basically to start the webapp with yarn
- which port it will expose
Now lets build the image (you need to have docker installed)
docker build -t e2e-tutorial-frontend .
It might take a while and you will see something like this
Sending build context to Docker daemon 45.57 MB
Step 1/6 : FROM node:7.8.0
---> 7b74a8f89358
Step 2/6 : ENV NPM_CONFIG_LOGLEVEL warn
---> Using cache
---> 4146a2b3c98e
Step 3/6 : COPY . .
---> 4e8428d908c0
Removing intermediate container 155032e444a2
Step 4/6 : RUN yarn
---> Running in 899c9a15f298
yarn install v0.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 22.91s.
---> a236ce3ea5be
Removing intermediate container 899c9a15f298
Step 5/6 : CMD yarn start
---> Running in 2d37972ed0b2
---> 2bea84b40181
Removing intermediate container 2d37972ed0b2
Step 6/6 : EXPOSE 3000
---> Running in 8f2a7b2b3a10
---> 06a108228b9a
Removing intermediate container 8f2a7b2b3a10
Successfully built 06a108228b9a
Our image is ready, you can check which docker images you have with
docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
e2e-tutorial-frontend latest 06a108228b9a 32 seconds ago 746 MB
node 7.8.0 7b74a8f89358 4 weeks ago 665 MB
Now we can launch an instance with
docker run --rm -it -p 3000:3000 e2e-tutorial-frontend
(make sure you don't have the frontend already using the port 3000 in another terminal)
You should see something pretty similar to just starting the frontend with yarn start. Go ahead and check http://localhost:3000
Just that you won't be able to see any User, since this the frontend will try to make calls to http://localhost:3001 (according to our webpack proxy configuration). And that microinstance won't have anything running at port 3001.
You will actually see this in the console
[HPM] Error occurred while trying to proxy request /users from localhost:3000 to http://localhost:3001/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
We will solve that later, since it is basically orchestrating the different modules.