In web development prototyping and the ability to get early feedback from users can be a critical factor for success. While in theory this is a good practice it can in reality be cumbersome to achieve. You have a running web application locally on your computer but to be able to share it with stakeholders for feedback it most often requires a lot of infrastructure work first. Time and effort you don’t want to spend just to show something that is work in progress.
This is the problem that the open web service Web Runner in Eyevinn Open Source Cloud addresses. In this blog post we will demonstrate how you with this service can take your web application and make it available online in minutes.
Why Open Source Cloud for web development prototyping?
Using an open web service based on open source you are not locked in with a specific vendor and you have the option to run the very same code in your own infrastructure or cloud.
Create an account for free at app.osaas.io and create your tenant. If you already have access to Eyevinn Open Source Cloud you can skip this step.
Step 1: Create a Hello World web application
If you already have a web application you can skip this step.
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
Step 2: 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 git@github.com:birme/web-hello-world.git % git branch -M main % git push -u origin main
Step 3: Create a GitHub personal access token
Follow the steps described in the GitHub documentation for how to create a personal access token. You can skip this step if you already have a personal access token.
Step 4: 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.
Step 5: 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 in step 4. Enter the URL to the GitHub repository that you created in step 2.
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.
Extras
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.