Skip to content

How to Deploy an Angular Application to Production on Code Capsules

Deploy an Angular application and learn how to host frontend code on Code Capsules.

Set Up

Code Capsules connects to GitHub repositories to deploy applications. For this tutorial, you'll need: - A Code Capsules account. - A GitHub account.

To demonstrate how to deploy an Angular application with Code Capsules, we'll use our example application.

Follow the link above and fork the application by clicking "fork" at the top-right of the repository. With the Angular application forked to your GitHub account, we are ready to deploy it on Code Capsules.

demo angular github

Sign Up for Code Capsules

If you don't already have a Code Capsules account, head to the site and click the "Sign Up" button in the top right. Enter your details to create an account, or log into an existing one.

If you've just signed up for an account, you'll be directed to the Welcome page on your first login. Click on the "Go To Personal Team" button.

welcome screen

After clicking on the "Go To Personal Team" button, you will be redirected to the Spaces tab for your Personal Team. A Team is an environment for you to manage your Spaces and Capsules. Teams can have multiple members interacting with the projects associated with that particular Team. Code Capsules gives every account a Personal Team as the default.

Create a Space for Your Apps

create a new space

Spaces are an organisational tool for your applications. Click the "Create A New Space For Your Apps" button and follow the prompts, naming the Space anything you'd like.

space name

Now that we've created a Space, we need to connect the GitHub repository we forked to our Code Capsules.

To host our application on Code Capsules, we need to link our forked GitHub repository to our Code Capsules account.

We can link the GitHub repository by clicking the profile image at the top right of the screen, and finding the "GitHub" button under "GitHub Details".

git-button

Click the "GitHub" button. To give Code Capsules access to the Angular application:

  1. Click your GitHub username.
  2. Select "Only Select Repositories".
  3. Choose the GitHub repository we forked.
  4. Press "Install & Authorize".

Install & authorize github

After authorising, Code Capsules will be able to read the contents of the selected repositories. All that's left to deploy the application is to add the repo to your Team and create a Capsule. Capsules act as storage space for the different types of applications you'd host on Code Capsules.

Add Repo to Team

Click on "Team Settings" on the top navigation bar to switch to the Team Settings tab. Once there, click on the "Modify" button under the Team Repos section to add the repo to your Personal Team. When the "Edit Team Repos" screen slides in, select "Add" next to the repo you want to add to your Personal Team and then confirm. After this is done, all Spaces in your Team will have access to this repo.

Edit Team Repos

Create and Build the Capsule

It's time to create a Capsule. To do this, navigate to the Spaces tab and open the Space you created for this tutorial. Once inside the Space, click the "New Capsule" or "Create A New Capsule For Your Space" button and follow the instructions below.

  1. Choose a "Frontend" Capsule.
  2. Select the "Trial - Static Site Hosting" product.
  3. Choose the GitHub repository we forked.
  4. Press next.
  5. Use npm run build for the "Build command" and dist for "Static content folder path".
  6. Press "Create Capsule".

Create Front-end Capsule

You can view the build logs under the Build and Deploy tab in your Capsule. When the Capsule builds, navigate to the Overview tab and click on the provided URL to view the application.

Build logs

For a better understanding of Capsules, read this explanation on Capsules.

If you want to deploy another Angular application in the future, it'll be useful to check out the script Code Capsules used to build the Angular application. Navigate to the Angular repository we forked and take a look at the package.json file. On line four, you'll see the script Code Capsules used to deploy the application.