Introduction
This post is going to describe how I created a frontend for the private docker registry made in part 1.
Docker setup
uconn/express image
Because I wanted to use docker for this project, the first thing I needed to do was create another container that would run the express server. I tried to keep the image I made for this task fairly straightforward. Perhaps I'll post more technical details later, but briefly it....
- creates a /project directory to work in
- exposes ports at 3000 and 3001
- installs dependencies from a package.json file
- starts the server
docker-compose.yml
With this image for express, I could create a new entry in the docker-compose.yml file. The new service looks like this...
All of these properties were explained in Part 1. So, the whole file looks like this -
The image is pre-configured to execute the command npm run start. So any start command that is added to the package.json file will be used automatically! In this case for development, I wanted to make sure I could run both the server and webpack. Next, I'll show how I started that process.
Server setup
Before writing any code, it's important to get a few things out of the way.
- adding dependencies for the server
- setting up npm tasks
- creating a few files and folders
Starting dependencies
To get started I wanted to make sure that I could
- get a server running (and keep it running) and serve some static content
- have some nice logging features
- be able to run npm tasks in parallel
- test a 'hello world' api route
I'll leave webpack and most of the frontend for the next section.
To start, install dependencies with the following commands
npm init(to set up the package.json)npm install axios expressnpm install --save-dev morgan nodemon npm-run-all
That's it!
Starting tasks
Next you need to add some tasks to the scripts section of the package.json. If there's no scripts section, that's ok. Add it in!
The scripts needed are going to:
- use nodemon to start a server and keep it running
- use webpack to watch our files (no, we haven't added this yet, I'll come back to it later)
- run these tasks in parallel (which will also happen later)
Hello server! Getting an express server started.
To start, create a server.js file at the root of your project. At the top of that file, bring in
- axios
- express
- and the username/password from the .env.js file that was created by the auth script from Part 1.
Next, I like to create a section where I can keep track of everything going on in the server environment. More will be added to this section later, but for now below the require statements....
Below that, it's time to
- create the express server
- enable logging
- and enable serving static assets
To do that, you'll create an express app and use the use method along with morgan and the express.static method.
The express.static method will now serve any static assets inside the public folder. So anything you want visible in the browser should go there.
The last thing you need to do is actually start the server. Because right now it isn't doing anything. To do that, at the very end of the server.js file, add:
Now when the docker container is run, the server will automatically be built and begin listening and serving files from the public folder on localhost:3000. At this point, the whole file should look like this....
Conclusion
At this point, the container is ready to serve files because the host port and directory are mapped to the docker container. But there's still a problem.
The front end can't yet communicate with the registry container that has all the images.
So that's the next post! I'll get into a little bit of docker networking and sending requests from the browser to the registry container and back.