tye/samples/apps-with-core-angular

Setup Steps

• In order to run this, there are two scenarios. First one is via Dockerfile of angular project and second one via its image. For, first scenario, tye file looks like

name: project-tye
services:
- name: moviesapi
  project: MoviesAPI/MoviesAPI.csproj
  bindings:
  - protocol: https
    port: 5001
  
- name: moviesapp
  dockerFile: MoviesApp/Dockerfile
  bindings:
  - protocol: http
    port: 4400

• As you can see, .Net docker file will be taken care by the project itself and for angular project, you need to provide dockerFile path.

• Here I have provided port for api and movies app project both. Since, I am using 5001 port in angular app for making a service call. Hence, I specified it explicitly. MoviesApp can have random port number. It depends on you, how you would like to keep it.

• Having said that, first you need to do tye build . at the root level of your project to build it. Upon successful build, it should come like

• Next, we need to run the project with tye run. Upon successful execution, it should come like

• Then, dashboard http://127.0.0.1:8000/ will appear like

• For Movies app; since, we have used Dockerfile as source, hence its not visible at the moment. In future implementation, it may fetch source for Dockerfile location as well.

• Api can be navigated at https://localhost:5001/api/movies like

and Similarly, Movies App can be viewed at http://localhost:4400/movies/ like

• For second scenario,

• First of all you need to create docker image for angular project. Hence, you need to go into MoviesApp project and run the command docker build -t moviesapp:dev .

• Once this done, then you can verify the images with docker images command and it will come something like this:

• The image which you created earlier can be tagged here. You also need to mention port number explicitly for .net project as this is internally getting used by angular app.

• Next, tye.yaml file looks like as shown below

name: project-tye
services:
- name: moviesapi
  project: MoviesAPI/MoviesAPI.csproj
  bindings:
  - protocol: https
    port: 5001
  
- name: moviesapp
  image: moviesapp:dev
  bindings:
  - protocol: http
    port: 4400

• Next, you can build and run tye same as explained above.

• Here also you can navigate the dashboard link at the same url http://127.0.0.1:8000/. Only difference is it will show moviesapp:dev as source.

Therefore, we have seen two ways to execute this scenario. You can pick either way. Even for .net project as well, we can have Dockerfile if we would like to do custom changes.

Thanks for joining me. In case if you have any further query, you can reach out to me at https://twitter.com/rahulsahay19