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
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
-
i see that you are adding
runtime.js
which i think are coming directly fromnode_modules
so how you are getting that? -
vendors.js
seems to be coming by importing packages needed in all pages insrc/scripts/pages/common.js
correct? -
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? -
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:
- https://webpack.js.org/guides/caching/#extracting-boilerplate
- https://webpack.js.org/configuration/optimization/#optimizationruntimechunk
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?
- 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.