Skip to main content

NuxtJS

Geting Started​

Edgegap offers you a very intuitive platform to deploy a serverless web application wherever you need it. For this tutorial, we will go over the steps to deploy a Nuxt app. Before checking for anything else, make sure you have yarn or another packet management software like npm or npx. For this tutorial, we will stick to yarn. You must have it running in your application directory, which can be, at the beginning just an empty folder.

Open your terminal at the location of your folder, and run the following command:

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn

Once it installs all the dependencies, make sure it installed properly by running this command:

C:\Users\JohnDoe\Documents\demo-nuxt-edgegap> yarn dev

Yarn dev should return the version of yarn installed if everything went smoothly. With this out of the way, we can now look at the remaining requirements to successfully complete this tutorial.

Requirements​

To follow this tutorial, you will need to have the following:

Containerize your application​

Containerizing most applications is straightforward. You must create a Dockerfile and then run that file on Docker to create the image. Visual Studio Code is a good platform to create your Dockerfile since, by default, it does not put an extension to every new file that we create. That is exactly what we need. Simply create a new file and name it Dockerfile. You will see the little docker logo appear next to it.

Now, you can copy and paste this script into it to get the main dependencies. Keep in mind that this will create an image a little over 1GB in size. For the purpose of this tutorial, this is fine. But for an application in production, you will have to optimize it:

FROM node:lts as builder 
 
WORKDIR /app 
 
COPY . . 
 
RUN yarn install \ 
  --prefer-offline \ 
  --frozen-lockfile \ 
  --non-interactive \ 
  --production=false 
 
RUN yarn build 
 
RUN rm -rf node_modules && \ 
  NODE_ENV=production yarn install \ 
  --prefer-offline \ 
  --pure-lockfile \ 
  --non-interactive \ 
  --production=true 
 
FROM node:lts 
 
WORKDIR /app 
 
COPY --from=builder /app  . 
 
ENV HOST 0.0.0.0 
EXPOSE 80 
 
CMD [ "yarn", "start" ]

After saving your Dockerfile, it is time to create the image. You can easily do so by running the following command:

warning

For ARM CPU (Mac M1, M2, etc.) user, see the dedicated page : ARM CPU

docker build . -t <YOUR_DOCKER_USERNAME>/demo-nuxt-edgegap:<YOUR_VERSION_NUMBER>

It is preferable you put a version number following semantic versioning, but if you don’t plan on updating your build on Edgegap after your first deployment, you can omit the version number entirely.

But before that, you need to push your newly created docker image to the image repository of your choice. Remember that we offer private repositories through Harbor that offer you a series of security advantages you would not necessarily have by using the default Docker repository.

To push your image to our repository, you will have to first log in with your credentials by using this command:

docker login <YOUR_HARBOR.EDGEGAP.NET_ADDRESS>

Now, the only thing left is to push your image like this:

docker push <YOUR_HARBOR.EDGEGAP.NET_ADDRESS> /<YOUR_DOCKER_USERNAME>:<YOUR_VERSION_NUMBER>

Great! Now, you are only one step away from deploying your Nuxt app on Edgegap’s platform.

Deploy your application on Edgegap​

There are two ways of deploying an application on Arbitrium. For both, you will need to have an account with us, which you can create for free by clicking the link right here. First, let’s go over on how to deploy our containerized application through our website.

Deploying an application through Arbitrium’s dashboard:​

You will have to head over to the following web address and enter your credentials. Once you do so, you will be automatically redirected to your dashboard. If you have just created your account, you will see an option to launch your first application right away. If not, simply head to the “Applications and games” tab on the menu on the left of your screen. You will see an option to create a new application on the right corner:

img

Once you click on it, the following form should appear: img

You should fill all the required fields and, once you’re done, there is a few things you will need to modify from the defaults:

  • Port number: This application needs to have port 3000 open, so please add it in the “ports” section of the creation form.

  • Maximum time to deploy: As mentioned previously in this tutorial, our NuxtJS image is around 1GB in size. To deploy an image that big on Arbitrium, you will have to increase the Maximum time to deploy to around 300 seconds.

Once you’ve finished filling out the form with the adequate information, you simply must submit it, and you will be ready for deployment. Simply select the region and the number of players you wish to emulate.

img

Once you confirm your choices, your application will be online shortly. Here’s what you will see once it’s been deployed. You can access it yourself by clicking on the icon we’ve circled in this image.

img

This will open a new tab where you will find the default landing page of your Nuxt application.

Deploying an application through Arbitrium’s API​

While our web dashboard is the most user-friendly way of deploying an application, you can also do so through a very simple API request. For this, you can either use postman or download our custom CLI interface through our dashboard. Even without our CLI environment, it is important you visit the dashboard to create an API token through the options on your profile. Here’s a simple guide on how to create your API token.

Once you have the API token in your hands, the only thing left to do is formulate a deployment request with your application name, its version, the IP addresses, the region you want to make your deployment in and, of course, your token as part of the authorization parameters. You can see what a full request looks like on our documentation here.

Once you send the request, you should see a response on your command line or on Postman should look like this:

img

That is all you must do to deploy an application through a CLI. To confirm your app was deployed, you can head over to the dashboard again and see your active deployment at work by clicking on the “Active deployments” tab.