Can I use the ionic serve in production?

Ionic Framework ionic-v3
1

Hi guys,

I am developing a same App for both iOS and Android platforms and also we need a web version. All the functions should be same for different platforms.

For the web version I know ionic server command can start a web server locally for debugging. But not quite sure if this can be used in production environment to provide actual services to end user?

And if so is there any way that I can deploy to different application servers? have no idea what app server the “serve” command use…

2

The contents of the www directory can simply be served under any application server. I’ve used nginx. Naturally, none of the cordova plugin stuff will work.

1 Like
3

Hi rapropos, thanks for the reply. looks great! I will have a try on nginx as well.

And I will try to avoid using cordova plugins for example $cordovaAppVersion $cordovaFile in the code.

Thanks.

4

just did a try. just copy the www folder under the project root to the nginx nodes will just make it work like a charm.

This is an amazing framework!

5

If you do need some cordova stuff you can get some things to work (like camera for example) if you add the browser platform and build for it.

ionic cordova platform add browser
ionic build browser --prod

Then the source will be in platforms/browser/www
It only works with some plugins, but I’ve had success.

1 Like
6

I suggest using npm run build --prod instead of ionic serve to create the contents of the www folder before uploading it to a server, because ionic serve does a dev build without Ahead of Time (AoT) compilation and minification.

1 Like
7

thanks beck24. just know there is even a “browser” platform in ionic. i did a try and it works fine!

8

I get this now:

$ ionic build browser --prod
The build command has been renamed. To find out more, run:

ionic cordova build --help

And under help they don’t show any commands related to building for the Web anymore… Has the ionic team removed support for building for the web??

9

Try: ionic cordova build browser --prod

10

ionic cordova build browser --prod --release worked, thanks!

11

this creates a new folder under platforms folder called browser. I see platform_www and www, which do I deploy?

12

the “www” one @phingers

13

I wanted to test on my server using Ionic and Capacitor but the www folder wasn’t running the third party apps.

Although not tested, technically the setup should be able to work for Ionic with the other frameworks e.g Vue, React, etc.

Using nginx and supervisor I got it to work.

Nginx config

sudo apt-get install nginx

sudo apt-get install nano

Create a conf file

sudo nano /etc/nginx/sites-available/ionic

Add the following inside the file.

server {
    listen 8100;
    server_name your-domain.com your-ip-address;

    charset utf-8;

    client_max_body_size 10M;

    #Django media and static files
    location / {
        proxy_pass http://127.0.0.1:8101;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Note, I’m listening on port 8100 but you could use any other port e.g. 80. Also, proxy_pass is set to 8101 as ionic will be running on this port. See below under the Supervisor config

Supervisor config

sudo apt-get install supervisor

Then create a conf file

sudo nano /etc/supervisor/conf.d/ionic.conf

Add the following inside

[program:ionic]
command=ionic serve --port=8101
directory=/path/to/your/ionic/folder
autostart=true
autorestart=true
startretries=3
stderr_logfile=/var/log/supervisor/ionic/error.log
stdout_logfile=/var/log/supervisor/ionic/out.log

As described earlier in the Nginx config, I’m serving ionic on port 8101.

Note: not get an error, create the ionic folder in the logs

sudo mkdir /var/log/supervisor/ionic

Then enable and restart the services

sudo ln -s /etc/nginx/sites-available/ionic /etc/nginx/sites-enabled
sudo systemctl restart nginx
sudo systemctl restart supervisor
sudo supervisord

Before opening your website, check that ionic is running on correct port in the log output file

tail -80 /var/log/supervisor/ionic/out.log

sudo systemctl enable supervisor
sudo systemctl enable nginx

http://your-domain.com:8100 or http://your-ip-address:8100