How to Deploy a React Application to Production on Code Capsules
To follow along, you'll need:
Get Some Example Code
We'll use our example React application for the demonstration. You can use your own React application instead, or work from ours as a starting point.
Fork the project to your own account by clicking on the above link and pressing "fork" in the top right.
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.
You will be redirected to the Spaces tab for your Personal Team. Code Capsules gives every account a Personal Team as a default.
Create a Space for Your Apps
Next, click on the "Create A New Space For Your Apps" button. Alternatively, if you had logged into an existing Code Capsules account, click on the "New Space" button to create a new space for this tutorial, or select any of your existing ones. Whichever way you go about it, a UI similar to the one shown below should slide in from the right of your screen.
Select an appropriate region and enter a name for your space, then click "Create Space".
Link to GitHub
To host our React 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".
Click the "GitHub" button. To give Code Capsules access to the React application, you need to:
- 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 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. This Capsule will act as a storage space for the React application.
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. Once this is done, all Spaces in your team will have access to this repo.
Create the Capsule
Return to the Spaces tab. Next, click on the Space you just created or are using, and create a new capsule in that space. To do this, click the "New Capsule" or "Create A New Capsule For Your Space" button when inside the space.
Since we want to host a React application, choose to create a frontend capsule as shown below.
Select the repository with the project you want to host on Code Capsules and enter the build command that will be used by Code Capsules when building your project. Also enter the static folder holding the static files for your project.
After creating the Capsule, the Capsule will build the React application. You can view the build logs by clicking the "Build and Deploy" tab in the Capsule and then "View build log".
Once built, navigate to the "Overview" tab. Code Capsules provides a default URL for viewing applications – find this under "Domains". Click the URL to view the application.
If you'd like to deploy another React application in the future, take a look at the React 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 16 of the