Angular allows us to build performant web applications that can be deployed to mobile, web and desktop. is a popular service that is easy to use with a CLI tool. In this article, we’ll be using Travis CI to automate this deployment.

Angular允许我们构建可部署到移动，Web和桌面的高性能Web应用程序。 是一项受欢迎的服务，可通过CLI工具轻松使用。 在本文中，我们将使用Travis CI自动执行此部署。

新角度应用 (New Angular Application)

Create a new Angular project with the to establish a common base:

使用创建一个新的Angular项目以建立公共基础：

# Install the Angular CLI$ npm i @angular/cli -g# Create a new Angular project with the name of your choosing && change directory$ ng new AngularFirebaseCI> N> SCSS$ cd AngularFirebaseCI# Open this up in VS Code and Serve$ code . && ng serve

We can now create a basic Angular project. Head over to app.component.html and create the following template:

现在，我们可以创建一个基本的Angular项目。 转到app.component.html并创建以下模板：

    
  
     
    
      
Angular, Travis CI & Firebase Hosting
    
      
🔥🔥🔥
  
     
    

We can also add some CSS styles to make it a little more magic, inside of app.component.scss:

我们还可以在app.component.scss内部添加一些CSS样式，使其更具魔力：

section {  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background: #8a2387;  background: -webkit-linear-gradient(to right, #f27121, #e94057, #8a2387);   background: linear-gradient(    to right,    #f27121,    #e94057,    #8a2387  );}article {  text-align: center;  color: white;  padding: 40px;  box-shadow: 1px 1px 200px rgba(0, 0, 0, 0.8);}

Finally, inside of the global styles.scss let’s default the html and body styles:

最后，在全局styles.scss内部，我们默认使用html和body样式：

html,body {  padding: 0px;  margin: 0px;}

Firebase托管 (Firebase Hosting)

The first step in our process is to get Firebase Hosting up and running. Head over to and create a new project:

我们流程的第一步是启动并运行Firebase Hosting。 转到并创建一个新项目：

Firebase工具CLI (Firebase Tools CLI)

We can install the firebase-tools CLI globally by running the following in the terminal:

我们可以通过在终端中运行以下命令来全局安装firebase-tools CLI：

$ npm install -g firebase-tools

After installation, log in to the CLI by running:

安装后，通过运行以下命令登录到CLI：

$ firebase login

Now that we’re authenticated, we can initialize Firebase inside of our project.

现在，我们已经通过身份验证，可以在项目内部初始化Firebase。

$ firebase init> Hosting? Select a default Firebase project for this directoryyour-firebase-id? What do you want to use as your public directory? dist/? Configure as a single-page app (rewrite all urls to /index.html)?Yes

Sweet. We’re now ready to deploy our application to Firebase! Let’s build it for production using the Angular CLI:

甜。 现在，我们准备将应用程序部署到Firebase！ 让我们使用Angular CLI构建它以进行生产：

$ ng build --prod

This generates a dist folder with all of our files inside. Deploy that to firebase with:

这将生成一个dist文件夹，其中包含我们所有的文件。 使用以下命令将其部署到firebase：

$ firebase deploy

If you got a message similar to the below, everything went well:

如果收到类似以下的消息，则说明一切顺利：

✔  Deploy complete!Project Console: https://console.firebase.google.com/project/your-app/overviewHosting URL: https://your-app.firebaseapp.com

Travis CI自动化 (Travis CI Automation)

It’s not great having to do this manually each time. Sure, it’s only two commands, but what if we had multiple team members? Also, I don’t want to have to think about deployment, I want to write more code!

每次都必须手动执行此操作不是很好。 当然，只有两个命令，但是如果我们有多个团队成员怎么办？ 另外，我不想考虑部署，我想编写更多代码！

Firstly, head over to and log in with your GitHub account. Allow Travis access to all of your repositories.

首先，转到并使用您的GitHub帐户登录。 允许Travis访问您所有的存储库。

This will show us a list of repositories that we can automate, but ours isn’t there… because it doesn’t exist!

这将向我们显示可以自动化的存储库列表，但是我们的存储库不存在……因为它不存在！

新资料库 (New Repository)

Create a new GitHub repository over at

通过创建一个新的GitHub存储库

We can then push this to GitHub with the following commands:

然后，我们可以使用以下命令将其推送到GitHub：

git remote add origin https://github.com/YourUser/YourRepoName.gitgit push -u origin master

部署方式 (Deployment)

We’re nearly there. We now need to create a .travis.yml file that contains the automated deployment steps:

我们快到了。 现在，我们需要创建一个.travis.yml文件，其中包含自动部署步骤：

language: node_jsnode_js:  - "11.0"branches:  only:    - masterbefore_script:  - npm install -g @angular/cliscript:  - npm install  - npm run builddeploy:  skip_cleanup: true  provider: firebase  token:    secure: ""

The Travis CI automation steps are built in yml and provide an understandable set of instructions.

Travis CI自动化步骤内置于yml并提供了一套易于理解的说明。

Something looks off. The token is blank. This is because we need to generate it with the firebase CLI:

看起来有些不对劲。 token为空。 这是因为我们需要使用firebase CLI生成它：

$ firebase login:ci

You should get back a long token that can be used in place of the empty token above.

您应该取回一个长令牌，该令牌可以代替上面的空token 。

Push this .travis.yml file up to GitHub with the following:

使用以下命令将此.travis.yml文件推送到GitHub：

$ git add .$ git commit -m "Added Travis CI automation!"$ git push

Now, head over to and check out the build!

现在，转到并检查构建！

=== Deploying to 'app-5c310'...i  deploying hostingi  hosting[app-5c310]: beginning deploy...i  hosting[app-5c310]: found 14 files in dist/AngularFirebaseCIi  hosting: uploading new files [0/14] (0%)i  hosting: uploading new files [12/14] (85%)✔  hosting[app-5c310]: file upload completei  hosting[app-5c310]: finalizing version...✔  hosting[app-5c310]: version finalizedi  hosting[app-5c310]: releasing new version...✔  hosting[app-5c310]: release complete✔  Deploy complete!

摘要 (Summary)

In this article we looked at how to create an application with Angular and deploy it to Firebase Hosting.

在本文中，我们研究了如何使用Angular创建应用程序并将其部署到Firebase Hosting。

We then looked at how to automate this process with Travis CI. Any time the master branch is updated, this build process will run and publish to Firebase Hosting.

然后，我们研究了如何使用Travis CI自动执行此过程。 每次更新master分支时，此构建过程都会运行并发布到Firebase Hosting。

翻译自: