triptych

Creative works, working to create

Before you start

Yes! You can have a Svelte based app up and running in as fast as 90 seconds! Before we start the timer, let's get a few things set up (in case you don't already have them ready to go). * Get a Github account * Get a Netlify account * Install Visual Studio Code * Install Node.js on your system

Decide on a name

What will you call your project? This will determine how you fill in the next few steps.

Let's go!

1) Launch Visual Studio and create a directory with the name you chose. I picked StrawberryIcecream.

2) Open a terminal window.

3) Type the following in the terminal:

npx degit sveltejs/template StrawberryIcecream (You could skip the create directory part in step 1, but I do this just to keep everything separate).

4) Try out your app. Type in the following in the terminal:

  cd StrawberryIcecream
  npm install
  npm run dev

You should see something like this in the terminal

And this in the browser

5) Now go to https://github.com/new/ (We are doing this so Netlify will have a place to find your files, and you can update them any time and Netlify will update your app!)

6) Put in your project name.

7) Hit Create repository (Make sure the repo is “public”)

8) Now you need to get your files from your desktop to your repo. You should see something like this:

9) Click uploading an existing file and you'll see something like this.

10) Now go find your StrawberryIcecream folder on your system and drag and drop the files to your repo. Be sure to NOT include the node_modules folder.

11) Hit Commit changes to push them to your new repo. This completes the process and basically “stamps” your files with a time stamp so you can make changes to them later.

We are almost done!

12) Sign in to Netlify.

13) Choose New site from Git

14) Choose Github under Continuous deployment

15) It will ask you to authenticate with Github. You say yes.

16) Now pick a repo. I'm picking my StrawberryIcecream one.

17) Now here's a potentially tricky part. You need to tell Netlify how to build your app, and what directory to deploy from. You will see Basic build settings . * In the build field type npm run build * In the publish directory type /public

18) Hit Deploy site. You should see something like this:

19) After a few seconds you should see something like this:

20) Your site is deployed! Click the url and you will see your Svelte App! If you want to change the name of the site go to Site settings and hit Change site name I changed mine to https://strawberryicecream.netlify.com/

Now, here's the cool thing. You can make changes to your local files, you can push them up to your github repo (you can even drag and drop them again if you don't want to use GIT commands!) and after you commit the changes, the site will automatically update!

1) Just make a change in Visual Studio ( go to src/main.js):

2) Go to your github repo ( mine is https://github.com/triptych/StrawberryIcecream/tree/master/src )

3) Hit upload files ( assuming you don't want to set up GIT to do it that way)

4) Pick your main.js file you changed. Drag and drop it up to the site and commit the change.

5) Wait about 60 seconds.

6) Your site is updated!!

So, with barely any set up, or special commands, you can get a Svelte site up and running in minutes! I hope you got something out of this article. Please share and stuff!

Well, I'm slowly making progress with #sveltejs . Today I was able to get a simple app up and running on a Netlify instance really really easily.

I just went through this tutorial and uploaded my files easily to this repo. You can see my result at this site.

This gives me great hope about my interactive fiction engine ( right now called STIM ).

Still digging though Svelte tutorials from Udemy, but darn it if it's not a slick framework / compiler.

Today I'm starting my development journey with Svelte. I'm getting my local development environment set up with Visual Studio code, I'm going through my Udemy tutorials, and I'm going to see if I can get a simple deployment through Netlify. I'm going to go through this Medium article about deployment which I think will complete the picture for me.

I'm kinda jumping the gun here a little. Why am I even doing this? I have been working on an Interactive Fiction tool called STIM as a way to create something using web technologies to make game making tools.

I originally implemented it with a mix of Vanilla JS and a simple framework called Torus which I highly recommend if you are whipping up a quick demo of a web app.

But now that I'm getting more serious about things, I want something more supported in the web dev community, something fast and advanced, and something to help me keep up to speed in the world of webdev.

Svelte caught my eye right away as it sticks to KISS and web standards, as well as taking a novel approach to web development by not downloading a huge runtime to the browser, but instead you “compile” your app locally ( or remotely with Sapper ) and it builds a small, fast, server rendered when needed app.

It takes the best from React, Vue, and it's own ideas and makes developing components fun again.

I'm only just starting to learn about its features, which is why I'm blogging about it here!

If you want to see a quick demo of what Svelte can do, check out this demo from the Svelte REPL.

I don't have anything scary to share today but I have a kinda spooky CSS demo I created a long time ago that I can share called Magic Sword.

Tomorrow I start my #sveltevember #devlog about diving deep into Svelte and getting STIM ported over to it as a first experiment. I will blog about my experiences and share my progress from this blog!

I've been wanting to get back into writing, coding for games, and learning about Svelte, so I've decided to combine all this into one effort where I do a #devlog about my experiences with #svelte and how I'm porting STIM over to it as a first pass.

It's been a busy few months here in Andrew Land. I've been working on a serial novel called The Clockwork Apprentice as well as an interactive fiction writing tool called STIM .

I'm trying to figure out how all these tools fit together, and where I should be posting articles.

I've not forgotten Godot Engine as it's rapidly moving towards another release. I'm particularly excited about the new text effects.

About to spend some time off on vacation. Need a break from the relentless code demands.

Chapter 10 of The Clockwork Apprentice is out

Part 8

I'm working on a new serial novel:

I'm working steadily on STIM and having a great time coding it up. It's been a long time since I've had “fun” building something on the web. And it's been because I have stopped feeling guilty about knowing some framework or doing it the “best way”. I'm using a collection of open source projects to build it and not reinvent the wheel.

Other than that, I'm looking forward to playing a game called Dragon Quest Builders 2 which is this really fun RPG/sandbox game.

The theme for the rest of this year is “output” and I aim to follow that.

Look for more posts soon on my progress on STIM

Enter your email to subscribe to updates.