How to create meteor.js + react.js app on galaxy + MongoDB Atlas

[Mobile version(QRCode)] Total views:57,442 / Applauds for blog:1
Welcome to my page. I am an adminisrator of this site.
If you are this db's user, please contact with me by private mail. If not, please contact with me by email or twitter or facebook
Access record[Graph / PV Info.(Past 1 day / Past 1 week) / Access from outside (Yesterday / Past 1 week) / Vistors's list]
ProfilePmail(Mail)
Inbox   /Send   /Sent
Reviews(List   /Limit)
Poll   /Agree:Got   /Sent
Fan
Works/Music
Blog
[Write]
Links
My Play List
<=Newer article2016/10/31 Sunday in SG
=>Older article2016/10/11 How to use Xamarin

1.
2016/10/19 "Meteor > How to create meteor.js + react.js app on galaxy + MongoDB Atlas"
[Show only this article / Modify / Delete / Send trackback / Add to the shared category]

1. Try and see how meteor work
  1. Common preparation
    1. Install Xcode
    2. Install Cocoapad
    3. Install Java
    4. Install Android Studio
    5. Install meteor
  2. Start the development of meteor with react
2. Modules to be installed for meteor + react development
  1. Modules which are in todos example
  2. Additional modules to be installed
3. Directory and file structure of todos app with react based on the set of called sequence
  1. Top page
    1. Client side
    2. Server side
  2. lists/:id
    1. Client side
  3. User account architecture when we user account-xxx
  4. Other
4. Points which you have to pay attention when you use React
  1. class should be changed into className
5. How to make app run
  1. Web
  2. iOS (iPhone)
  3. Android
6. How to deploy
  1. Use galaxy
    1. How to set original domain and how to deal with root domain
    2. Prepare mongodb cluster making use of DBBAS
    3. Deploy app to galaxy
7. Good resources to study meteor + react
8. Creating service based on above flow

1. Try and see how meteor work


  1. Common preparation

This is written for Mac users.
    1. Install Xcode

https://developer.apple.com/xcode/
    2. Install Cocoapad

sudo gem install cocoapods;
pod setup;
    3. Install Java

https://java.com/en/download/
    4. Install Android Studio

https://developer.android.com/studio/index.html
On 10/March/2017, latest version has compatibility problem, so you have to download older version
tools_r25.2.5
https://androidsdkoffline.blogspot.jp/p/android-sdk-tools.html

And you have to create project, delete all device and register 1 device by hand.
    5. Install meteor

curl https://install.meteor.com/ | sh;
  2. Start the development of meteor with react

Let's use official example code of meteor + react using for todos application.
I compared multiple meteor repositories but reached the conclusion that this is the best repository for us to start the development using meteor + react.
PJ=travelplan;
git clone https://github.com/meteor/todos $PJ;

cd $PJ;
git checkout react;
git pull;

rm -rf .git;
meteor npm install;
meteor update;
meteor update --all-packages;
meteor;

2. Modules to be installed for meteor + react development


  1. Modules which are in todos example

accounts-baseMeteor's user account system. This package implements the basic functions necessary for user accounts and lets other packages register login services
accounts-passwordA login service that enables secure password-based login.
aldeed:collection2A Meteor package that allows you to attach a schema to a Mongo.Collection. Automatically validates against that schema when inserting and updating from client or server code.
aldeed:collection2-coreA Meteor package that allows you to attach a schema to a Mongo.Collection. Automatically validates against that schema when inserting and updating from client or server code.
aldeed:schema-denyA Meteor package that allows you to deny inserting or updating certain properties in your database by setting options in your schema.
aldeed:schema-indexA Meteor package that allows you to control some MongoDB indexing from your SimpleSchema. This package is currently included automatically with the aldeed:collection2 package.
aldeed:simple-schemaA simple, reactive schema validation smart package for Meteor
allow-denyImplements functionality for allow/deny and client-side db operations
app-prod-security
audit-argument-checksTry to detect inadequate input sanitization
autoupdate 
babel-compiler 
babel-runtimeMeteor maintains a version of the runtime helpers needed by Babel-transpiled code. In most cases, the code is copied from Babel's helper implementations, though we have also made some changes.
base64Base64 encoding and decoding
binary-heapBinary Heap datastructure implementation
blazeBlaze is a powerful library for creating user interfaces by writing reactive HTML templates. Compared to using a combination of traditional templates and jQuery, Blaze eliminates the need for all the "update logic" in your app that listens for data changes and manipulates the DOM.
blaze-tools 
boilerplate-generator 
browser-policyConfigure security policies enforced by the browser
browser-policy-common 
browser-policy-content 
browser-policy-framing 
caching-compiler 
caching-html-compiler 
callback-hook 
check 
chriswessels:hammerA smart-package for integrating with Hammer.js for multi-touch gesture support in your Templates.
coffeescript 
crosswalk 
dburles:collection-helpers 
ddpDDP (Distributed Data Protocol) is the stateful websocket protocol that Meteor uses to communicate between the client and the server.
ddp-clientA callback style DDP (Meteor's Distributed Data Protocol) node client, originally based
ddp-commonCode shared beween ddp-client and ddp-server
ddp-rate-limiter 
ddp-server 
deps 
diff-sequence 
dispatch:mocha-phantomjs 
dispatch:phantomjs-tests 
ecmascript 
ecmascript-runtime 
ejson 
email 
es5-shim 
factoryA package for creating test data or for generating fixtures.
fastclickFastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.
force-ssl 
geojson-utils 
hot-code-pushUpdate the client in place when new code is available.
html-tools 
htmljs 
http 
hwillson:stub-collections 
id-map 
jquery 
juliancwirko:postcss 
launch-screen 
less 
livedata 
localstorage 
logging 
mdg:validated-methodDefine Meteor methods in a structured way, with mixins
mdg:validation-error 
meteor 
meteor-base 
minifier-css 
minifier-js 
minimongo 
mobile-experience 
mobile-status-bar 
modules 
modules-runtime 
mongo 
mongo-idJS simulation of MongoDB ObjectIDs
npm-bcrypt 
npm-mongo 
observe-sequence 
ordered-dict 
practicalmeteor:chaiThe Chai Assertion Library, packaged for meteor.
practicalmeteor:loglevel 
practicalmeteor:mocha 
practicalmeteor:mocha-core 
practicalmeteor:sinon 
promise 
publication-collector 
raix:eventemitter 
random 
rate-limit 
react-meteor-dataThis package provides an integration between React and tracker, Meteor's reactive data system.
reactive-dict 
reactive-var 
reload 
retry 
reywood:publish-composite 
routepolicy 
service-configuration 
session 
sha 
shell-server 
simple:authenticate-user-by-token 
simple:json-routes 
simple:restAdd this package to get an automatic JSON HTTP API for all of your Meteor app's publications and methods.
simple:rest-accounts-password 
simple:rest-bearer-token-parser 
simple:rest-json-error-handler 
spacebars 
spacebars-compiler 
srp 
standard-minifier-js 
static-htmlDefine static page content in .html files
templating 
templating-compiler 
templating-runtime 
templating-tools 
tmeasday:check-npm-versions 
tmeasday:test-reporter-helpers 
tracker 
ui 
underscore 
universe:i18nInternationalization package
universe:utilities 
url 
webapp 
webapp-hashing 
xolvio:cleanerThis package clears your entire database for testing purposes

  2. Additional modules to be installed

core-decoratorsYou can stop using bind()
edgee:slingshotFor file uploading to s3
aws-sdknode.js module
react-bootstrapYou have to import what you want to use. You have to add bootstrap's less file separately
ground:dbGroundDB is a fast and thin layer providing Meteor offline database and methods - Taking cloud data to the ground.

3. Directory and file structure of todos app with react based on the set of called sequence


  1. Top page


    1. Client side

./client/main.html 
./client/main.js 
./client/main.lessStarting point. main.less imports all css

./client/main.js
import { renderRoutes } from '../imports/startup/client/routes.jsx'Routers for urls

./imports/ui/containers/AppContainer.jsx <= This provides data to your presentational components.
import { Lists } from '../../api/lists/lists.js'Define lists's schema, helper, publication. Todos.find() is called in this file
import App from '../layouts/App.jsx' 

./imports/api/lists/lists.js
import { Todos } from '../todos/todos.js'Define todo's schema, helper, publication. Todos.find() is called in this file

./imports/api/todos/todos.js
import incompleteCountDenormalizer from './incompleteCountDenormalizer.js';
import { Lists } from '../lists/lists.js';

./imports/ui/layouts/App.jsx
{ Lists } from '../../api/lists/lists.js';
import UserMenu from '../components/UserMenu.jsx';
import ListList from '../components/ListList.jsx';
import LanguageToggle from '../components/LanguageToggle.jsx';
import ConnectionNotification from '../components/ConnectionNotification.jsx';
import Loading from '../components/Loading.jsx';

imports/ui/components/ListList.jsx
import { insert } from '../../api/lists/methods.js';

imports/api/lists/methods.js
import { Lists } from './lists.js';

    2. Server side

server/main.js
import '/imports/startup/server';

imports/startup/server/index.js
import './fixtures.js';
import './reset-password-email.js';
import './security.js';.
import './register-api.js';

imports/startup/server/fixtures.js';
import { Lists } from '../../api/lists/lists.js';
import { Todos } from '../../api/todos/todos.js';

imports/startup/server/register-api.js
import '../../api/lists/methods.js';
import '../../api/lists/server/publications.js';
import '../../api/todos/methods.js';
import '../../api/todos/server/publications.js';
import '../../api/languages/methods.js';

  2. lists/:id


    1. Client side

imports/ui/ListPageContainer} />

imports//ui/containers/ListPageContainer
import { Lists } from '../../api/lists/lists.js';
import ListPage from '../pages/ListPage.jsx';

imports/ui/pages/ListPage.jsx
import BaseComponent from '../components/BaseComponent.jsx';
import ListHeader from '../components/ListHeader.jsx';
import TodoItem from '../components/TodoItem.jsx';
import NotFoundPage from '../pages/NotFoundPage.jsx';
import Message from '../components/Message.jsx';

  3. User account architecture when we user account-xxx

facebook{ "_id" : "FnX9LfsAG5jRQfpuh", "createdAt" : ISODate("2017-04-12T13:34:35.415Z"), "services" : { "facebook" : { "accessToken" : "EAAFxlUZAFrtwBADmKnm0qh031KIiweonzcFKsTwlWKo7yBpuYENY15pWoHu4yKQ8OijFKBNUuaQ4LCrlmwNEQL9JrvOQabzPnYHZBd2r9xmhnBiUdvQ6j85ToQHQzh5fwgjcJDairPhIbMyiXEyaSV1tM0ZBzgZD", "expiresAt" : 1497116571087, "id" : "10212381070343047", "email" : "hajimekurita@1stclass.co.jp", "name" : "Hajime Kurita", "first_name" : "Hajime", "last_name" : "Kurita", "link" : "https://www.facebook.com/app_scoped_user_id/10212381070343047/", "gender" : "male", "locale" : "ja_JP", "age_range" : { "min" : 21 } }, "resume" : { "loginTokens" : [ { "when" : ISODate("2017-04-12T13:34:35.435Z"), "hashedToken" : "1W/3/46GBRuoeFsMccYtf+FKjV8LpKwotzsn1gPKFg0=" } ] } }, "profile" : { "name" : "Hajime Kurita" } }
twitter{ "_id" : "m2kDLGCEq47Ewy56e", "createdAt" : ISODate("2017-04-12T13:41:42.894Z"), "services" : { "facebook" : { "accessToken" : "EAAFxlUZAFrtwBABkOn0nCbQVLUDJZB4HjjqrdXR6WGrNNF256uPeCSgAdRZBUMkYG3R2YmugJaWCTjUjmLgY5FHEXSHZCBJl9IUgtSTgF3ZBfBfqF7nKufgXaQqeZBgZA2yQNAdS3rFLb4nY8lSE79N8RWBTdlm47QZD", "expiresAt" : 1497116570589, "id" : "10212381070343047", "email" : "hajimekurita@1stclass.co.jp", "name" : "Hajime Kurita", "first_name" : "Hajime", "last_name" : "Kurita", "link" : "https://www.facebook.com/app_scoped_user_id/10212381070343047/", "gender" : "male", "locale" : "ja_JP", "age_range" : { "min" : 21 } }, "resume" : { "loginTokens" : [ { "when" : ISODate("2017-04-12T13:41:42.901Z"), "hashedToken" : "p8t36cDOrNXb7XBdejC8+GY/zIUcSOSPt/dOctaXb/k=" } ] } }, "profile" : { "name" : "Hajime Kurita" } }
norma acccount{ "_id" : "MjxEDHJdhWD3nC9Am", "createdAt" : ISODate("2017-04-12T13:43:48.971Z"), "services" : { "password" : { "bcrypt" : "$2a$10$aORqs7IfuepWSkDOcLfq6urLpFSZy37CJtpOWfUi7aJ7daikqlREq" }, "resume" : { "loginTokens" : [ { "when" : ISODate("2017-04-12T13:43:48.977Z"), "hashedToken" : "iCQ+hOQ7+ENGc74WZHLSsUj2ncgNXU2UryBzhIZMDGs=" } ] } }, "emails" : [ { "address" : "hajimekurita@1stclass.co.jp", "verified" : false } ] }

  4. Other

mobile-config.jssettings for mobile app

4. Points which you have to pay attention when you use React


  1. class should be changed into className

class is used for another purpose, so you have to use className in HTML tag.
5. How to make app run


  1. Web

meteor
  2. iOS (iPhone)

meteor install-sdk ios
meteor add-platform ios
meteor run ios

# Install into ios device. You have to connect you iphone with your Mac and have to build targeting your iphone device
# You may enounter the problem and solve the issue based on the message
# Ex. Latest Xcode, Agree with latest terms and usage, Registration of your apple developer account, team selection
meteor run ios-device;

Note: This app will stop working with connection to server if you disconnect your iphone from you PC, which means that meteor's server is working on your PC, not on your iPhone.
So for real usage, you have to build with specifying the meteor server which you deployed meteor as server.
The url will be the same with what you will access by browser.

Ex.
meteor run ios-device --mobile-server=https://www.EXAMPLE.com/;
  3. Android

meteor install-sdk android;
meteor add-platform android;

# Runs the app on the Android emulator
meteor run android;

# Runs the app on a connected Android device
meteor run android-device;
6. How to deploy


  1. Use galaxy


    1. How to set original domain and how to deal with root domain

First you have to purchase domain.

Example. travelplan.com

After it, making use of route 53 of AWS, create CNAME record assigning the value of
us-east-1.galaxy-ingress.meteor.com for applications in the US East region.
or
eu-west-1.galaxy-ingress.meteor.com for applications in the EU West region.
But you have to use "www." for it.
To use only root domain, you have to create s3 bucket with domain name.
And make it public web site s3 bucket.
After it, on Route 53, create A record for the root domain assigning s3's web instance name.
    2. Prepare mongodb cluster making use of DBBAS

Create an account on
https://www.mongodb.com/cloud/atlas
You can make use of Free version though spec is low.
Latest version of mongob may not work with latest meteor, so please confirm the compatibility information.
Currently the combination of Meteor 1.4.3.2 + Mongodb 3.4 has problem.
You have to allow the access from certain IP or from everywhere.
    3. Deploy app to galaxy

Get the account on https://www.meteor.com/

Sign up for galaxy

If your main market is not Europe, choose US-East.

Sign in https://galaxy.meteor.com/
vi setting.json
/* Just example */
{
"galaxy.meteor.com": {
"env": {
"MONGO_URL": "mongodb://<dbuser>:<dbpassword>@<dbserver>:<dbport>/<dbname>"
}
}
}

DEPLOY_HOSTNAME=galaxy.meteor.com meteor deploy [hostname] --settings setting.json
Note: hostname is the fully qualified domain name where you’re planning to host your application (for example, ‘www.facebook.com’).

Check log
galaxy.meteor.com/app/<app_name>/logs

Once your application is successfully deployed, head on over to your Galaxy dashboard to configure your application by adding a custom domain name and enabling SSL encryption.
Add a domain in your application’s settings and point your DNS to:
galaxy-ingress.meteor.com for applications in the US East region.

It will take a while to reflect the change after the completion of deploy command.
7. Good resources to study meteor + react

https://guide.meteor.com/react.html
https://www.meteor.com/tutorials/react/creating-an-app
https://leveluptutorials.com/tutorials
8. Creating service based on above flow

https://www.travelplan.world/

Add comment to this article


[Read other articles]
<=Newer article2016/10/31 Sunday in SG
=>Older article2016/10/11 How to use Xamarin


Articles categorized as "Meteor by this user"
All articles of this user
Subscribe to RSS
RSS
Display Style of blog
List/Mobile(QRCode)
Term
Category
All
1.Japan
2.Atlassian's products
3.Self
4.Development of this site
5.Japanese comics
6.Japanese anime
7.Weekly hot news of Japanese culture
8.OP/ED/PV
9.Japanese game
10.Ranking
11.Japanese Comics (Manga)
12.Search Engine
13.Japanese drama
14.Japanese otaku culture
15.Programming
16.Ineternet world
17.Movie
18.C/C++
19.BerkeleyDB
20.Apache programming
21.Spam
22.Meteor
23.Marketing
24.Python
25.Scrum
26.JIRA
27.Git
28.CI
29.Jenkins
30.AWS
31.Operation
32.Singapore
33.Cloud
34.Mysql Cluster
35.DevOps
36.Bitbucket
37.Xamarin
38.Good and new
39.Monitoring
40.node.js
41.React
42.Phillipines
43.Hiring
44.Python
45.SEO
46.Malaysia
47.Mongodb
48.Perl
49.Docker
50.Life hack
51.JavaScript(node.js)
52.Dance
53.QA
54.Mysql
55.How to dump only schema
56.How to dump only schema
Sayings from S-Cry-Ed

Rule in this world is speed. Even stupid person can write cool novel if he can spend 20 years for it.

If someone helped me, I will help him in return, which is my rule.

To become stronger, consider what is cowardliest thinking. And rebel against the thinking, which will make you stronger.



I am Japanese but working for some English sites.

Doctor Job Career
Nurse Job Career
Top Page top MetaSeachJP Works