Getting Started

The best way to get started with CodeOnly will depend on what you're trying to achieve...

#CodeOnly Lab

If you just want to experiment with and learn about CodeOnly, the CodeOnly Lab is the perfect way to get started. You can write simple components and experiment with them right in your browser.

• The Lab expects a component class called "Main" as the entry point to your experiment.

• Save your experiments by clicking the Copy Link button - that'll copy a link to your clipboard that you can use to share your experiments and to reload them later.

• Clicking the "Copy Link" button also places the link in the browser address bar so you can refresh to get back to a previous save point or use browser bookmarks to save your experiments.

• The ".html" button will download a .html file containing your experiment. You'll still need a web connection to run it because it gets JavaScript and CSS files via CDN, but it's an easy way to make a simple web app.

• The Lab only supports a single source code file but you can still use multiple components - just put them one after the other.

#CDN Packages

CDN packages for CodeOnly are available via jsDelivr.

ES6 Library:

• https://cdn.jsdelivr.net/gh/codeonlyjs/core@0.0.78/dist/codeonly.js
  

Minimized ES6 Library:

• https://cdn.jsdelivr.net/gh/codeonlyjs/core@0.0.78/dist/codeonly.min.js
  

See the jsdelivr docs for more information on selecting specific versions.

The easiest way to use these packages is with an import map:

<script type="importmap">
{
    "imports": {
        "@codeonlyjs/core": "https://cdn.jsdelivr.net/gh/codeonlyjs/core@0.0.78/dist/codeonly.min.js"
    }
}
</script>

You can then import from the library using the same @codeonlyjs/core package name as the NPM packages:

<script type="module">
import { Component, css } from "@codeonlyjs/core";
// etc...
</script>

#NPM Package

The CodeOnly NPM package is available from github:

npm install --save codeonlyjs/core

The NPM package can be used with bundling tools like Rollup and Browserify or build servers like Vite and Snowpack.

#SPA Project

A CodeOnly SPA Project is an easy way to get started on a single page app.

It includes the entry index.html file, a router, home page, header bar, and Stylish theme with light/dark mode support.

To create a CodeOnly Single Page App project:

1. You'll need NodeJS to run the CLI tool - get it here.

2. From a command prompt, enter the following command (replacing "MyNewProject" with the name of your project):

   npx codeonlyjs/cogent new spa MyNewProject
   

This will create a new directory containing everything required for a client side single page app.

Included in the new project directory will be a readme.md file with information about the project structure and instructions on how to run it during development and build it for production.

#Full Stack Project

A CodeOnly Full-Stack project is an alternative to using a development build server (eg: Vite, SnowPack etc...).

Rather than running a both a front-end build server and a back-end web server, a CodeOnly full-stack project includes a NodeJS/ExpressJS server that does both.

This has some nice advantages, especially during development:

• it serves NPM packages (including the CodeOnly NPM package) directly to the browser without the need for building or bundling
• includes live-reload support - save your file and the browser updates immediately
• on Chromium based browsers it supports editing and saving files in the debugger
• since there's just one server there's no need for API request proxying from the build server to the back-end server

For production:

• everything is built, bundled and tree-shaken for fast, efficient delivery
• project is configured and ready to run in Docker

Most of this is made possible with our related product Bundle-free.

A full-stack project includes a front-end single page app client with entry index.html file, a router, home page, header bar, and Stylish theme with light/dark mode support.

To generate a full stack project:

1. You'll need NodeJS to run the CLI tool - get it here.

2. From a command prompt, enter the following command (replacing "MyNewProject" with the name of your project):

   npx codeonlyjs/cogent new fullstack MyNewProject
   

This will create a new directory containing the new project files.

Included in the new project directory will be a readme.md file with information about the project structure and instructions on how to run it during development and build it for production.