A starter template for Svelte that comes preconfigured with Webpack, TypeScript, Phaser, SCSS, Babel, Autoprefixer, and HMR.
npm install
Run the dev
script to start a live development server with hot module replacement. Then check the output for a link
to the app, which is usually http://localhost:8080/
:
npm run dev
Run the build
script to bundle the app for production. The bundle will be created at /public/build/
and the public
directory will contain all files you need to host the app:
npm run build
💡 Tip: You can quickly test the production build by running
npm start
locally.
First upload the following files and folders to your target server:
package.json
package-lock.json
public
Then install dependencies:
npm install --production
Finally run the start
command to launch the included web server:
npm start
The Procfile
determines the npm command to run once the build is complete.
💡 Tip: By default the
npm run build
command is called by Heroku once the code has been successfully pushed to their server.
We use express
to serve the build
Add one or more global stylesheets to the bundle by editing the stylesheets
variable at the top of
webpack.config.ts
:
const stylesheets = [
'./src/styles/index.scss'
];
You can specify css
, scss
, and sass
files here, and they will be compiled and minified as necessary. These styles
will be added to the beginning of the bundle in the order specified. Svelte's styles will always appear last.
The bundle will be compiled to run on the browsers specified in package.json
:
"browserslist": [
"defaults"
]
The default value is recommended. If you wish to customize this, please refer to the list of example browserslist queries.
💡 Note: This template includes
core-js
andregenerator-runtime
which means your source code will be transpiled and polyfilled to run on old browsers automatically.
Production builds are compiled with Babel automatically. If you wish to disable it, edit the webpack.config.ts
file:
const useBabel = false;
Babel is disabled during development in order to improve build speeds. Please enable it manually if you need:
const useBabelInDevelopment = true;
Define import path aliases from the tsconfig.json
file. For example:
"paths": {
"@stores/*": ["src/stores/*"]
}
You can then import files under these aliases and Webpack will resolve them. Your code editor should also use them for automatic imports:
import { users } from '@stores/users'; // src/stores/users.ts
The root directory is configured as a base path for imports. This means you can also import modules with an absolute
path from anywhere in the project instead of using a large number of ..
to traverse directories.
import { users } from 'src/stores/users';