The command will produce a minified and production-ready bundle that you can host on your preferred hosting server. This is a screenshot of our daily news app:Īfter developing your application, you can create the production bundles by running the build command in your terminal: npm run build Open the main.js file of your project, and you should find the following code: import App from './App.svelte' const app = new App ( If you do any changes, they’ll be rebuilt and live-reloaded into your running app.

Your dev server will be listening from the address. Next, navigate inside your project’s folder and run the development server using the following commands: cd dailyplanetnews Open a new terminal and run the following command: npx degit sveltejs/template dailyplanetnews You can either install degit globally on your system or use the npx tool to execute it from npm. Now, let’s start building our Daily Planet news application by using the degit tool for generating Svelte projects. We’ll be using a JSON API as a source of the news for our app, so you need to get an API key by simply creating an account for free and taking note of your API key. Node.js can be easily installed from the official website or you can also use NVM for easily installing and managing multiple versions of Node in your system.

Node.js and npm installed on your development machine.

Familiarity with HTML, CSS, and JavaScript (ES6+),.

You need to have a few prerequisites, so you can follow this tutorial comfortably, such as: We’ll also learn how to initialize a Svelte project, run a local development server and build the final bundle. We’ll be learning about the basic concepts like Svelte components and how to fetch and iterate over arrays of data. Svelte is faster than the most powerful frameworks (React, Vue and Angular) because it doesn’t use a virtual DOM and surgically updates only the parts that change. As a result, you’re able to write ambitious applications with excellent performance characteristics.

Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM.

In a nutshell, this is how Svelte works (as stated in the official blog): Instead of doing the necessary work in the browser, Svelte shifts that work to a compile-time phase that happens on the development machine when you’re building your app. Svelte makes use of a new approach to building users interfaces. In this tutorial, we’ll be introducing Svelte by building a news application inspired by the Daily Planet, a fictional newspaper from the Superman world. One important difference is that it doesn’t use the concept of a virtual DOM. Svelte is a new JavaScript UI library that’s similar in many ways to modern UI libraries like React.

News app source code