Starting your first Svelte App with just 3 lines of code
Starting your first Svelte App with just 3 lines of code
This post is intended to demonstrate how easy it is for anyone to create a web app in Svelte.
24 May 2021


npm init svelte@next
npm i
npm run dev

Thats it! Thats all you need to know to get your app started.

All you need now is:

  1. An interpreter to process the command.
  2. A terminal to type in the commands.

The Interpreter

The commands starting with npm are Node command. Node is very powerful tool that will help us install, run and build our web app.

  1. Download the latest version here: https://nodejs.org/en/download/ Starting your first Svelte App with just 3 lines of code

  2. Install Node

This should be a seamless process


The Terminal

The terminal we will be using to type our code is Visual Studio Code. VS Code is not just a terminal, it is a very powerful IDE that can easily be extended.

  1. Download the latest version here: https://code.visualstudio.com/ Starting your first Svelte App with just 3 lines of code VSCode

  2. Install VS Code.

    This should be a seamless process

  3. Install “Svelte for VS Code” Extension (Optional).

    Although not required to get your app started, This Extension will later come in handy when we start coding our web app. Starting your first Svelte App with just 3 lines of code

    1. Click on Extensions on the side bar
    2. Search for “Svelte for VS Code”
    3. Select it in the search result
    4. Click on Install

    This extension adds great features to VS Code like: code highlighting, code completion, code formatting, error linting and many more.


Lets get started

  1. Create a new folder for your project

  2. Open VS Code

  3. In VS Code, open the folder you created Starting your first Svelte App with just 3 lines of code

  4. Open the terminal window Starting your first Svelte App with just 3 lines of code

  5. Type in the first command and press Enter

npm init svelte@next

You will be prompted with some questions. Answers according to the image below. Starting your first Svelte App with just 3 lines of code This will scaffold a new project in the folder you created.
Starting your first Svelte App with just 3 lines of code

  1. Type in the second command and press Enter
npm i

This is the short form of ‘npm install’. This will install your app dependencies.

  1. Type in the third command, and press Enter
npm run dev

This will start a development server on ‘localhost:3000’.

  1. Open your browser and type ‘localhost:3000’ in the address bar Starting your first Svelte App with just 3 lines of code

Viola!!!

You did it!

You have just created your first working Svelte app. This is the beginning of greater things to come.

What you have created is a skeletal project which is the most basic form of a Svelte app. This app can be expanded into an extremely high-performance web app.


You can learn more and get more details at Svelte and SvelteKit.




| Author


Comment
No comment


Get In Touch
Got a question or proposal, or just want to say hello? Please go ahead.

Message
favicon Theophilus Ogbolu
Name: {name}
Email: {email}

{message}