7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 Installing Codebox With Ionic

In this lesson, I'll show you how to configure a Codebox with the Ionic Framework.

3.3 Installing Codebox With Ionic

Hello everyone. This is Reggie Dawson. Welcome to the docker for deployment course for tuts plus. In this video, we're going to set up code box with the ionic framework. Codebox is an IDE designed to be hosted on a Linux machine. It gives us a development environment that we can build our entire project with. The reason I chose to set this up is the show you an alternate workflow when it comes to using docker. Normally, we set up our containers and gain access to a volume to share the content we need for our container. When it comes to a framework like Ionic, it is difficult to use in a container. There are images for ionic we can find on the docker hub and they do work. Unfortunately, they are merely a machine that you can run various ionic commands against and you can't really develop directly inside of the container. In this example, we are going to configure our container to allow us to develop our project from start to finish. We'll be able to start and preview our project. The only thing we won't be able to do is test our app on the actual mobile device. Now this container is going to be far from perfect. There's definitely an opportunity to improve this build, but that will require using docker file. For our purposes this will give you a working base to start from, the first thing we need to do is create a container with the called Box image, we can search on the docker hub to kitematic, but we will need the terminal to configure this due to ionic first we will run this command from the terminal. This will create a container based on the code box image. We are naming this container ionic base because we are going to create an image from this container. Then we have environment variables for our Codebox, user name, and password. And then after that, we have our exposed ports. The first port mapping is for Codebox, and we will access code box from port 80. The next port is why ionic serve and we will preview our project. The final port is for live reload which will refresh your browser when we update our project. Finally, we have our volume mapping for the project. Now the workspace of the Codebox images. In the docker file and we will still have access to the violon kitematic without the reason I'm adding this here is because I found a bug that resets the port mappings if you map the violon to your local machine to kitemetic. Fortunately, when we use the image we create from this container, we won't have to add the map volumes anymore. After we run this command we can just go to the IP address of our host or click on the Preview pane. Notice we don't have to add the port, because when we use a browser we are using port 80 by default. When we first go to Codebox, we will be prompted for a username and password. Use username for the username, and password for the password. Remember those environment variables? Here in Codebox we have the ability to develop an assortment of different projects. The other reason I chose Codebox is that it also gives you full access to the terminal on the host machine. Since we have that, hopefully we have MPN. NPM is the package manager for node that allows us to install software easily. And fortunately this image does have in MPN. In order to install ionic we run this command. This has installed the ionic framework with Cordova which is built on top of. Now, this installation does not include the platform ST case we need to actually compile an app the reason I am not doing this is that we can use a service such as I and it package or phone get billed to compile our app. As far as configuring our container that's all we need to do. We are ready to go. Our projects will be saved and accessible from where we mapped our folder, but before we start developing, let's make our container into an image. Once we have our image we can stop our original container and use our image. Now in order to run the image we don't need to use all the options we previously did, but we still need to use the terminal. Notice we still have to add the ports, but the environment variables in the host volume are gone. If we look at the volumes in keen manner, we can see that the volume is exposed, and we can set the host folder from here. Go ahead and map the volume to your desired host folder, Then click on the preview window to go to Codebox. After that, open up a terminal so that we can use the ionic start command. This command will create a project that is stored in the folder that we mapped. Run the ionic serve command inside of your project folder. Then we can navigate to the same IPS Codebox with the colon followed by this 80-100. This navigates to our running ionic project. Here we can preview as we develop our ad. you now have a full development environment set up for ionic but we could easily add other framework such as foundation which is also an MPN. based install. Now you know how to create and manage docker containers and should be able to integrate docker into your workflow in some way.

Back to the top