Svelte Installation Guide
1
Create project
1Step 1
In terminal run: npm create vite@latest svelte-page -- --template svelte
2Step 2
Then run: cd svelte-page
3Step 3
Install dependencies: npm install
2
Replace default content with Tetrons page
1Step 1
Navigate to: src/App.svelte
2Step 2
Replace all the code in App.svelte with:
1<script>
2</script>
3
4<style>
5 .container {
6 flex: 1;
7 flex-direction: column;
8 display: flex;
9 height: 100%;
10 width: 100%;
11 }
12
13 .iframe {
14 width: 100%;
15 height: 100%;
16 border-radius: 0.3rem;
17 box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.03);
18 }
19
20 h2 {
21 color: #343a40;
22 margin-bottom: 1rem;
23 text-align: center;
24 }
25</style>
26
27<div class="container">
28 <h2>Tetrons Editor</h2>
29 <iframe
30 src="http://staging.tetrons.com/editor/dist/editor-host.html"
31 width="100%" height="600"
32 style="border: none;"
33 allowfullscreen></iframe>
34</div>3
Run the development server
1Step 1
Run: npm run dev
Output Preview
