Setup




Welcome to the Svelte Native Setup Tutorial

🚀

Lets start with seting up the necessary tools and utilities we need to get started with native script development, it typically includes a text editor like visual studio code, a terminal to run tasks along with nodejs and python for runtime and installation. In case if you find video tutorials better I recommend you watch these videos.




Mobile setup :


Since you are starting with android app development by using a desktop you need to download Native Preview app developed by the native script team to run the native script app on android/ ios in development environment


playstore playstore


+

=




Lets get started!





1. Installing nativescript

Lets start by installing nativescript using windows powershell and node package manager (npm), make sure you have nodejs and python installed and updated in your system properly as an old version of either of the runtimes can cause errors while installing. Its a long processess so it may take some minutes


Terminal

//install nativescript and check status
npm install -g nativescript
ns

Result : the template will install nativescript and display status of the nativescript after installation



2. Creating a svelte native project

Creating a svelte native project is easy, we will use native script command ns to create a native script project specifically configured for svelte


Terminal

//create project called mobileApp and open it
ns create mobileApp --svelte
cd mobileApp
ns preview

Result : The prompt will perform the setup of the project withing a minute and run the project for android, use ios in place of android for ios development,scan the qr using native script app scanner and the project will start running on your mobile device



3. Creating your first "Hello World" App

Lets clear the App.svelte file in the mobileApp folder and create a label called Hello World that will display in the mobiel app


//install nativescript and check status
<frame>
<page>
	<stacklayout>
		<label text="Hello World! my name is Tanishq Dhote"/>
	</stacklayout>
</page>
</frame>

Result : the template will install nativescript and display status of the nativescript after installation





Looking for support?



svelte

Svelte JS

svelte

Svelte Native

svelte

Tanishq Dhote



A tutorial made by Tanishq