How to Deploy a Vue Application to Production on Code Capsules
Deploy a Vue application and learn how to host frontend code on Code Capsules.
We'll deploy a Vue application on Code Capsules using example source code provided by Code Capsules on their GitHub. You can find the repository here. You can also link any of your GitHub repositories to Code Capsules, and Code Capsules will deploy it.
In order to deploy this repository to Code Capsules, make sure to fork the Vue application. You can do so by visiting the repository and clicking the "Fork" button at the top right.
After forking the application, we can deploy it. Make any edits you'd like to the repository and continue.
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 created an account, make sure to confirm it by checking your email for a message from Code Capsules. On your first login, you'll be directed to the Welcome page. Click on the "Go To Personal Team" button.
A Team is an environment for you to manage your Spaces and Capsules. Code Capsules gives every account a Personal Team as a default. The default Personal Team allows users to host static frontend websites for free.
Create a Space for Your Apps
Spaces are an organisational tool for your applications. Click on the "Create A New Space For Your Apps" button. Alternatively, if you had logged into an existing Code Capsules account, you could click on the "New Space" button to create a new Space for this tutorial, or select any of your existing ones. After actioning either of these steps, a UI similar to the one shown below should slide in from the right of your screen.
Select an appropriate region, enter a name for your space, and press "Create Space".
Link to GitHub
To host our Vue application on Code Capsules, we need to link our forked GitHub repository to our Code Capsules account.
We can link the Vue application by clicking the profile image at the top right of the screen, and finding the "GitHub" button under "GitHub Details"
Click the "GitHub" button. To give Code Capsules access to the Vue application:
- Click your GitHub username.
- Select "Only Select Repositories".
- Choose the GitHub repository we forked.
- Press "Install & Authorize".
After authorising, Code Capsules will be able to read the repository containing the Vue application. All that's left to deploy the application is to add the repo to our Team and create a Capsule.
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.
Create the Capsule
Capsules act as storage spaces for applications. For a better understanding of Capsules, read this explanation on Capsules.
To deploy the Vue application, go back to the Spaces tab. Next, click on the Space you just created or are using, and create a new Capsule in that Space. Click the "New Capsule" or "Create A New Capsule For Your Space" button when inside the Space. Next:
- Choose a "Frontend" Capsule.
- Select the "Trial – Static Site Hosting" product.
- Choose the GitHub repository we forked.
- Press next.
npm run buildfor the "Build command" and
distfor "Static content folder path".
- Press "Create Capsule".
After creating the Capsule, the Capsule will build the Vue application. You can view the build logs by clicking the "Logs" tab in the Capsule.
Once built, navigate to the Overview tab. Code Capsules provides a default URL for viewing applications; you can find this under "domains". Click the URL to view the application.
If you'd like to deploy another Vue application in the future, take a look at the Vue repository. Code Capsules was able to deploy the application by reading the
package.json file. You can find the script that Code Capsules used to run the application on line five in the