NOVAS: Accelerating Svelte and Deno Application Generation. | by Sylvia Liu | CodeX | Nov, 2021

Sylvia Liu
image courtesy of NASA

Configuring applications from the ground up is likely to be one of the most time-consuming and cumbersome barriers in development — especially when wanting to try new technologies. What if you want to quickly hit the ground running to start programming in that new framework and runtime without needing to jump through hoops of set up? Perhaps you’ve heard about this more performant framework than React and Vue.js that you were interested in using. Maybe also that attractive Node.js runtime alternative with its default security and compatibility with TypeScript? Are these technologies even compatible with one another out-of-the-box?

hello, novas

NOVAS is a comprehensive build tool that enables developers of all experience levels to efficiently set up Svelte applications in a Deno runtime. Developers can create performant sites with one of the most loved and satisfying web frameworks with Svelte while leveraging the security and TypeScript support features of Deno. NOVAS eliminates the headache of initial file configuration setup, dependency importing, and boilerplating, allowing developers to focus on writing business logic.

Its lightweight and snappy Command Line Interface (CLI) gives developers a way to create, compile and bundle new Svelte single-file components in a fast development environment by using hot/live reloading for an excellent user experience.

NOVAS bridges the gap of implementing and integrating Svelte’s cybernetic framework into a modern Deno runtime so developers can create more with less work.

deno install --allow-net --allow-read --allow-write --unstable https://deno.land/x/novas/cli.ts

Simply install NOVAS from the command line with the specified permissions and follow the instructions on our Github to create your first NOVAS application.

  • To create a project, type:
 novas create [project name]
  • To compile, first change directories to the root of the project (cd [project name]), then type:
novas build
  • To start developing, type:
novas dev

In sum, NOVAS offers a simple and intuitive CLI solution to overcoming Svelte and Deno incompatibilities. NOVAS utilizes only the standard Deno library, prioritizing a small bundle size and limited dependency approach.

Upon app creation, NOVAS initializes the default directory and file structure for your new project. Developers are provided with a standard build, public, and src folder.

When provided the path to the root App.svelte component, NOVAS identifies and modifies all the .svelte files to be browser compatible. After successfully building the application, the build folder will be populated with the corresponding .js files. Following server startup, the initial static site can be viewed on http://localhost:5000.

Complete instructions can be found on NOVAS readme.

🔎 Preview your code in real-time

As you modify your Svelte components during development, JavaScript is dynamically generated in real-time so you can see your changes on the browser immediately. This feature is made possible via NOVAS’s implementation of WebSockets that, under the hood, is listening for modified or deleted file changes in the src folder. Upon saving any changes, the Svelte code will be compiled again and the browser will reload to reflect the changes.