riotjs development template using vite
Go to file
Geoff Doty 20add3d5cc tweak 2023-03-02 13:32:41 -06:00
src tweak 2023-03-02 13:32:41 -06:00
.gitignore initial commit 2022-07-06 22:32:19 -04:00
LICENSE initial commit 2022-07-06 22:32:19 -04:00
README.md major refactor of auto component init 2023-03-02 13:29:00 -06:00
index.html major refactor of auto component init 2023-03-02 13:29:00 -06:00
package-lock.json major refactor of auto component init 2023-03-02 13:29:00 -06:00
package.json major refactor of auto component init 2023-03-02 13:29:00 -06:00
vite.config.js project structure refactor 2022-07-28 18:38:49 -04:00

README.md

Vite RiotJS Template

Use Vite Starter Template to scaffold a new Riot project.

Getting Started

Pull the template files with degit and install dependencies

npx degit n2geoff/vite-riot-template my-project

cd my-project
npm install
npm run dev

Checklist

When you use this template, you should update the following with your information

  • Update package.json information
  • Change the author name in LICENSE
  • Change the favicon in public
  • Clean up the README

Project Structure

dist/                               <-- `npm run build` app
src/                                <-- your source code
    css/                            <-- processed css files
    js/                             <-- processed javascript files
    public/                         <-- unprocessed static `/` assets
    components/                     <-- riots components
        hello-riot/
            hello-riot.riot         <-- riot component
            hello-riot.spec.js      <-- component tests
    app.js                          <-- app initialization
index.html                          <-- START HERE
vite.config.js                      <-- build configuration
README.md
...                                 <-- misc project meta files

Mounting Strategy

This template automaticly registers and mounts riot components. These global components can in-turn can mount other nested components via components export option.

Example

// my-page.riot
<my-page>
    <div>
        <example-component></example-component>
    </div>

    <script>
        import Example from './example-component/example-component.riot';

        export default {
            components: {
                Example
            }
        }
    </script>
</my-page>

SEE: /src/app.js for more information

Tests

In a folder-per-component setup, you can place your *.spec.js files right next to your web components for isolated testing, but this template is a...

bring your own testing solution

EXAMPLE: https://github.com/riot/examples/tree/gh-pages/timer

NPM Scripts

  • npm run dev - Starts the development server at port 3000
  • npm run build - Builds the application in a dist folder
  • npm run preview - Serves the build files (dist folder) locally at port 5000

Note that if after this last command you do not see anything, you can use instead this other command:

npm run preview --host - You should then be able to see your files locally at port 5000

License