One Sky IT's Aether App - SvelteKit v2
This uses SvelteKit version 2, TailwindCSS, and Skelton.
Current Modules
AE Events - Speakers (/events_speakers)
Components
- +page.svelte - The main page for the Events - Speakers module
- 10_edit_modal__event_presenter_obj.svelte - The modal for editing a presenter
- 10_list__event_presenter_obj.svelte - The list of presenters/speakers
- 10_view_modal__event_presenter_obj.svelte - The modal for viewing a presenter
[slug]
- +page.svelte - The main page for the presenter ID [slug]
AE Sponsorships (/sponsorships)
- +page.svelte - The main page for the Sponsorships module
- 10_edit_modal__sponsorship_obj.svelte - The modal for editing a sponsorship
- 10_list__sponsorship_obj.svelte - The list of sponsorships
- 10_view_modal__sponsorship_obj.svelte - The modal for viewing a sponsorship
[slug]
- +page.svelte - The main page for the sponsorship ID [slug]
Future Modules
AE Events - Badges (/events_badges)
- +page.svelte - The main page for the Events - Badges module
- 10_list__event_badge_obj.svelte - The list of badges
- 10_view_modal__event_badge_obj.svelte - The modal for viewing a badge
AE Events - Exhibit Leads (/events_exhibit_leads)
AE Events - Presentation Management (/events_pres_mgmt)
How to build and deploy SvelteKit:
Copy the contents of the "build" directory to ./npm_deploy/build/
npm run build
If this is just a quick build update then only the build directory needs to be copied (rsync).
rsync -vhrz --exclude 'node_modules' ~/OSIT_dev/ae_app_svelte_tailwind_skeleton/build/ ~/OSIT_dev/ae_env_node_app/npm_deploy/build/ --delete
rsync -vhrz ~/OSIT_dev/ae_env_node_app/npm_deploy/build/ scott@linode.oneskyit.com:/srv/env/prod_aether_sveltekit/npm_deploy/build/ --delete
If this includes package updates (not development) we need to copy the new package.json. Manually copy the new package.json file to ./npm_deploy/. This also needs to be copied to the server. Copy the package.json even though not really used.
Run the --omit dev to clear out the node_modules directory. Copy the root node_modules directory to ./npm_deploy/build/node_modules/ after running te omit dev command.
npm ci --omit dev
# copy/paste, rsync, or cp
rsync -vhrz ~/OSIT_dev/ae_app_svelte_tailwind_skeleton/node_modules ~/OSIT_dev/ae_env_node_app/npm_deploy/build/ --delete
# copy package.json as well
Everything should be ready to run on the development server and production server.
Rebuild the node_modules directory and manually install extra Svelte packages
Run the npm update to fix the node_modules directory and package.json
npm list
npm outdated
npm update
npm list
Other installs?: Are both still needed? I know at least one of these is. 2024-07-23
npm install --save-dev svelte-highlight
npm install --save-dev typescript-svelte-plugin
Set up and run
Packages and dependencies
npm install --save-dev svelte-highlight typescript-svelte-plugin
npm install flowbite flowbite-svelte tailwind-merge @popperjs/core
More packages related to the Tiptap editor
npm install @tiptap/extension-link @tiptap/extension-bullet-list @tiptap/extension-history @tiptap/extension-typography @tiptap/extension-underline
Build
Environment file
".env"
This is the default used if others are not found when when "npm run dev" or "npm run build" is run.
".env.local"
This is used when "npm run dev" is run. This is not used in the production build.
".env.production"
This is used when "npm run build" is run. This is not used in the development build.
".env:prod"
This is modified to allow for a staging environment and production environment built.
".env:staging"
This is modified to allow for a staging environment and production environment built.
Example Important Values when running in dev:
Note our home IP address that changes.
DOCKER_AE_API_SERVER_EXTRA_HOST=dev-api.oneskyit.com:108.28.68.107
PUBLIC_AE_API_SERVER=api.oneskyit.com
PUBLIC_AE_API_BAK_SERVER=bak-api.oneskyit.com
create-svelte
Everything you need to build a Svelte project, powered by create-svelte.
Creating a project
If you're seeing this, you've probably already done this step. Congrats!
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
Developing
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Building
To create a production version of your app:
npm run build
You can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.