I am trying to port one of my sapper app over and run into a bit of a problem with external sass file

In my sapper project, I add

  :global {
    @import '../style/global.scss';
  }

to the layout component. I tried to do the same thing in this template and it works. However, the style is inline inside the html instead of extracted to a separate file like sapper.

Is there a way to achieve the same behavior with this template.

Thank you

I am trying out elder js and see mentions of typescript in the doc. Is there a version of the template that supports Typescript out of the box?

Thank you for an awesome project

From a fresh degit and npm install:

$ npm start

> [email protected] start
> npm run build:rollup && npm run dev:server


> [email protected] build:rollup
> rollup -c

WARN: Remember to put a valid "origin" in your elder.config.js. This should be a fully qualified domain. This is frequently used plugins and leaving it blank can cause SEO headaches.
Elder.js using rollup in production mode.

./node_modules/intersection-observer/intersection-observer.js → public/static/intersection-observer.js...
created public/static/intersection-observer.js in 428ms

src/components/**/*.svelte → public/svelte...
[!] (plugin svelte) TypeError: Cannot read property 'length' of undefined
src/components/HookDetail.svelte
TypeError: Cannot read property 'length' of undefined
    at sourcemap_add_offset (/Users/parkerrueve/code/elderjs-app/node_modules/svelte/src/compiler/utils/string_with_sourcemap.ts:18:19)
    at get_replacement (/Users/parkerrueve/code/elderjs-app/node_modules/svelte/src/compiler/preprocess/index.ts:112:3)
    at /Users/parkerrueve/code/elderjs-app/node_modules/svelte/src/compiler/preprocess/index.ts:194:12
    at async Promise.all (index 0)
    at replace_async (/Users/parkerrueve/code/elderjs-app/node_modules/svelte/src/compiler/preprocess/index.ts:71:48)
    at preprocess_tag_content (/Users/parkerrueve/code/elderjs-app/node_modules/svelte/src/compiler/preprocess/index.ts:171:15)
    at preprocess (/Users/parkerrueve/code/elderjs-app/node_modules/svelte/src/compiler/preprocess/index.ts:206:3)
    at ModuleLoader.addModuleSource (/Users/parkerrueve/code/elderjs-app/node_modules/rollup/dist/shared/rollup.js:18289:30)
    at ModuleLoader.fetchModule (/Users/parkerrueve/code/elderjs-app/node_modules/rollup/dist/shared/rollup.js:18345:9)
    at async Promise.all (index 2)

npm ERR! code 1
npm ERR! path /Users/parkerrueve/code/elderjs-app
npm ERR! command failed
npm ERR! command sh -c rollup -c

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/parkerrueve/.npm/_logs/2020-11-25T20_46_48_359Z-debug.log
npm ERR! code 1
npm ERR! path /Users/parkerrueve/code/elderjs-app
npm ERR! command failed
npm ERR! command sh -c npm run build:rollup && npm run dev:server

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/parkerrueve/.npm/_logs/2020-11-25T20_46_48_406Z-debug.log

Just to point out that reference to '@elderjs/browser-reload' should probably be '@elderjs/plugin-browser-reload' now.

Hello! I assume it's a newbie mistake on my part but I can't seem to find an answer to this.

I am trying to use the await blocks functionality found here: https://svelte.dev/tutorial/await-blocks

I start with a new project: npx degit Elderjs/template elderjs-app

I then go into the <script> section of src/routes/home/Home.svelte and add the following:

<script>
  ...  // Excluding the imports and the hooks setup

  let i = 0;
  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }
  async function getRandomNumber() {
    await sleep(1000);
    return await i++;
  }

  let promise = getRandomNumber();

  function handleClick() {
    promise = getRandomNumber();
  }
</script>

I then add the following between the two divs for blog and about:

<div class="banner"> ... </div>

<button on:click={handleClick}> generate random number </button>

{#await promise}
  <p>...waiting</p>
{:then number}
  <p>The number is {number}</p>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

<div class="blog"> ... </div>

When I run this locally or deploy it as a static site through cloudfront, neither work. The button exists, the <p>...waiting</p> is presented but it never updates to a number.

Am I doing something silly? If needed, I can create a public repo and static site to represent the issue I am referring to.

With latest template using elderjs v1 loading of hydrated component fails

s.min.js:1 Uncaught (in promise) Error: svelte/entryClock-2e8914b9.js, http://localhost:5000/ (SystemJS https://git.io/JvFET#8) at s.min.js:1

Reason is backslash in beginning of import path in index.html

...
System.import('\svelte/entryClock-2e8914b9.js').then(({ default: App }) => {
...

Probably a Windows specific quirck.

Hi and thanx for your great work 👍

I'm attempt using your template with windows platform.
All is right except when I'm doing "NPM START".
Having this error :

[email protected] start E:\elderjs-app
npm run build:rollup && npm run dev:server

[email protected] build:rollup E:\elderjs-app
rollup -c

rollup production === true. Because watch is undefined.

./node_modules/intersection-observer/intersection-observer.js → public\dist\static\intersection-observer.js...
created public\dist\static\intersection-observer.js in 1.4s

./node_modules/systemjs/dist/s.min.js → public\dist\static\s.min.js...
created public\dist\static\s.min.js in 1.3s

./src/routes/blog/Blog.svelte → ./ELDER/compiled/...
[!] (plugin svelte) TypeError: content.matchAll(...) is not a function or its return value is not iterable
src\routes\blog\Blog.svelte
TypeError: content.matchAll(...) is not a function or its return value is not iterable
at markup (E:\elderjs-app\node_modules@elderjs\elderjs\build\partialHydration\partialHydration.js:21:37)
at preprocess (E:\elderjs-app\node_modules\svelte\src\compiler\preprocess\index.ts:86:27)

Hi all,

I'm really happy with the documentation of this project, I spent the morning reading up and plan to use Elder.js for my personal developer site instead of Sapper.

I got the template up and running but at first I was very confused by the /hooks directory and its associated files.

E.g. https://github.com/Elderjs/template/blob/master/src/routes/hooks/route.js

I saw an import from @elderjs/elderjs and immediately assumed it was some automagical generation step, but I had noooo idea what this nested hooks directory was for.

https://elderjs.netlify.app/hooks 404s...

I figured it out and laughed after I did, but it took a little longer than I'd like to admit...

P.S. thanks for the awesome framework & this very functional template.

I noticed that when I run npm run dev:rollup I can pull in items from my .env file just fine to connect to my backend API, but when I run npm run build that's not the case. I was able to fix this by adding require('dotenv').config(); to the top of my elder.config.js file. Happy to PR this change to the template, but wanted to check first and see if there's a better way to do this or another reason I'm missing that it's set up the way that it is.

I like how there's a demonstration of hooks, and some documentation. It'd be cool if that was the "advanced" section/post about hooks. It'd be great if there was a very simple hooks example -- some async data fetches. The docs (or the post, don't remember which off-top) -- show an example of an async data fetch, in a code-block. So we could put that, or a dummy of that, in the template.

I'd just do a PR, but I'm actually suggesting this because I'm blocked. I think I'm missing something[s] obvious, as I'm rusty on full-stack JS, and bundlers.

Thoughts? Suggestions?

I can't find ./src/routes/index.js, but this file is mentioned as important here:

https://github.com/Elderjs/template/blame/master/src/routes/blog/getting-started.md#L15

I got GitLab to build the project using this config. .gitlab-ci.yml

image: node:latest

pages:
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
    - public
  cache:
    paths:
      - node_modules  
  only:
  - master

Gitlab Pages deploys projects as http://username.gitlab.io/project-name/. When visiting https://cyprias.gitlab.io/elderjs-app/, the project's index.html shows up without any of the css and links point to http://cyprias.gitlab.io/xyz instead of http://cyprias.gitlab.io/elderjs-app/xyz.

When setting settings.prefix to elderjs-app, the http://cyprias.gitlab.io/elderjs-app/ link becomes a 404 error. Instead the webpage is accessible at https://cyprias.gitlab.io/elderjs-app/elderjs-app/. The index.html is shown but without the css again as the css points to https://cyprias.gitlab.io/elderjs-app/_elderjs/assets/svelte-9e1a324b.css when it's now at https://cyprias.gitlab.io/elderjs-app/elderjs-app/_elderjs/assets/svelte-9e1a324b.css.

Setting settings.origin to https://cyprias.gitlab.io or https://cyprias.gitlab.io/elderjs-app doesn't seem to have any effect, with or without prefix having the project's name in it or not.

Any assistance would be greatly appreciated.

Hello, have not tried using uWebSockets.js instead of express.js (polka.js)
https://github.com/uNetworking/uWebSockets.js

i was porting over old stuff and ran afoul of this line:

i have an assets folder from my old site with some links, so i have to port it over as /assets/assets/filename.jpg however this runs afoul of that and it creates this weird "," folder

i am still investigating a fix but suspect the template needs to be changed.

On npm start I am getting the following error:

edit: updating node to 15.x works fine...

I am trying to add a simple button using svelte as shown below. The button appears but is not clickable and appears to have no event listeners attached to it. I am having this problem with any event listener in the whole template project except the links since we explicitly specify the href link. Is there a step I am missing to get it to work?

example code in the "Home.svelte" file

<script>
	function handleClick() {
		alert('clicked')
	}
</script>

<button on:click={handleClick}>Click me </button>

I am a newbie so your help would be so much appreciated, thank you :)

First time user, encountered these instructions:

But I think the correct way to start the server in two tabs changed recently.

I'm evaluating different zero-js blog solutions and Elderjs came with some high regards. After experimenting with it I noticed that whenever I'd change my origin line in the config file Elderjs would start to act funny:

• Websocket connections would try connecting a different hostname/port
• File changes wouldn't propagate (likely due to above)

I looked through the code and it seems like this http://example.com is hardcoded, but I couldn't pinpoint where the issue was.

I'm creating this issue to understand what the setting should be? Should there be better documentation around this?

Hi, nice project you have here. I am trying to follow the quickstart and have degit the template then ran npm run dev locally on my machine. I am accessing the site via IP vs localhost.

For some reason, I am not able to see the blog section that is suppose to show on Home.

<div class="blog">
  <div class="grid grid-cols-1 gap-4 bg-red-400 sm:grid-cols-3">
    {#each data.markdown as blog}
      <BlogTeaser {blog} {link} />
    {/each}
  </div>
</div>

This part does not render for me and I can't figure if it's a config, server, or I'm missing something.

Hi!

Due to

1. the glob.sync() not having { dot: true } as the options parameter and
2. the extenstion condition

dotfiles are not copied.

I have 2 questions:

1. Is this intended behaviour?
2. What is the condition for? What use-case does it solve?

Hello,

First of all, thanks for this awesome solution, I am giving it a try and it is exactly what I need for my blog.

I found an issue that enforces me to re-run npm run dev:rollup when I introduce a new css change.

Steps to reproduce:

1. Clone the template
2. Open two terminals for development purpose (npm run dev:server and npm run dev:rollup)
3. Go to Home.svelte and add/modify any css definition, for example: modify background for .banner from #eee to blue.

CSS change is not reflected in localhost, need to restart the npm run dev:rollup process to see it.
Found that __ELDER__ assets and public assets do not match.

Tested in both Windows and WSL: Ubuntu 20.04. Node 12 and 14. Npm 6.x