i'm getting a 404 error when trying to activate my shell. it seems to find shell.js but then indicates that it can't find shell.html because it's looking in the wrong place!
i tried forcing the convention to expressly tell it where to look, but it's still not working. like so: viewLocator.useConvention('viewmodels', 'views', '');
but i still get:
App/viewmodels/shell.html 404 (Not Found)
Obviously it shouldn't be looking in app/viewmodels/, it should look in app/views/
the difference in my project is that i'm not using the '/scripts/' folder for 3rd party stuff, i am using my own folder called '/content/'. i'm also putting almost everything that has to do with durandal in the '/app/' folder.
here's the structure of some key files in my project:
+app (folder)
main.js
> durandal (folder)
app.js
r.js
require.js
text.js
viewEngine.js
viewLocator.js
> plugins (folder)
router.js
> viewmodels (folder)
shell.js
> views (folder)
shell.html
in main.js >
here's where i set the shell to be called:
app.setRoot('viewmodels/shell');
and here's the paths also in main.js:
paths: {
'text': 'durandal/text',
'durandal': 'durandal',
'plugins': 'durandal/plugins',
'transitions': 'durandal/transitions'
}
in shell.js >
well, it doesn't really matter because it's already thrown the 404 by this point.
any ideas?
i see now. i had the wrong path to the defined modules in main.js. not sure why they weren't throwing an error, but anyhow, here's what i changed:
from:
define(['../app/durandal/system', '../app/durandal/app', '../app/durandal/viewLocator'], function (system, app, viewLocator) {
to:
define(['durandal/system', 'durandal/app', 'durandal/viewLocator'], function (system, app, viewLocator) {
seems to work now.
Related
I am having a hard time getting my app to come up on Heroku after deploying a VUE JS application. It keeps giving me a Not Found page (even when everything builds)
After looking over a lot of suggestions on Stack Overflow and videos, I finally figured it out. The first think you want to do is go to the command line and type: Heroku Logs, when I did this, I saw this:
Error: ENOENT: no such file or directory, stat '/app/client/build/index.html'
After some research, I found out that when the vue cli builds, it places it assets in a folder called 'dist" and not build. In my server.js file, I just changed my entry to
if(process.env.NODE_ENV === 'production')
{
//Set static folder (our public folder)
app.use(express.static('client/dist'));
app.get('*',(req,res) => {
res.sendFile(path.resolve(__dirname,'client','dist','index.html'));
})
}
It "used to have" 'build' in it, 'build' is actually used if you are deploying a "React" application (which have done on a previous build). After I changed this to 'dis', MY APP CAME UP .. !!! YAHHHHH!!!
I am a beginner of Vue and I am trying to build a multi-page web application with Vue for practice. But I am having this problem below:
Failed to compile.
./src/index/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/index/views/Home.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '#/components/HelloWorld.vue' in '/home/Username/Web/wk_front_end/src/index/views'
Here is the file tree of my project, every file is generated by Vue because I only want to test the multi-page, so I think it wouldn't be a coding problem.
Here is what I did:
I created a folder called the index under the src folder, I then move all the files and folders that originally under src to index because I wish the components and assets are only used in the corresponding page.
My vue.config.js is:
module.exports = {
pages: {
index: {
entry: "src/index/main.js",
template: "src/index/index.html",
filename: "index.html",
title: "Index Page"
},
}
}
When I try to run it, I got the error above on the chrome window. And actually, the error is:
I think it might be caused by missing of configurations, but I really cannot figure out what those other configurations I need.
Does anyone have similar problem before? Does anyone know how to solve it? Or, does anyone have some successful multi-page example that I could take a look?
Really thanks for the help.
I believe # is a shortcut for the src folder. Which would mean your current path resolves to src/components/HelloWorld.vue.
You could try doing #/index/components/HelloWorld.vue, which should be the correct path.
From my sight you may be importing your Vue components incorrectly. If you want to make multi-page-app why don't you try vue-router ? Maybe it's not the direct solution for your problem but it will help you to better manage your pages (routes) in the future.
I'm trying to implement a service worker for my website. I used SWPrecacheWebpackPlugin with vue and registering and so on works well. Somehow it doesn't cache all files, in this case I guess the most important app.js file.
When I'm online the file structure built by vue looks like the following:
But when I check the cache the app.js file is missing and in offline mode i just get a white page.
So obivously the service-worker is up and running and is even caching some stuff, but not the relevant app.js file.
My webpack config looks like the following:
new SWPrecacheWebpackPlugin({
cacheId: 'xxx',
filename: 'service-worker.js',
staticFileGlobs: ['dist/**/*.{js,html,css}'],
minify: true,
stripPrefix: 'dist/'
})
I have actually no idea what I am missing.
Update:
The app.js file was too big and wasn't cached by the PlugIn. No warning, no error, nothing...
tldr;
My project is an NPM module that is used by an ExpressJS server. The server needs to specify an endpoint and my module will do the rest. How do I get my module to load the correct html page and grab the correct js/css files from the correct path?
The Problem
I'm running into a problem where I can see the directory structure of the site, using the serveIndex library, and all the files are in their correct directories but for some reason when I try to load any of the files, whether from the serveIndex view or from the actual endpoint where it should load, I get nothing but 404 errors.
Here's an example if someone wanted to use this NPM module from their project.
app.js (their server)
const express = require('express')
const { adminAreaConfig } = require('express-admin-area')
const app = express()
const adminArea = adminAreaConfig(express) // my module being passed the "express" library
app.use('/admin', adminArea) // specify a URL to use my module
app.listen(3000, () => console.log('\n\nServer Online\n\n'))
Here's an image of my projects dir structure after it's been built.
Going off of a console.log(__dirname), which returns <long path string>/express-admin-area/build/src, I then tell my module, using the express reference passed by the actual server in the code above, to look in the views directory with
... import libraries etc ...
const adminAreaConfig = express => {
const adminArea = express.Router()
adminArea.use('/', express.static(__dirname + '/views') // sets my modules views to the "http://localhost:3000/admin" path
adminArea.use('/dirs', serveIndex(__dirname)) // will get into this later
... some other stuff like exports etc ...
This then attempts to load the index.html file in the express-admin-area/build/src/views directory but fails because it can't locate the CSS and JS files inside express-admin-area/build/src/views/static/css or .../js.
First, I know it fails because instead of looking for http://localhost:3000/admin/static/css/styles.css it looks for http://localhost:3000/static/css/styles.css, so that's another problem I need to solve entirely.
Second, looking back at the small code sample above, adminArea.use('/dirs', serveIndex(__dirname)), I'm using the serveIndex library in an attempt to view the directory structure. If I go to http://localhost:3000/admin/dirs I get the correct directories and files in the browser
But now, if I try to view an actual file I'm met with the error Cannot GET /admin/dir/main.js for example if I were to go to http://localhost:3000/admin/dir/main.js, but I can continue going deeper in the directories if I wanted such as the controllers or routes directories from the image.
What I want
I need a way to get these static assets to load. If I point my module to a basic html page with a simple <h1>Hello, World!</h1> then that's what Ill get but trying to load any outside scripts/stylesheets is when I get the 404 errors and nothing loads.
I'll be answering my own question.
The solution is actually pretty simple. The view layer of this module is handled by React, CRA to be specific. CRA will look for some specific environment variables, one of them being PUBLIC_URL. All I had to do was
Create a .env file in the root directory of my CRA
add PUBLIC_URL="/admin"
Afterward, it's just rebuilding the project, yarn build, and reset the server. CRA will then look at http://localhost:3000/admin/static/... instead of http://localhost:3000/static/... for static assets.
I’m trying to run skeleton-navigation-typescript-vs on my windows machine but it fails – I see only welcome screen and in developer tools there is a message:
http://localhost:9000/dist/main.js Failed to load resource: the server responded with a status of 404
I do everything from the docs – step by step. http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.8/doc/article/a-production-setup.
When I check in chrome developer tools in Sources tab there are only css, jspm_packages, lib and index.html – there is no dist dir.
Is this working sample? What I’m doing wrong?
You are not using the index.html provided by the tutorial. Go to your index.html and replace this:
<body aurelia-app="main">
with this:
<body aurelia-app>
When you specify a value to the aurelia-app attribute, the framework will look for a js file to start the application. More information at http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.0.8/doc/article/app-configuration-and-startup
EDIT
Create a main.js file inside src folder, like this:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(() => aurelia.setRoot());
}
Re-run gulp-watch and see what happens now.