Develop and deploy server side independently from client side [Ionic + Meteor]

help
1

I have an existing hybrid mobile app written with Ionic. It uses a server I’ve written with Node and Mongoose that expose REST api.

I want to integrate an in-app chat service, and I decided to use the “whatsapp clone tutorial” with Meteor.

I managed to integrate the chat service in my existing app, however everything works because it’s all at localhost. What I want to do is to move the server side to my domain (the same server where I have REST api for the existing app), and rebuild the client side for mobile deployment.
I really don’t know how to do that… it should be very simple, but I don’t know how to say to the client where is the meteor server.

I have already moved my code to the server, and started it. Since I need to fix this thing fast,
I haven’t use deployment yet… I’ve just copied files to the server, and started it. I’ll then study the whole deployment process, and maybe restructure the app to be more “meteor compliant”.

Anyway Meteor is now listening on :3000 of my remote server, but how the client could know that?

2
3

Thank you, but I don’t think is the solution I am looking for…
I need to just change the sever address… from localhost:3000 it should be http://my_domain:my_port

4

I’m not sure what your setup is exactly, but you would normally use either --mobile-server (for meteor run) or --server (for meteor build) to specify the server URL. Also make sure you define ROOT_URL on the server, because you won’t be able to use hot code push if you don’t. See the mobile article in the Meteor Guide for more details.

5

Ok I am reading your link right now.

so… if I used Ionic CLI so far to build and test… I should pass to Meteor CLI, otherwise I loose the connection with the server… Am i Right?

6

No you can keep the ionic cli, the only things to make sur is to set the ddp url before loading every libs related to meteor.

__meteor_runtime_config__ = {};
__meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = 'api.example.com';
7

just tried… in my index.html I’ve set

  <script>
__meteor_runtime_config__ = {};
__meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = 'mydomain.it:3000';    
 /* tried also with     
       window.__meteor_runtime_config__ = {
           DDP_DEFAULT_CONNECTION_URL: 'mydomain.it:3000'  };        
*/
    </script>
    
    <script src="assets/libs/meteor/meteor-runtime-config.js"></script>             
    <script src="assets/libs/meteor/meteor-client-side.bundle.min.js"></script> 
    <script src="assets/libs/meteor/angular-meteor-bundle.js"></script>
    <script src="assets/libs/meteor/meteor-client-side.bundle.min.js"></script>

When accessing my app from the browser, still have something like

[Error] Failed to load resource: Impossible to connect to the server (info, line 0) http://localhosts:3000/sockjs/info?cb=x0yieguy1c

8

You can remove what you have also tried.

Do not include meteor-runtime-config.js, it is overwritting your statement, if you look into it, we will have

__meteor_runtime_config__ = {};
__meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = 'localhost:3000';

as it is the default url for a meteor app.

9

Ok, now I have this, and it makes sense… but still not working, as before, it looks still to localhost:3000. I feel so stupid… what am I missing?

 <!-- meteor -->
    <script>
       __meteor_runtime_config__ = {};
       __meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = "my_domain:my_port";        
    </script>
    <script src="assets/libs/meteor/meteor-client-side.bundle.min.js"></script> 
    <script src="assets/libs/meteor/angular-meteor-bundle.js"></script>
10

To extend a bit more on this topic what i have done is to have a file called ddp-url.js that look like this :

__meteor_runtime_config__ = {};
// @if IONIC_ENV == 'development'
__meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = 'localhost:3000';
// @endif
// @if IONIC_ENV == 'mobile'
__meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = 'my.computer.ip:3000';
// @endif
// @if IONIC_ENV == 'production'
__meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = 'api.example.com'; 
// @endif

Then I use preprocess and set a gulp task.

Hence i only have to set IONIC_ENV variable and call gulp to have my ionic app to work in differents envs.

11

Please tell me what’s your meteor version and what’s your meteor client side version.

12

Server :
Meteor 1.3.2.2

Client :
angular-meteor-bundle.js 1.3.10
meteor-client-side.bundle.js 1.3.10

13

following your suggestion… I started looking into the libraries. I’ve found that

meteor-client-side.bundle.min.js

has the line

DDP_DEFAULT_CONNECTION_URL:“http://localhost:3000”

overwriting that line, it seems that it works. Actually I really don’t like this solution… I don’t want to change libraries code in this way, but at least something is working. Do you know a better way to fix this? Should I set my variable AFTER the libraries import?

14

I know this is not a good solution

Could you try to come back to meteor-client-side 1.2.1 ?

15

Hi All,

Thank you for this discussion, it has pointed me in the right direction.

However, when I update my index.html to include:

    <script>
       __meteor_runtime_config__ = {};
       __meteor_runtime_config__.DDP_DEFAULT_CONNECTION_URL = "my_domain:my_port";        
    </script>

I then start my ionic app with ionic serve, but it is still trying to access meteor on:

http://localhost:3000/sockjs/info?cb=gqyy86bfk6

Is delac’s hack (changing meteor-client-side.bundle.min.js) the best solution?

Any ideas what I am doing wrong please?

16

Have been facing exactly the same issue. I did exactly the same thing than delac’s, but still I would like to find a proper solution.

17

Still no solution? That’s weird. I need it for deploying to cloud server.

18

I’m experiencing similar issues with a deployment to the Play Store, pointing at modulus.io.

I think the something to do with the Hot Code Push feature… which updates index.html to defaults. Including the ROOT_URL which is based on the DDP_DEFAULT_CONNECTION_URL. Did you have any success with your issues?

19

I was able to execute it by adding:

  <script src = "dist / meteor-client-side.bundle.min.js"> </ script>
  <script>
     (Function () {
       __meteor_runtime_config__ = {
         // Your server's IP address goes here
         DDP_DEFAULT_CONNECTION_URL: "http://my.domain.com"
       };
     }) ();
</ script>

In the file: “…/src/index.html”

Server:

Meteor 1.4.2.3

Client:

Meteor-client-side.bundle.js 1.5.2