未加星标

Rapid Prototyping with Ionic 2 and Node.js Part 3

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Rapid Prototyping with Ionic 2 and Node.js   Part 3

If you have developed an app you want to get it out into the hands of other people. But what’s the easiest way to do so without already submitting your unfinished app? And what about your backend?

In this last part of our 3 part series we will see how to easily use an Ionic service to show your app to other people in nearly no time. Also we will deploy our Node.js backend to a server we can reach from everywhere (not just localhost).

All of the 3 parts of the series can be found below:

Rapid Prototyping with Ionic 2 and Node.js Part 1: The Node.js Backend

Rapid Prototyping with Ionic 2 and Node.js Part 2: The Ionic 2 Frontend

Rapid Prototyping with Ionic 2 and Node.js Part 3: Deployment of your Components How to get your MVP out?

There are different options to get our your app. The way described inside Ionic 2 From Zero to App Store is the standard iOS and Android procedure of alpha & beta staging. This official way involves having an iOS developer account as well as a Google Play Developer account.

If you have both of them, you can “ simply ” submit your apps and start an alpha or beta test with selected people before the app officially hits the app store. Simply means, you still have to insert a lot of details for your apps as they will be shown like regular store entries to your testers so it takes some time to provide that.

But there’s another less stressful way which involves the Ionic View service which we will use to provide access to our MVP.

What about the backend side?

It’s quite easy to hit npm start and happily connect your app to localhost, but of course you can’t start that same server on your local machine for people out there that are going to test your app. If you have your own server you can get the code deployed there, install all the needed packages for Node.js and add a redirect to the port of the running backend.

You say, although you might even have a server it won’t be that easy, and for others it’s likely to see only question marks if they had to deploy the server. That’s why we use the simple and (in the beginning) free to use service Heroku to deploy and run our app in really no time.

If you have never done it before you might be surprised how easy it can be to get out your complete functional app into the hands of others, so follow along the next steps to finally deploy our frontend and backend!

Upload your Node.js Server to Heroku

For this part you need the code from the first part of the series , so make sure you have the backend code ready for the next steps or go back to get it now!

First of all we will make our backend available. If you haven’t done yet, make sure to create a new account on Heroku (it’s free) to get started.

Once you are ready, we need to install the Heroku CLI so download it and follow the installation steps.

After we have installed the toolbelt (I think that was the previous name) we need to login to our account from the command line, so run

herokulogin

Also, if your repository is not yet a Git repository we need to quickly init git and commit our current folder. In that case also run inside the folder of your backend app:

$ cdmyapp gitinit # Initialized empty Git repository in .git/ gitadd . gitcommit -m "my first commit"

If you already have a repository it’s quite easy to connect it to Heroku aswell, simply check out the Heroku Git setup guide .

We are now ready to create a new Heroku app. This will create a new instance inside your dashboard if you login to your account, and this is the place where we can now push our code to. Once we run the create command, Heroku actually set’s the remote URLs for our repository which you can directly display after running it.

To finally “ deploy ” your application, you need to push your git changes to the Heroku remote. You will see some logs from your deployment and hopefully read something like “success” in the end which is a good sign that something has worked. Now run these commands inside your backend folder:

$ herokucreate gitremote -v # heroku https://git.heroku.com/<your-repo>.git (fetch) # heroku https://git.heroku.com/<your-repo>.git (push) gitpushherokumaster

We are almost finished, but remember that we used a local MongoDB

We need a MongoDB!!

Don’t panic, Heroku for the win. Heroku allows to easily configure add ons for your instance, and one of those is the Cloud MongoDB service mLab .

If you have your own isntance of MongoDB running somewhere you can of course use that, but if not simply follow the steps below to integrate mLab into your Heroku instance.

Configure mLab for Heroku

Inside your Heroku dashboard select the app of your backend. If you have multiple, make sure to select the right one!


Rapid Prototyping with Ionic 2 and Node.js   Part 3

Inside the view of your app click on Configure Add-ons which will take you to a new screen.


Rapid Prototyping with Ionic 2 and Node.js   Part 3

In the section Add ons simply start typing mongo or mlab until the entry shows up in the list below.


Rapid Prototyping with Ionic 2 and Node.js   Part 3

Select the plan that fits you best. For this tutorial I simply picked Sandbox because we are only testing some stuff, so you can go with that option for now!


Rapid Prototyping with Ionic 2 and Node.js   Part 3

After you have selected mLab the service should show up inside your add ons area and Heroku will show you a success message.


Rapid Prototyping with Ionic 2 and Node.js   Part 3

You have now successful configured a MongoDB inside Heroku!

We can now (with a little trick) grep the URL for our database by running the following command inside our folder:

herokuconfig | grepMONGODB_URI

Remember our config.json inside the backend project? Edit this file now and insert the URL you got from the previous command.

{ "database": "mongodb://<dbuser>:<dbpassword>@12356.mlab.com:55718/heroku_a123456" }

Now commit and push to Heroku again and your backend is completely living in the cloud!

You can try to connect with Postman now, you can find your URL to the app online or again by using a simple command:

herokuinfo -s | grepweb_url | cut -d= -f2

( thanks to Stackoverflow )

If you want to see how to see Postman requests

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Node.jsMongoDBGitiOSAndroid
分页:12
转载请注明
本文标题:Rapid Prototyping with Ionic 2 and Node.js Part 3
本站链接:http://www.codesec.net/view/530996.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(31)