Skip to main content

PART 2 [Front end] - Docker for Angular + Spring Boot

this the second part of dockerizing an angular 6 and spring boot app

Part 1 here: http://dev.basharallabadi.com/2018/08/part-1-backend-docker-for-angular.html

I followed this blog:
https://mherman.org/blog/2018/02/26/dockerizing-an-angular-app/

so basically three steps:

1- create docker file
2- create docker compose
3- docker-compose build .. docker-compose up

here is the files I'll be explaining to achive this:
.

1- Dockerfile
This docker file uses multi stage build, which means it uses multiple docker images to produce final image.

why?

because the image we need to build the angular app requires alot of dependencies that are not needed to run the app.

in the first part of the docker file:
- it starts based on a node image
- prepares the app directory
- copies package.json from the source code directory to the docker container directory
- executes npm install which will install all node dependencies.
- install angular cli globally (version 6)
- copy everything from the root directory to the 'app' directory we created before
- execute ng build to get the compiled app code that will be served by a web server
  note that for this step I'm specifying the build environment, which is passed as an arg to the dockerfile
 this command used to be : ng build --env=$build_env .. but in angular 6 got changed.

The reason we build the app is because the ng serve is good for local  development use only.
it's not good and it didn't seem to work to accept remote requests over the network
and in my case I wanted to use docker to make it faster to deploy the app on different environments not to develop there so I went with the choice to build the app.
The reason I pass the environment is to specify for angular which environment.ts file to be used because I wanted to be able to debug this build if needed, and not have production build where it's harder to debug.

2nd part / stage :
-we start off an official nginx image
-copy the output from first image build to the html directory of nginx container (the path for the html directory is provided by the image itself)
- copy our custom nginx configs to overwrite default configs
[ the reason for this is to proxy our api calls from angular through nginx to the boot REST api container to avoid allowing CORS (Cross Origin Requests).. note that I used the IP of the instance to get the requests to the boot container on port 8080 ]
- expose port 8008 from this container to the outer world network
- start nginx 


Things worth noting:
* while building the angular app it was throwing disk out of space error.. this is due to the huge size of the node_modules directory, and because docker doesn't clean up images between part 1 & 2

so to avoid any issues make sure to clean up the unused docker artifacts before/after the image build:
- docker system prune -a -f
- docker volume ls -qf dangling=true | xargs -r docker volume rm;


Comments

Popular posts from this blog

Android RecyclerView - Adding Empty View

So RecyclerView was introduced to replace List view and it's optimized to reuse existing views and so it's faster and more efficient as stated in the documentation:

https://developer.android.com/training/material/lists-cards.html

While using it, I faced the issue of missing a useful functionality that is implemented in ListView.
that feature is setting an empty view in case there was no records.

In ListView it was as simple as this

View emptyView = findViewById(R.id.mylist_empty_view);
ListView  myList = ....
myList.setEmptyView(emptyView);

but this method doesn't exist for recycler view so we need a work around until android team fixes this.


and here are the screen shots of both list view and recycler view fix

List view :

Recycler view :



here is how I fixed it:



here is the content of empty_view, it can be anything.



Enjoy.

Creating your own OAuth2 server and clients using spring security - part 1

In this series of posts, I'll try to put together a simple working example on how to create your own OAuth2 server.

if you want to know more on OAuth2 and when to use it as authentication and authorization protocol then you can search about it on google and i'll put some URLs later.

Now I assume you are familiar with java web applications using Spring and maven.

to get started we need to create the server side with all dependencies required and i'll list them here, i'll use maven 2 to ease downloading dependencies for us.


Steps:

1- Create new maven project with arch type webapp:



2- Add the required depenedencies for spring, spring security, spring-oauth2, hibernate & other libraries (required for this tutorial only you can use other libraries if you like)

https://gist.github.com/anonymous/d33a31ddc3ba84375cf3

3- I used hibernate to automate the creation of the schema required by spring OAuth2 to manage tokens (it's required to have schema created in db if you a…

Android - Multiple themes for one application

Sometimes you want to have multiple themes for your app
one strong example is having the ability to switch between dark and light themes because during night, a white bright screen can really be annoying for users eyes

Android will do most of the work for you but it may be required to change icons between themes to fit colors
In this blog I'll show a simple app with both dark and light themes and how to change icons without having to do that from code and keep things clean and centralized.
first of all let's create our activity, it will look something like this :


In /rest/values/styles.xml, we inherit Theme.AppCompat
 <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat">
        <!--
            Theme customizations available in newer API levels can go in
            res/values…