blob: 9f4e0f3546a962f1fc0c7bb9b2d9219eda5b7dc2 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112407000-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-112407000-2');
</script>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-KS8HHSF');
</script>
<!-- End Google Tag Manager -->
<head>
<title>Working with templates | Codewind</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Working with templates">
<meta name="keywords" content="getting started, setting up, projects, update, help, Theia, test, edit, Theia editor, using own IDE, empty page, refresh, credentials, default editor, Node.j..."/>
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,600&display=swap" rel="stylesheet">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/docs.css">
<link rel="stylesheet" href="css/learn.css">
<link rel="stylesheet" href="css/blog.css">
<link rel="stylesheet" href="css/guides.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css">
</head>
<body data-spy="scroll" data-target="#toc">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KS8HHSF"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="main">
<!-- Bootstrap NavBar -->
<nav class="navbar navbar-expand-lg navbar-light cw-banner fixed-top" aria-label="topnav">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/codewind/">
<img alt="Codewind logo image" title="Codewind logo image" src="images/header/header-logo.svg" class="cw-header-logo" alt="">
</a>
<div class="collapse navbar-collapse justify-content-end cw-navbar-padding" id="navbarNavDropdown">
<ul class="navbar-nav cw-navbar-nav">
<li class="nav-item cw-navbar-item cw-header-link-docs">
<a class="nav-link cw-nav-link cw-header-link-text" href="learn.html">Learn</a>
</li>
<li class="nav-item cw-navbar-item cw-header-link-news">
<a class="nav-link cw-nav-link cw-header-link-text" href="news.html">News</a>
</li>
<li class="nav-item cw-navbar-item cw-header-link-blog">
<a class="nav-link cw-nav-link cw-header-link-text" href="blog.html">Blog</a>
</li>
<li class="nav-item cw-navbar-item cw-header-link-guides">
<a class="nav-link cw-nav-link cw-header-link-text" href="guides.html">Guides</a>
</li>
<li class="nav-item cw-navbar-item cw-header-link">
<a class="nav-link cw-nav-link" href="https://github.com/eclipse/codewind"><img alt="Codewind Github" class="banner-image" title="Codewind Github" data-toggle="tooltip" data-placement="top" id="cw_github_stars" title="..." src="images/header/github.svg"/></a>
</li>
<li class="nav-item cw-navbar-item cw-header-link">
<a class="nav-link cw-nav-link" href="https://twitter.com/EclipseCodewind"><img alt="Codewind Twitter" class="banner-image" title="Codewind Twitter" src="images/header/twitter.png"/></a>
</li>
<li class="nav-item cw-navbar-item cw-header-link">
<a class="nav-link cw-nav-link" href="https://mattermost.eclipse.org/eclipse/channels/eclipse-codewind"><img alt="Codewind Mattermost" class="banner-image" title="Codewind Mattermost" src="images/header/mattermost.png"/></a>
</li>
<li class="nav-item cw-navbar-item cw-header-link">
<a class="nav-link cw-nav-link" href="https://www.youtube.com/channel/UCnKCVK6RFDyHFqUmXlAhCHQ"><img alt="Codewind YouTube" class="banner-image" title="Codewind YouTube" src="images/header/youtube.png"/></a>
</li>
<!-- li class="nav-item cw-navbar-item" id="download-li">
<button onClick="window.location.href='https://microclimate.dev/download/codewind';" type="button" class="btn cw-download-button">Download</button>
<a href="https://microclimate.dev/download/codewind" class="nav-link cw-nav-link cw-download-link" href="#">Download</a>
</li> -->
<!-- Smaller devices menu END -->
</ul>
</div>
</nav>
<!-- End Bootstrap NavBar -->
<!-- Bootstrap row -->
<div class="row" id="body-row">
<div id="sidebar-container" class="bg-light" role="navigation" aria-label="sidebar">
<!-- Bootstrap List Group -->
<ul class="list-group sticky-top bg-light cw-sticky-offset">
<a href="overview.html"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-url="overview.html">
What is Codewind?
</a>
<!-- must be a valid css selector, or will break collapse function -->
<a href="#_getting_started" id="#_getting_started"
class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse"
aria-expanded="false">Getting started<span class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu collapse" id="_getting_started">
<a href="gettingstarted-overview.html" class="bg-light list-group-item" data-parent="#_getting_started"
data-url="gettingstarted-overview.html">Overview: Getting started</a>
<a href="#_vs_code" id="#_vs_code"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-toggle="collapse" data-parent="#_getting_started" aria-expanded="false">VS Code<span
class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="_vs_code">
<a href="vsc-getting-started.html" class="bg-light list-group-item" data-parent="#_vs_code"
data-url="vsc-getting-started.html">1. Installing Codewind for VS Code</a>
<a href="vsc-firstproject.html" class="bg-light list-group-item" data-parent="#_vs_code"
data-url="vsc-firstproject.html">2. Creating your first Codewind project with Codewind for VS Code</a>
<a href="vsc-codechange.html" class="bg-light list-group-item" data-parent="#_vs_code"
data-url="vsc-codechange.html">3. Making a code change with VS Code</a>
</div>
<a href="#_eclipse" id="#_eclipse"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-toggle="collapse" data-parent="#_getting_started" aria-expanded="false">Eclipse<span
class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="_eclipse">
<a href="eclipse-getting-started.html" class="bg-light list-group-item" data-parent="#_eclipse"
data-url="eclipse-getting-started.html">1. Installing Codewind for Eclipse</a>
<a href="eclipse-firstproject.html" class="bg-light list-group-item" data-parent="#_eclipse"
data-url="eclipse-firstproject.html">2. Creating your first Codewind project with Codewind for Eclipse</a>
<a href="eclipse-codechange.html" class="bg-light list-group-item" data-parent="#_eclipse"
data-url="eclipse-codechange.html">3. Making a code change with Eclipse</a>
</div>
<a href="#_intellij" id="#_intellij"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-toggle="collapse" data-parent="#_getting_started" aria-expanded="false">IntelliJ<span
class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="_intellij">
<a href="intellij-getting-started.html" class="bg-light list-group-item" data-parent="#_intellij"
data-url="intellij-getting-started.html">1. Installing Codewind for IntelliJ</a>
<a href="intellij-firstproject.html" class="bg-light list-group-item" data-parent="#_intellij"
data-url="intellij-firstproject.html">2. Creating your first Codewind project with Codewind for IntelliJ</a>
<a href="intellij-codechange.html" class="bg-light list-group-item" data-parent="#_intellij"
data-url="intellij-codechange.html">3. Making a code change with IntelliJ</a>
</div>
</div>
<a href="remote-deploying-codewind.html"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-url="remote-deploying-codewind.html">
Deploying Codewind remotely
</a>
<!-- must be a valid css selector, or will break collapse function -->
<a href="#_using_codewind_remotely" id="#_using_codewind_remotely"
class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse"
aria-expanded="false">Using Codewind remotely<span class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu collapse" id="_using_codewind_remotely">
<a href="remote-codewind-overview.html" class="bg-light list-group-item" data-parent="#_using_codewind_remotely"
data-url="remote-codewind-overview.html">1. Overview: Using Codewind remotely</a>
<a href="#_2_connecting_your_ide_to_remote_codewind" id="#_2_connecting_your_ide_to_remote_codewind"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-toggle="collapse" data-parent="#_using_codewind_remotely" aria-expanded="false">2. Connecting your IDE to remote Codewind<span
class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="_2_connecting_your_ide_to_remote_codewind">
<a href="remotedeploy-vscode.html" class="bg-light list-group-item" data-parent="#_2_connecting_your_ide_to_remote_codewind"
data-url="remotedeploy-vscode.html">Connecting VS Code to remote Codewind</a>
<a href="remotedeploy-eclipse.html" class="bg-light list-group-item" data-parent="#_2_connecting_your_ide_to_remote_codewind"
data-url="remotedeploy-eclipse.html">Connecting Eclipse to remote Codewind</a>
</div>
<a href="remote-setupregistries.html" class="bg-light list-group-item" data-parent="#_using_codewind_remotely"
data-url="remote-setupregistries.html">3. Adding an image registry in remote Codewind</a>
<a href="#_4_creating_and_importing_projects" id="#_4_creating_and_importing_projects"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-toggle="collapse" data-parent="#_using_codewind_remotely" aria-expanded="false">4. Creating and importing projects<span
class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="_4_creating_and_importing_projects">
<a href="remotedeploy-projects-vscode.html" class="bg-light list-group-item" data-parent="#_4_creating_and_importing_projects"
data-url="remotedeploy-projects-vscode.html">VS Code</a>
<a href="remotedeploy-projects-eclipse.html" class="bg-light list-group-item" data-parent="#_4_creating_and_importing_projects"
data-url="remotedeploy-projects-eclipse.html">Eclipse</a>
</div>
</div>
<!-- must be a valid css selector, or will break collapse function -->
<a href="#_using_codewind_on_eclipse_che" id="#_using_codewind_on_eclipse_che"
class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse"
aria-expanded="false">Using Codewind on Eclipse Che<span class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu collapse" id="_using_codewind_on_eclipse_che">
<a href="che-installinfo.html" class="bg-light list-group-item" data-parent="#_using_codewind_on_eclipse_che"
data-url="che-installinfo.html">1. Installing Eclipse Che for Codewind</a>
<a href="che-setupregistries.html" class="bg-light list-group-item" data-parent="#_using_codewind_on_eclipse_che"
data-url="che-setupregistries.html">2. Adding an image registry in Codewind on Eclipse Che</a>
<a href="openshiftregistry.html" class="bg-light list-group-item" data-parent="#_using_codewind_on_eclipse_che"
data-url="openshiftregistry.html">2a. Adding the OpenShift internal registry with Codewind</a>
<a href="che-createcodewindworkspace.html" class="bg-light list-group-item" data-parent="#_using_codewind_on_eclipse_che"
data-url="che-createcodewindworkspace.html">3. Creating a Codewind workspace in Eclipse Che</a>
<a href="che-createfirstproject.html" class="bg-light list-group-item" data-parent="#_using_codewind_on_eclipse_che"
data-url="che-createfirstproject.html">4. Creating your first Codewind project with Codewind for Eclipse Che</a>
<a href="che-codechange.html" class="bg-light list-group-item" data-parent="#_using_codewind_on_eclipse_che"
data-url="che-codechange.html">5. Making a code change with Codewind for Eclipse Che</a>
<a href="che-uninstall.html" class="bg-light list-group-item" data-parent="#_using_codewind_on_eclipse_che"
data-url="che-uninstall.html">6. Uninstalling Codewind for Eclipse Che</a>
</div>
<a href="che-odo-support.html"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-url="che-odo-support.html">
OpenShift Do (odo) support in Codewind
</a>
<a href="workingwithtemplates.html"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-url="workingwithtemplates.html">
Working with templates
</a>
<!-- must be a valid css selector, or will break collapse function -->
<a href="#_developing_projects" id="#_developing_projects"
class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse"
aria-expanded="false">Developing projects<span class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu collapse" id="_developing_projects">
<a href="checkingstatuses.html" class="bg-light list-group-item" data-parent="#_developing_projects"
data-url="checkingstatuses.html">Understanding application and build statuses</a>
<a href="importing-existing-projects.html" class="bg-light list-group-item" data-parent="#_developing_projects"
data-url="importing-existing-projects.html">Importing existing projects</a>
<a href="project-actions.html" class="bg-light list-group-item" data-parent="#_developing_projects"
data-url="project-actions.html">Project actions</a>
<a href="project-settings.html" class="bg-light list-group-item" data-parent="#_developing_projects"
data-url="project-settings.html">Project settings</a>
<a href="referencing-files.html" class="bg-light list-group-item" data-parent="#_developing_projects"
data-url="referencing-files.html">Referencing files external to a project</a>
<a href="private-registries.html" class="bg-light list-group-item" data-parent="#_developing_projects"
data-url="private-registries.html">Developing with packages from private registries and repositories</a>
<a href="offline-codewind.html" class="bg-light list-group-item" data-parent="#_developing_projects"
data-url="offline-codewind.html">Using Codewind offline</a>
<a href="debugging.html" class="bg-light list-group-item" data-parent="#_developing_projects"
data-url="debugging.html">Debugging in Codewind</a>
</div>
<!-- must be a valid css selector, or will break collapse function -->
<a href="#_performance_monitoring" id="#_performance_monitoring"
class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse"
aria-expanded="false">Performance monitoring<span class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu collapse" id="_performance_monitoring">
<a href="metrics-dashboard.html" class="bg-light list-group-item" data-parent="#_performance_monitoring"
data-url="metrics-dashboard.html">Understanding the Metrics Dashboard</a>
<a href="performance.html" class="bg-light list-group-item" data-parent="#_performance_monitoring"
data-url="performance.html">Monitoring applications with the Performance Dashboard</a>
</div>
<!-- must be a valid css selector, or will break collapse function -->
<a href="#_openapi_tools" id="#_openapi_tools"
class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse"
aria-expanded="false">OpenAPI Tools<span class="submenu-icon"></span></a>
<div class="cw-sidebar-div cw-sidebar-submenu collapse" id="_openapi_tools">
<a href="open-api-tools-for-vscode.html" class="bg-light list-group-item" data-parent="#_openapi_tools"
data-url="open-api-tools-for-vscode.html">Codewind OpenAPI Tools for VS Code</a>
<a href="open-api-tools-for-eclipse.html" class="bg-light list-group-item" data-parent="#_openapi_tools"
data-url="open-api-tools-for-eclipse.html">Codewind OpenAPI Tools for Eclipse</a>
</div>
<a href="che-tektonpipelines.html"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-url="che-tektonpipelines.html">
Configuring Codewind for Tekton pipelines
</a>
<a href="troubleshooting.html"
class="bg-light list-group-item list-group-item-action flex-column align-items-start"
data-url="troubleshooting.html">
Troubleshooting
</a>
</ul>
<!-- List Group END-->
</div>
<!-- MAIN -->
<div id="content-container">
<div class="py-5 px-5">
<div class="cw-docs-spacer"></div>
<div role="main"><h1 id="working-with-templates">Working with templates</h1>
<p>Use Codewind to code and develop in languages of your choice by using templates. Templates make application development easier by providing a structure and boilerplate code, or framework, to help you start a new project. Templates appear as a new language and project type within the Codewind user interface.</p>
<p>When you create a new project, choose from the default set of templates available in Codewind, or choose a template source of your own. Add more development languages and sample projects by adding new templates.</p>
<p>Codewind provides preconfigured, containerized project templates covering several languages, including <a href="https://nodejs.dev/">Node.js</a>, <a href="https://www.java.com/">Java</a>, <a href="https://www.python.org/">Python</a>, and <a href="https://swift.org/">Swift</a> and several frameworks, such as <a href="https://expressjs.com/">Express</a>, <a href="https://spring.io/projects/spring-boot">Spring Boot</a>, and <a href="https://openliberty.io/">Open Liberty</a>. <a href="https://www.youtube.com/watch?v=zKMggp10gq4&amp;t=12s">Quickly create and deploy microservices</a> in languages and frameworks that you’re familiar with. Easily modify these preconfigured projects to develop your customized microservices.</p>
<h2 id="managing-templates">Managing templates</h2>
<p>The <strong>Template Source Manager</strong> provides template management in Codewind. To open the <strong>Template Source Manager</strong>, right-click a Codewind connection, then <strong>Manage Template Sources</strong>. The <strong>Template Source Manager</strong> appears.</p>
<ul>
<li><strong>Note:</strong> <strong>Template Source Manager</strong> is the name used in VS Code. Eclipse uses the name <strong>Manage Template Sources</strong>.</li>
</ul>
<p>Codewind templates are stored in the <a href="https://github.com/codewind-resources/codewind-templates">codewind-resources/codewind-templates</a>
GitHub repository. Three examples are included in Codewind for your reference:</p>
<ul>
<li>Standard Codewind templates</li>
<li>Default templates from Kabanero Collections</li>
<li>Appsody stacks to develop applications with sharable technology stacks</li>
</ul>
<p>Use the <strong>Template Source Manager</strong> to perform the following actions:</p>
<ol>
<li>To add a new template source to the table, click <strong>Add New</strong>. For more information, see <a href="#adding-your-template-sources-to-codewind">Adding your template sources to Codewind</a>.</li>
<li>Remove non-default template sources.
<ul>
<li><strong>VS Code:</strong> Click the trash icon.</li>
<li><strong>Eclipse:</strong> First make sure you are in the <strong>Manage Template Sources</strong> wizard. Select the non-default templates you want to remove. Then click <strong>Remove</strong>.</li>
</ul>
</li>
<li>Add templates to the wizard.
<ul>
<li><strong>VS Code:</strong> Toggle the <strong>Enabled</strong> slide to <strong>On</strong> so template source templates appear in the <strong>Create Project</strong> wizard.</li>
<li><strong>Eclipse:</strong> In the <strong>Manage Template Sources</strong> wizard, check the check boxes for the template sources you want to enable. After you’re done, click <strong>OK</strong>. A notification appears that says, <strong>Updating Template Sources: (0%)</strong>. The message disappears after the wizard successfully sets your preferred template sources.</li>
<li>Use template sources to add style projects to Codewind.</li>
<li>For example, before adding an Appsody project, enable at least one Appsody-style template source.</li>
</ul>
</li>
<li>Disable templates to prevent them from appearing in the wizard.
<ul>
<li><strong>VS Code:</strong> To disable a set of templates so they do not appear in the <strong>Create Project</strong> wizard, toggle the <strong>Enabled</strong> slide to <strong>Off</strong>.</li>
<li><strong>Eclipse:</strong> In <strong>Manage Template Sources</strong>, deselect the template sources you want to disable and click <strong>OK</strong>.</li>
</ul>
</li>
</ol>
<h2 id="creating-your-own-templates">Creating your own templates</h2>
<p>Add your own template sources to use in the <strong>Template Source Manager</strong>. An application architect generally creates these templates.</p>
<ul>
<li><strong>Prerequisites:</strong> Build and run templates that use languages and frameworks that are compatible with Codewind. Appsody, Maven, and Node.js styles built with Docker are supported.</li>
</ul>
<ol>
<li>Choose a GitHub repository to contain all of your new template sources.
<ul>
<li>Codewind uses <a href="https://github.com/codewind-resources/codewind-templates/tree/master/devfiles"><code class="highlighter-rouge">codewind-templates/devfiles</code></a>.</li>
</ul>
</li>
<li>Within this repository, create a folder for each template source.
<ul>
<li>For example, within the <code class="highlighter-rouge">devfiles</code> folder, Codewind has subfolders for template sources that include Go, MicroProfile, Lagom Java, and more.</li>
</ul>
</li>
<li>Each template source folder needs a <code class="highlighter-rouge">devfile.yaml</code> file with the following information:</li>
</ol>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">apiVersion</span><span class="pi">:</span> <span class="s">&lt;The version of the API that you use&gt;</span>
<span class="na">metadata</span><span class="pi">:</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">&lt;The name of your template&gt;</span>
<span class="na">projects</span><span class="pi">:</span>
<span class="pi">-</span> <span class="na">name</span><span class="pi">:</span> <span class="s">&lt;The name of your project&gt;</span>
<span class="na">source</span><span class="pi">:</span>
<span class="na">type</span><span class="pi">:</span> <span class="s">git</span>
<span class="na">location</span><span class="pi">:</span> <span class="s">&lt;The GitHub URL of the template location&gt;</span>
</code></pre></div></div>
<p>4. In the same GitHub repository where you saved the template source folders, create an <code class="highlighter-rouge">index.json</code> file. In this file, add the following values for each of the templates that you want to work with in Codewind:</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"displayName"</span><span class="p">:</span><span class="s2">"&lt;The name of your template&gt;"</span><span class="p">,</span><span class="w">
</span><span class="nl">"description"</span><span class="p">:</span><span class="s2">"&lt;The description of your template&gt;"</span><span class="p">,</span><span class="w">
</span><span class="nl">"icon"</span><span class="p">:</span><span class="s2">"&lt;The SVG graphic to be associated with your template&gt;"</span><span class="p">,</span><span class="w">
</span><span class="nl">"language"</span><span class="p">:</span><span class="s2">"&lt;The programming language that your template is written in&gt;"</span><span class="p">,</span><span class="w">
</span><span class="nl">"projectType"</span><span class="p">:</span><span class="s2">"&lt;The project type of your template&gt;"</span><span class="p">,</span><span class="w">
</span><span class="nl">"location"</span><span class="p">:</span><span class="s2">"&lt;The Git repository where the template itself is located&gt;"</span><span class="p">,</span><span class="w">
</span><span class="nl">"links"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="nl">"self"</span><span class="p">:</span><span class="s2">"&lt;The template devfile.yaml&gt;"</span><span class="w"> </span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<p>For an example <code class="highlighter-rouge">index.json</code> file, see the <a href="https://github.com/codewind-resources/codewind-templates/blob/master/devfiles/index.json"><code class="highlighter-rouge">index-json</code> file</a> in the <code class="highlighter-rouge">codewind-templates</code> repository.</p>
<p>5. To add the templates to Codewind, open your IDE and access the <strong>Template Source Manager</strong>.</p>
<h2 id="adding-your-template-sources-to-codewind">Adding your template sources to Codewind</h2>
<p>Add your template sources to Codewind with the <strong>Template Source Manager</strong>.</p>
<ol>
<li>Add the template.
<ul>
<li><strong>VS Code:</strong> In the <strong>Template Source Manager</strong>, click <strong>Add New</strong>.</li>
<li><strong>Eclipse:</strong> Right-click the connection in the Codewind Explorer view and select <strong>Manage Template Sources…</strong>. After the <strong>Manage Template Sources</strong> wizard appears, click <strong>Add…</strong>.</li>
</ul>
</li>
<li>Enter the URL and any other information.
<ul>
<li><strong>VS Code:</strong> Enter the URL to your template source <code class="highlighter-rouge">index</code> file and click <strong>Enter</strong> to confirm.</li>
<li><strong>Eclipse:</strong> Fill in the fields for <strong>URL</strong>, <strong>Name</strong>, and <strong>Description</strong>. Click <strong>OK</strong> when you’re done.</li>
</ul>
</li>
</ol>
</div>
</div>
<div class="py-5 px-5 text-right">
Last update: May 14, 2020
</div>
</div>
</div>
<!-- footer row -->
<footer>
<div id="footer-div-mobile">
<div class="row">
<div class="col-sm-12 text-center">
<span>Useful Links:</span>
<br/><br/>
<a class="cw-footer-links" href="http://www.eclipse.org">Eclipse Foundation</a><br/>
<a class="cw-footer-links" href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a><br/>
<a class="cw-footer-links" href="http://www.eclipse.org/legal/termsofuse.php">Website Terms of Use</a><br/>
<a class="cw-footer-links" href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a><br/>
<a class="cw-footer-links" href="http://www.eclipse.org/legal">Legal</a><br/>
</div>
</div>
<div class="cw_footer_display_flex cw-footer-same-height cw-footer-center">
<div class="cw_footer_display_icons row">
<div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12">
<div>
<div>
<a href="mailto:codewind-dev@eclipse.org"><img alt="Send us an email" title="Send us an email" src="images/footer/email-icon.svg" class="cw-logo" /></a>
</div>
</div>
</div>
<div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12">
<div>
<div>
<a href="https://twitter.com/EclipseCodewind"><img alt="Codewind Twitter" title="Codewind Twitter" src="images/footer/twitter-logo.svg" class="cw-logo" /></a>
</div>
</div>
</div>
<div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12">
<div>
<div>
<a href="https://github.com/eclipse/codewind"><img alt="Codewind Github" title="Codewind Github" src="images/footer/github-logo.svg"
class="cw-logo" /></a>
</div>
</div>
</div>
<div class=" cw-footer-col text-center col-md-3 col-sm-6 col-xs-12">
<div>
<div>
<a href="https://mattermost.eclipse.org/eclipse/channels/eclipse-codewind"><img alt="Codewind Mattermost" title="Codewind Mattermost" src="images/footer/mattermost-logo.png" class="cw-logo-mm" /></a>
</div>
</div>
</div>
<div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12">
<div>
<div>
<a href="https://www.youtube.com/channel/UCnKCVK6RFDyHFqUmXlAhCHQ"><img alt="Codewind YouTube" title="Codewind YouTube" src="images/footer/youtube-logo-dark.svg"
class="cw-logo" /></a>
</div>
</div>
</div>
<div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12">
<div>
<div>
<a href="http://www.eclipse.org"><img class="cw-logo-eclipse-mobile" alt="Eclipse" title="Eclipse" src="images/footer/eclipse.svg"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row cw-footer-desktop" id="footer-div">
<div class="cw-footer-left">
<div class="px-5 cw-font-12>
<span class="cw-font-14">Useful Links:</span>
<br/><br/>
<a class="cw-footer-links" href="http://www.eclipse.org">Eclipse Foundation</a><br/>
<a class="cw-footer-links" href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a><br/>
<a class="cw-footer-links" href="http://www.eclipse.org/legal/termsofuse.php">Website Terms of Use</a><br/>
<a class="cw-footer-links" href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a><br/>
<a class="cw-footer-links" href="http://www.eclipse.org/legal">Legal</a><br/>
</div>
</div>
<div class="cw-footer-border-right"></div>
<div class="cw_footer_display_flex cw-footer-same-height cw-footer-center">
<div class="cw_footer_display_icons">
<div class="cw-footer-col text-center">
<div>
<div>
<a href="mailto:codewind-dev@eclipse.org"><img alt="Send us an email" title="Send us an email" src="images/footer/email-icon.svg" class="cw-logo" /></a>
</div>
</div>
</div>
<div class="cw-footer-col text-center">
<div>
<div>
<a href="https://twitter.com/EclipseCodewind"><img alt="Codewind Twitter" title="Codewind Twitter" src="images/footer/twitter-logo.svg" class="cw-logo" /></a>
</div>
</div>
</div>
<div class="cw-footer-col text-center">
<div>
<div>
<a href="https://github.com/eclipse/codewind"><img alt="Codewind Github" title="Codewind Github" src="images/footer/github-logo.svg"
class="cw-logo" /></a>
</div>
</div>
</div>
<div class=" cw-footer-col text-center">
<div class="cw-logo-mm" >
<div class="cw-logo-mm" >
<a href="https://mattermost.eclipse.org/eclipse/channels/eclipse-codewind"><img alt="Codewind Mattermost" title="Codewind Mattermost" src="images/footer/mattermost-logo.png" class="cw-logo-mm" /></a>
</div>
</div>
</div>
<div class="cw-footer-col text-center">
<div>
<div>
<a href="https://www.youtube.com/channel/UCnKCVK6RFDyHFqUmXlAhCHQ"><img alt="Codewind YouTube" title="Codewind YouTube" src="images/footer/youtube-logo-dark.svg"
class="cw-logo" /></a>
</div>
</div>
</div>
</div>
</div>
<div class="cw-footer-border-right"></div>
<div class="cw-footer-right cw-footer-same-height cw-footer-vcenter">
<div class="cw-footer-eclipse-img cw-footer-same-height px-5 ">
<a href="http://www.eclipse.org">
<img alt="Eclipse" title="Eclipse" src="images/footer/eclipse.svg"/>
</a>
</div>
</div>
</div>
</footer>
<!-- footer row END -->
<!-- Main Col END -->
<!-- Jquery -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous">
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous">
</script>
<script src="js/jquery.matchHeight-min.js"></script>
<script src="js/index.js"></script>
<script src="js/docs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-docker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-json.min.js"></script>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.0/anchor.min.js"></script>
<script>
$(document).ready(function () {
anchors.options.placement = 'left';
anchors.add('h1');
anchors.add('h2');
anchors.add('h3');
anchors.add('h4');
});
</script>