All aspiring svelte developers have seen the first 4 words that svelte asks a developer to type. These 4 words start the adventure and like most great adventures, this humble beginning is sometimes overlooked. With just 4 words we have a project ready to go and we can start using svelte and with just a few more lines, we can even start using Typescript!
Today, let's take a deeper look at the incantation that starts it all.
npx degit sveltejs/template my-svelte-project
This command copies a project from somewhere to our PC that will act as the base of the work we do. However there is a lot going on in this quite innocuous command. Let's take it piece by piece and explain what every word means and does!
The first word, npx, stands for the node package executor. This is a utility that is installed alongside node and npm now in 2022. This wasn't always the case.
https://github.com/npm/npx
Interesting side note, this package name was actually donated by the original creator who was making a tessel board neopixels library. I know two of those 4 in the previous four. It's fun to see how there is a wild goose chase in anything we do. I imagine I could dive into those four words if I let myself, but let's try stay on the course.
npx let's us install node packages without "really" installing them. It's actually a bit funny because from what I can tell npx and npm both do the same thing. npm can be used to install a node package either in a global space or in a local project space. npx let's you install packages to an npx specific space. This way you can do something like npx cowsay hi and npx will install cowsay to ~/.npm/_npx. This way you have a global node package ready to be used without polluting the actually global namespace.
npm also requires you to install and then run packages, npx will let you run packages that you haven't even installed yet. This is because npx will go out and fetch whatever it needs, if the package hasn't been used with npx before.
npx technically did install the node package but because it didn't put it in our PATH, it isn't really installed. We can only use these packages through npx. Had we used npm to run these packages, it would be a true installation. We would have added the package to our PATH environment variable and had been able to use the package from anywhere in the command line.
Now that we know that npx is getting node packages and executing them, we can move the next word!
The next word is degit. De-git. degit is a utility written by the creator of Svelte, Rich Harris. degit is really a way to get git repository and have it cleaned up and ready for someone to use.
https://github.com/Rich-Harris/degit
When we clone a git repository, we also bring over it's git history and all of its trappings. This doesn't make sense for if we want to use a repository as a base template for our own project. We need to therefore, remove the git history and re-initialize git. The degit tool does this for us.
By using npx to install and execute this utility, we don't pollute our environment and this way, the command will always work. In this case, I doubt I'd use degit that often so using npx is great. I wonder if people who use git repos as bases for their projects use degit or do they use git clone and manually clean things up for their next project.
I personally have base template projects in a junk folder that I use as starters for different things.
Now that we know what the second word means, it explains the third and the fourth. We want to execute the de-gitification of a git repo, sveltejs/template.
https://github.com/sveltejs/template
This is the git repo for the svelte template. This is where the starter code and the dev dependencies are all defined. If we wanted to manually create a svelte project, this would be the place to refer to. Poke around and see how much is going on in the package.json. There isn't too much but once again, you could get lost in all of the things that look straightforward but have entire stories behind them.
The final word is my-svelte-project. This is an argument to the degit utility, it tells the utility to get the git repo referenced before and rename it to this name.
With that we are done! We have a svelte starter project on our system.
The next 3 lines are also quite the trip, but we'll speed through them.
cd my-svelte-project
This command switches us into the project folder that we just downloaded and renamed.
npm install
npm is the node package manager and the install argument is telling npm to install everything referenced in the package.json. npm will go fetch all of the packages and all of their dependencies and set them up in the node_modules folder. The big packages that svelte seems to use besides the svelte compiler package is rollup and sirv. Some day I'll need to take a look at what those things do as well!
npm run dev
Finally the last command we run is also something provided by the node package manager. Here npm can be used to also run scripts that are defined in package.json. Inside package.json is a scripts object where we can specify some sort of command or script file to be run for a key. So inside the svelte package.json is a definition for dev that launches the svelte compiler and has it running and watching our files. This way we can make changes to our project and it will be compiled and reloaded in the browser automatically.
This is quite the magical step as there is just as much going on here as there was in the first line that we went through.
These are the first four lines that all svelte developers have run into! It's quite the shared experience isn't it? Even if we didn't understand it, so much happens when we run those few lines.
Now there, is one more line that we can run that many of you probably have. That is the magic words to get typescript support in svelte.
node scripts/setupTypeScript.js
This is run after the second line and before the third line. Once we have switched into our project folder, we want to use node to run a script that comes with the project template. This script modified the package.json to add a few typescript libraries and enable their support. This way, the next step of using npm install will install typescript in addition to the usual packages we need to install for svelte.
! With that we are done! This post is a bit romantic because I do see programming and working with computers as something magical and just like the world, everything can be dug in to and everything is deeper than it looks. It can be overwhelming when you think about it and it can feel impossible to know everything but we just need to know a little bit more each day.