
In this lecture, we will:

- create a new App from inside our VIKTOR account.
- publish the source code we’ve been writing in our Github Codespace to the App.
- create a new Workspace from the App, that can be shared publicly.

<Callout type="info" heading="Publishing an App - VIKTOR Docs">
	🔗 The VIKTOR docs have a great walkthrough of the process
	[here](https://docs.viktor.ai/docs/publish-apps/?prt=sean).
</Callout>

## 10.1 Step 1 - Create a new App

We start in the App Store tab of our VIKTOR account and click the blue _‘Create app’_ button in the top right corner. This will launch an app creation wizard where you can fill in some information about the App, Fig 1.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/deploying-publishing-and-updating/img1.png"
	alt="App creation wizard. | EngineeringSkills.com"
	width="1200"
	height="705"
	caption="Fig 1. App creation wizard."
/>

When you’ve finished running through the wizard, you’ll have a new App in your App Store, Fig 2. Note that the new App on the right has the _‘Create Workspace’_ option greyed out. This is because it’s only an empty shell right now.

Next, we need to publish our code to this app. Note that I’ve given the new app the name `tutorial-engineering-skills-truss-analysis`. This will be needed in the next step.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/deploying-publishing-and-updating/img2.png"
	alt="New app (right) created in the App Store of my VIKTOR account. | EngineeringSkills.com"
	width="1200"
	height="707"
	caption="Fig 2. New app (right) created in the App Store of my VIKTOR account."
/>

## 10.2 Step 2 - Publishing our code

Next, we can publish our code to the App named `tutorial-engineering-skills-truss-analysis`. We do this from the terminal in the Github Codespace - so head over there next.

Before we try and publish our app, let’s see what apps are available - execute the following command,

```
viktor-cli apps
```

Unsurprisingly, this will show me the two apps in my App Store from Fig 2. I can see the names and some other metadata, including the status of each app. We see that `engineering-skills-openseespy-truss-analysis` is tagged with version number 1.1 and its status is _published_. We see that `tutorial-engineering-skills-truss-analysis` has a status of created, Fig 3.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/deploying-publishing-and-updating/img3.png"
	alt="Terminal output showing available apps. | EngineeringSkills.com"
	width="1200"
	height="79"
	caption="Fig 3. Terminal output showing available apps."
/>

Next, execute the following command,

```
viktor-cli publish
```

This will kick off the publication workflow. The first thing we’re asked to do is select the App we want to publish our code to - we’ll choose the App we just created, `tutorial-engineering-skills-truss-analysis`, and hit enter. You’ll need to hit enter a couple more times to accept some default options, but then just let VIKTOR do its thing and publish our code. This can take a few minutes to complete.

When the publication workflow has finished, head back over to your App Store dashboard and refresh the page. You should see that _“Create workspace”_ button on your new app is no longer greyed out.

## 10.3 Step 3 - Creating a workspace

The final step is to create a Workspace from our App that we can share with end users. Hit the _“Create workspace”_ button on your App listing within your App Store tab. This will launch the Workspace creation wizard. Follow the setup wizard (it’s almost identical to the App setup wizard) to create the new Workspace. Once you’re done, you’ll see your new Workspace in your dashboard, Fig 4.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/deploying-publishing-and-updating/img4.png"
	alt="Updated Workspaces dashboard showing newly created Workspace called 'Tutorial build (2D truss calculator)' | EngineeringSkills.com"
	width="1200"
	height="713"
	caption="Fig 4. Updated Workspaces dashboard showing newly created Workspace called ‘Tutorial build (2D truss calculator).‘"
/>

> Congratulations! You’ve created an app, published your code to it and now created a Workspace of that App that you can share with anyone you like!

Start by Opening your app and taking a look around the public version of what you’ve just built. To share your app with others, click on the blue _“Share”_ button in the top right of the app, once it has launched. When the sharing options open, you will also see some embed code which will allow you to add your app into a webpage (like on I did on EngineeringSkills.com).

## 10.4 Updating your App

There’s a good chance that the first version of your App will not be the final version. You likely want to dive back into the code at some point to make some tweaks or updates. This is very easy to do.

Just navigate back to your Github Codespace - you can see all of your Codespaces by visiting `https://github.com/codespaces` while being logged into your Github account. You can launch any of your Codespaces from here.

Once the relevant Codespace is launched, you can make any edits to your code and then simply publish them to the relevant app with the following command,

```
viktor-cli publish --registered-name <your-apps-name-here> --tag v1.1.0
```

It’s that simple. Once the publication process is complete, you’ll see your changes reflected in any Workspace derived from that app. You can see the version history of any App by clicking on the _“Details”_ button of any app in your App Store and then clicking on _“Versions”_. For example, here is the version history of the original version of this app, Fig 5.

<Image
	src="/images/courses/using-viktor-to-build-a-shareable-truss-calculator-app/deploying-publishing-and-updating/img5.png"
	alt="App version history. | EngineeringSkills.com"
	width="1200"
	height="483"
	caption="Fig 5. App version history."
/>

You can see that after the app was initially created and published, I went back in to make a range of updates and republished it with an updated version number each time.

## 10.5 Wrapping up

This brings us to the end of the project. You have now covered the complete VIKTOR development workflow from setting up a Github Codespace, to building and then deploying a finished App and shareable Workspace.

I hope that you’ve found this project helpful and that it has given you some ideas about how you can use the VIKTOR platform to streamline and perhaps even automate some of your engineering workflows.

I would encourage you to take what you’ve learned here and, while it's still fresh in your mind and build something on your own. Start with another simple calculator, like this one and then expand from there into something more elaborate.

<Callout type="info" heading="VIKTOR Apps Gallery">
	To get some inspiration, take a look at the [VIKTOR Apps
	Gallery](https://www.viktor.ai/apps-gallery/category/all/discipline/all/integration/all/1/?prt=sean)
	to see what other users are building. This should spark some ideas about what
	to build next!
</Callout>

Ok, that’s all for this one - if you found this helpful and would like to see more VIKTOR project builds, let me know by email, reaching out on [LinkedIn](https://www.linkedin.com/in/drseancarroll/) or by using the [contact form](\contact). I’m always keen to hear your feedback!

See you in the next one ✌️


Please log in to continue