chalkygames123/front-end-template

Changing paths throwing `cannot get /` error

Closed this issue · 20 comments

Hello,

for my project, i want the folder path to be bit different,

i have made it as per my wish at https://github.com/lorvent/front-end-template

and i have modified config-schema.js accordingly, however when i run yarn dev it throws below error
image

can you please help me fixing it?

You are failing to grab the source files.

When you want to change the source directory, set the srcDir option to 'src' at config.js and then move assets, includes, layouts, pages, static directories into src.

Also, to omit the assets directory set the dir.assets option to an empty string and then move the directories the same as above. Of course, you should also update the paths in the HTML.

config-schema.js exists for the purpose of validating the config, so basically, do not change it.

but config.js has no parameters, it simply loading data from config-schema.js

and i tried changing config.load({}) to config.load({ srcDir: 'src' }) still no luck.

Revert all your changes, then carefully check below:

  • config.js has:
config.load({
  srcDir: 'src',
  dir: {
    assets: '',
    pages: ''
  }
})
  • gulpfile.js/common.js has:
    pages: [
      path.posix.join(
        config.get('srcDir'),
        config.get('dir.pages'),
        '**',
        `*${config.get('ext.templates')}`
      ),
      `!${path.posix.join(
        config.get('srcDir'),
        config.get('dir.includes'),
        '**',
        `*${config.get('ext.templates')}`
      )}`,
      `!${path.posix.join(
        config.get('srcDir'),
        config.get('dir.layouts'),
        '**',
        `*${config.get('ext.templates')}`
      )}`
    ],

NOTE: This change is required to distinguish between .njk files for pages and others without the pages directory.

  • src directory has:
$ tree -aF src -L 1
src
├── images/
├── includes/
├── index.njk
├── layouts/
├── scripts/
├── static/
└── styles/
  • /assets is removed from all paths in the HTML.

Hello,
Thanks for guiding me in proper way,

adding all paths to dir of config.js fixed it for me.

but i have some more questions for you

  1. i see that you are adding runtime.js which i think are coming directly from node_modules so how you are getting that?

  2. vendors.js seems to be coming by importing packages needed in all pages in src/scripts/pages/common.js correct?

  3. i really don't want to include all packages into vendors.js and to copy them manually you suggested me using another package in another issue, i can still use that method right?

  4. does importing into common/js transpiles js code into es5 or maintains es6 code only?

I know i am asking noob questions but this helps me using a modern starter kit for my projects.

Your help is appreciated.
thanks.

1: It's not coming from node_modules but the webpack feature. It's just a small script to kick start our scripts. For details:

2: I'm not sure that I understand your question, but vendor.js contains all vendor scripts which imported from all the source JS files, not only src/scripts/pages/common.js.

3: Sure.

4: It depends on the Babel config. By default, it is transpiled to ES5 by @babel/preset-env. Target browsers can configure by browserslist key in package.json file.

is it possible to avoid 1 and 2 steps?

i want to use more gulp and less(avoid) webpack as i want it to be beginner friendly, is that possible?

  1. glad to know.

thanks

is it possible to avoid 1 and 2 steps?

Just remove webpack.config.js#optimization field.

Thanks, i will try that.

Hello,
Today i have tried with latest version ( a lot have been chagned i guess)

https://github.com/lorvent/front-end-template and modified it as i want.

i am getting same error as earlier now....can you look into it? (if you have some spare time)

thanks.

Check out Eleventy configuration. You may need to update dir.input, dir.data and dir.includes options accordingly.

ok thanks, i guess i got it to work after many trial and errors and in the process, i get some idea of how it is resolving paths too.

I have a curious question: why did you opt for eleventy when you already implemented everything on your own?

Q2: how to quit npm run dev because every time i quit with ctrl+c and run it again, post number is incrementing.

thanks.

Q1: The biggest reason is its Data feature. Previously, we have needed to install another library (e.g., gulp-data) and more complex implementation to achieve similar functionality. Also, as a bonus, it's easy to switch or mix template languages.

Q2: Please provide more context. What do you mean by "post number"? What is your environment?

Q1. Ok :)
Q2.
sorry...its a typo...port number.

i am using windows 10 and to quit, i am using ctrl+c to quit and when i run npm run dev port number is increasing
i.e. from 3000 to 3001 and so on.

Hmm, It's weird. I should investigate it. Please give me some time.

I couldn't reproduce the issue. Can you tell me more details about your environment and the exact steps to reproduce?

Hello,

i am using windows 10

so i just installed then run

npm install
npm run dev

and it started at port 3000
then i used ctrl+c to quit browsersync

now if i run npm run dev again....this time it starts on port 3001

and if i check in task manager, i can see multiple node processes running.

hope i explained it clear :)

Which terminal are you using?

I use babun

If i use something like Cmder it usually prompts like Terminate job (Y/N) but babun doesn't ask and just cancel the current process when i hit ctrl+c may be that is the reason.

and that is not something super important too...i just wanted to inform you and if it takes much of your time then just ignore it.

I got it. Thanks for the details. I'll dig into it further.

Hi @lorvent, thank you for your patience. I've been busy lately.

As you know (babun/babun#868 (comment)), Babun has been discontinued, so I'd like to ignore this issue as you said.