Publish a NodeJS application online with Eyevinn Open Source Cloud

The open web service Web Runner takes you from localhost to https in seconds. Deploy your Node application from your public or private GitHub repository and make it instantly available. This tutorial walks you through how to get started deploying your web application with Eyevinn Open Source Cloud.

In this guide

1. Get an API Access Token and setup project
2. Create a GitHub personal access token
3. Develop and publish a Hello World web application

Prerequisites

• If you have not already done so, sign up for an OSC account. Sign up here for free.

Get an API Access Token and setup project

In the Eyevinn Open Source Cloud web console click on "Settings" in the navigation menu on the left. Then click on the tab "API" and copy the personal access token to the clipboard.

Store this token in your shell's environment in the environment variable OSC_ACCESS_TOKEN.

% export OSC_ACCESS_TOKEN=<access-token-copied-above>

We will create a web application using the NEXT.js framework in this example.

Create a new Next.js project by running this command.

% npx create-next-app@latest

After the prompts, create-next-app will create a folder with your project name and install the required dependencies. We can try it out by running it.

% npm run build
% npm start

Now you have your web application available on http://localhost:3000

Create a repository on GitHub

Login or signup on GitHub and create a repository for your web application and give it a name, for example web-hello-world. It can be a private or a public repository. Push the code in the project folder, for example.

% git remote add origin [e-mail]:birme/web-hello-world.git
% git branch -M main
% git push -u origin main

Create a GitHub personal access token

For access to you your GitHub repository you need to create a GitHub Personal Access Token first.

1. Verify your email address, if it hasn't been verified yet.
2. In the upper-right corner of any page on GitHub, click your profile photo, then click Settings.
3. In the left sidebar, click Developer settings.
4. In the left sidebar, under Personal access tokens, click Tokens (classic).
5. Select Generate new token, then click Generate new token (classic).
6. In the "Note" field, give your token a descriptive name.
7. To give your token an expiration, select Expiration, then choose a default option or click Custom to enter a date.
8. Select the scopes you'd like to grant this token. To use your token to access repositories from the command line, select repo. A token with no assigned scopes can only access public information. For more information, see Scopes for OAuth apps.
9. Click Generate token and copy it to the clipboard.

Store token as a Service Secret

Now navigate to the Web Runner service in Eyevinn Open Source Cloud web console. Click on the tab "Service Secrets" and click on the button "New Secret". Give the secret a name and paste the GitHub token from your clipboard.

Create web runner

To make the web application available online you create a Web Runner instance.

Click on the tab “My web-runners” and then on the button “Create web-runner”. Enter the GitHub URL for your web application code and enter a reference to the secret you created. Enter the URL to the GitHub repository that you created.

Press create and you should now after a few minutes have an instance of your web application ready.

Give it a minute or two and then click on the instance card and it will open up a new window or tab to your web application. If you see an error the web application build process is still ongoing and you just might need to wait another minute or so.

You can now share the URL to this instance to stakeholders or users you want feedback from. In this example the URL is https://eyevinnlab-blog.eyevinn-web-runner.auto.prod.osaas.io

And as you see it is all running over HTTPS with a valid certificate.

To un-publish this web application you simply remove the instance that is running.

You can also use the OSC command line tool to create a web runner instance.

% npx @osaas/cli create eyevinn-web-runner blog \
  -o GitHubUrl="https://github.com/birme/web-hello-world" \
  -o GitHubToken="{{secrets.githubtoken}}"

GitHub Action

Using the GitHub action for OSC you can add this process to a build pipeline. For example automatically create a Web Runner instance of your application when a branch is updated for example.

Create a web runner instance of your web application in integration and end-to-end tests.

Conclusion

We have now given an example of how you quickly can share a prototype or a work-in-progress web application using an open web service in Eyevinn Open Source Cloud. As this is an open web service in Eyevinn Open Source Cloud you always have the option to run the same solution on your own premises as it is based on open source

If you want to try this out you can sign up and launch one instance all for free.