Rangi Ruru Girls' School Svelte Template

This is a starting template for building and running an app using Svelte.

---

Install

1. Download and install NodeJS on your laptop.

NodeJS lets you run JavaScript code outside of a browser, such as on your dev laptop. Providers like Netlify also use it to run JavaScript on their hosting servers. You'll use it to automatically build and display your app from your source code so you can see and test it in your browser. There are only two commands you'll need for this - explained next.

2. In Visual Studio Code open a new terminal (Ctrl + Shift + `), choose the folder where this project is saved, and enter and run this command.

npm install

NPM stands for Node Package Manager and comes with NodeJS. It reads the package.json file to see what packages you want to include with this project, then downloads and installs them into the node_modules/ folder. NodeJS knows to look in there for packages it needs when you run the next command to build your app.

"A package is a reusable piece of software which can be downloaded from a global registry into a developer’s local environment. Each package may or may not depend on other packages." - freecodecamp.org "Simply put — a package manager is a piece of software that lets you manage the dependencies (external code written by you or someone else) that your project needs to work correctly." - freecodecamp.org “To make it more clear, your package.json states “what I want” for the project whereas your lockfile says “what I had” in terms of dependencies. — Dan Abramov

Develop

3. In the same terminal enter and run this command.

npm run dev

Your browser will pop up with the app and it'll rebuild itself and refresh in the browser every time you save a file. You can make changes, save, and then check them as you develop your app.
Note: you'll need to run this command each time you open VS Code to restart the development server on your laptop.

The dev part of npm run dev is defined in the package.json file in the "scripts" section. It says to npm to use rollup with the -c -w commands. The first command, -c, tells rollup that there a config file for it to use, rollup.config.js which has comments to help explain its parts. The second command, -w, tells rollup to watch your code for changes and reload the app every time you save.

Publish

4. Commit your code to a repostitory on GitHub.

5. Connect your repository to Netlify and set it up as a new site, but ensure...

6. On the third page of the Create a new site process on Netlify, add the following to the section at the bottom.

• Build command: npm run prod
• Publish directory: public

6.5. If you accidentally missed the last step: don't worry! On your new site's Netlify page go to Settings -> Build & Deploy -> Edit Settings and update the following settings:

• Build command: npm run prod
• Publish directory: public

Committing to GitHub means there's a copy of your project's code online. The copy includes all the changes you've made in different commits as well as the each commit summary and description you wrote for those changes.

Netlify provides free hosting for sites that are saved on GitHub. Netlify will automatically know when you push a new commit to GitHub and update your website accordingly. In this case, Netlify needs to build your website from your source code each time, and know where to put the resulting output files. This step is similar to npm run dev that you do on your own laptop, but it's a production version and excludes some of the debugging features and the rebuilding/refreshing behaviour. Excluding those parts makes your app faster and more responsive for users.

Get coding

Use the Svelte tutorial, Svelte documentation pages, Svelte examples, and web searches to look up whatever you want your app to do!

---

How-Tos

---

Reset all CSS rules

1. Add the following CSS to the index.svelte file inside the <style></style> tags.

  :global(*) {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    text-decoration: none;
  }

2. Save index.svelte and your changes should show in the browser when you run npm run dev.

Every browser has its own default rules it uses for displaying HTML elements, like <h1> and <a>. Resetting all the rules means that your app is more likely to display consistently in all browsers because it only uses the style rules you have specified. You might notice there's an unusual piece of code there: :global(). This is Svelte-specific code that tells Svelte that this bit of CSS should apply to all components, not just the one it's defined in.

Apply a CSS framework, e.g. Bulma

1. Copy the minified Bulma CSS from their GitHub repository and paste it into a new file called bulma.css in the public/ folder. Remember to save the file.

2. Add the following code after the link to bundle.css inside the <head> section of the index.htm file in the public/ folder.

<link rel="stylesheet" href="bulma.css">

3. Save index.htm and your changes should show in the browser when you run npm run dev.

The public/ folder stores the final files that will be presented to the user and you can include files there and add them to index.htm if you need to, but you should do this sparingly. Your written code should be in the src/ folder as much as possible and when to use each folder will become clearer to you the more projects you complete.

Add images (and other media)

1. Create an img/ folder in the public/ folder and put your image files inside.

2. In your index.svelte and other components you can reference your images as if you're accessing them from index.htm.

<img src="img/picture.png" alt="A picture.">

This can be a little confusing at first but just remember that all your code from the src/ folder gets bundled up and put into the public/ folder for displaying to the user. Unfortunately, the way this works means VS Code can't autocomplete file paths (like href, src, and link) for you.