The new Cosmic dashboard is now available in private beta 🎉
Get it now →

Install a Cosmic-powered Nuxt.js App on Digital Ocean in 5 minutes

Community Articles
Community Articles Install a Cosmic-powered Nuxt.js App on Digital Ocean in 5 minutes

Digital Ocean, a hosting provider beloved by developers, provides a highly intuitive interface for deploying and managing application infrastructure.  In this tutorial I'm going to show you how to install and deploy a Cosmic-powered Nuxt.js app on Digital Ocean.  In just a few commands, and a few minutes, you'll be up and running with a Cosmic-powered app on a scalable Digital Ocean Droplet, ready for team collaboration.

Getting Started

To get started, let's go over what we will be installing on our Digital Ocean Droplet.  We will be installing:

1. Node.js
2. The Cosmic CLI
3. Nuxt.js Website Boilerplate
4. Nginx

Creating the Droplet

Go to to login / signup.  After logging in, create a new droplet.  I recommend the Ubuntu with 2GB Memory.  Then click "Create".

Set up your Droplet

After creating your Droplet, you should have received an email with your SSH login and password instructions. 

SSH into your Droplet
Login to your server using your command line tool of choice with the information that was sent to you.

ssh root@your-droplet-ip
Enter your password: the-password-they-emailed-to-you

Install Node.js
Now that you're logged in to your Droplet, start by installing Node.js version 10 with the following commands:

curl -sL | sudo -E bash -
sudo apt-get install -y nodejs

Check that Node.js is installed:

nodejs -v # this should output v10.x.x

Install the Cosmic CLI

If you haven't already, create your free Cosmic account.

Now you can install the Cosmic CLI, which is a powerful tool to help you scaffold new projects and execute actions in your Cosmic account.

npm i -g cosmic-cli

Login and install the App
Next, we'll need to login to Cosmic via the CLI.  Enter your email and password after logging in with the following command:

cosmic login

If you go to the Nuxt.js Website Boilerplate App page, you'll notice there is a single command to install this application.  Run this command:

cosmic install-app nuxtjs-website-boilerplate

You will then be prompted to create a new Bucket or select an existing Bucket.  Select "Create New Bucket" and add a Title for your Bucket.  At this point, a couple things will happen: Example content will be imported to your newly created Bucket and the Nuxt.js app code will be downloaded to your Digital Ocean Droplet. Then you'll see the status of the install:

App code located at /root/nuxtjs-website-boilerplate

Run this command to start the app:

cosmic start-app

Once you see the status "OPEN http://localhost:3000", your app is built and you can go to your Droplet IP on port 3000 to view your app.  (See screenshot below to find your Droplet IP address).

So looking at the above screenshot, I'll go to and I'll see the app:

Install Nginx
Now that we have our app installed, let's install Nginx.  Nginx will make it possible to run our app on port 80 (which is the port assigned to websites running on a domain on http).  This will allow us to view the app on just the IP address (no port) and point a domain to the IP.

Stop your running app (Control+C) and run the following command to install Nginx:

sudo apt-get install -y nginx

Next, let's configure Nginx to run a proxy from port 80 to port 3000:

sudo rm /etc/nginx/sites-enabled/default
sudo vim /etc/nginx/sites-available/cosmicjs

And edit this file to look exactly like this:

server {
    listen 80;
    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         "";

Notice we set the proxy_pass to port 3000, this allows Nginx to act as a reverse proxy by forwarding all incoming requests on port 80 to your Node.js app on port 3000.

Next, we need to symlink our configuration to sites-enabled for it to be used by Nginx, since it's currently in sites-available:

sudo ln -s /etc/nginx/sites-available/cosmicjs /etc/nginx/sites-enabled/cosmicjs

Restart Nginx

Now we need to restart Nginx to apply the changes:

sudo service nginx restart

Now run the start command again:

cosmic start-app

Once the app starts, go to your IP address (without the port number) and you should see your application running cleanly without the port number in the URL.

At this point, you may want to run this process in the background.  For this, PM2 is a great solution.

Add your Domain
When you're ready to add a domain to your website, you'll need to do two things:

1. Go to your Domain Registrar and add the IP address to your A Name Records.
2. Add your domain to your Nginx config from above (server_name), then restart Nginx, and your website is LIVE!

Invite Team Members
To invite team members to help manage content, login to Cosmic and go to Your Bucket > Users. OR run the following command to invite team members via the Cosmic CLI!

cosmic add-user --email --role editor


Digital Ocean is an intuitive application hosting service provider that makes spinning up servers fast and easy.  With the tools that come with Cosmic, you can have a website connected to a CMS, launched on Digital Ocean, ready to share with your team members in a matter of minutes.  If you have any questions about Cosmic-powered apps, join the conversation on Slack and reach out to us on Twitter.  Looking forward to seeing what you build!

You may also like

This time, we will add filtering functionality to showcase the Cosmic Advanced Queries feature. Our data will be stored and served by Cosmic and we will use Angular for our Front-End.
We recently built the Story Licensing application using some of the most powerful development tools available.
Every blog needs a solid Content Management System (CMS). This allows content owners to control their content without having to hire a developer to make every single change to their site. Cosmic is a great choice for a CMS. In this how-to article, we’ll connect a React/Next.js app to Cosmic .
Next.js is a React framework for building hybrid applications. It's flexible, extensible, and works great with any data provider. In this tutorial, we'll show how to get started with Cosmic CMS and Next.js.
This article shows you how to create a blazing fast Gridsome blog using Cosmic source plugin. Let’s get started.
To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart a React Auth App. This app shows implementation of Authentication in ReactJS, NextJS and NodeJS using the Cosmic API. This app has all the basic modules like signin, signup, view/edit profi

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales