we have a multipage application with below structure:
ApplicationModule is the root folder that contains all application logical modules,like Usermanagement and others like below:
/ApplicaationModules/UserManagement
//inside userManagement folder we have html pages and their corresponding .js(main)files
//so we have like
login.html and login.js
Login.js in turn requires/loads all script files that are required to execute the logic for the page, so it's configuration is like below:
require.config({
paths: {
'jquery': '../../Scripts/jquery',
'appSessionManager': '../../Scripts/ApplicationSessionManager',
'appBasePage': '../../Scripts/ApplicationBasePage',
'initServices': '../../IntegrationServices/Eservices/EservicesUserManagementService/Authenticate',
'smUtility': '../../Scripts/SmartServicesUtility',
}});
require(['appSessionManager', 'appBasePage', 'initServices', 'smUtility', 'jquery'],
function (sessionManagerRef, basePageRef, eservicesRef, utilityRef)
{
$(document).ready(function () {
//Here is the page code that uses other libraries like appSessionManager, appBasePage and others.
});
});
NOW, before moving to production, we want to use Optimizer so that all required files should be concatenated and minified as a single file.
Standing inside UserManagement folder, we run following command for the optimizer:
node ../../r.js -o name=Login out=optimize.js
BUT it is giving us the below error:
Tracing dependencies for: Login
Error: ENOENT, no such file or directory 'D:[some application path]\ApplicationModules\UserManagement\appSession
Manager.js'
In module tree:
Login
Error: Error: ENOENT, no such file or directory 'D:[some application path]\ApplicationModules\UserManagement\app
SessionManager.js'
In module tree:
Login
at Object.fs.openSync (fs.js:427:18)
Error is clear as for SessionManager.js file, it is trying to find it inside usermangement folder but I want it to look for this file inside Scripts folder as mentioned in config Paths of login.js file.
I will highly appreciate if someone can help us out on this.
Related
I configured require.js very well and it is working fine but when I added Identity Pages in ASP.NET Core 3.1 require js started to giving 404 error when loading script files, jquery, jquery-validation and jquery.validate.unobtrusive. When I check the console the path is wrong, and it is trying to find these files near require.js file directory (as you know it is default directory) but in my config file I configured path as very well and working in my other pages but not in identity pages.
Here my require.js config file
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: '../',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
jquery: 'lib/jquery/dist/jquery.min',
main: 'js/bundle/main.min',
'jquery.validate': 'lib/jquery-validation/dist/jquery.validate.min',
'jquery.validate.unobtrusive': 'lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min'
},
shim: {
'jquery.validate': ['jquery'],
'jquery.validate.unobtrusive': ['jquery', 'jquery.validate']
},
waitSeconds:0
});
It is working my other pages but not in identity when I check the 404 error the console error is;
RequireJs.js:5 GET https://localhost:44340/lib/RequireJs/jquery.js net::ERR_ABORTED 404
Shouldn't it use the requirejs config and shouldn't be the path is
RequireJs.js:5 GET https://localhost:44340/lib/jquery/dist/jquery.min.js like other pages ?
Thanks for any comment,
Stay health folk :)
Eventually I found the answer. The problem is about the MVC default scripts which are in use by MVC framework spesifically in scaffolded items like identitity pages. Identity pages uses jquery.unobtrussive as default for showing warning and errors to UI side. But this js library do not use require js "define" statement. If you re-engine this library you can see that the problem disappears.
The issue is Heroku can not find the files of my node project. This prompts the 404 Not found error. The question is how does the generic node Heroku file structure look like? If so, where do the files of my project actually reside in the heroku?
The scenario:
With the express library, I put all files needed to serve a frontend template, in a folder called 'public'. The absolute path leading to 'public' is needed and'_dirname' is the variable that contains that.
app.use(express.static(_dirname+'/public');
Now, Heroku always makes a GET request to the root of the application. As a response I send the
index.html file as the starting template. I also provide its absolute path as '{root:_dirname}'.
app.get('/', function(req, res) {
res.sendFile('public/index.html'{root:_dirname});
});
When the server is run, I get a 404 Not found error. Which means Heroku cannot find the files.
Heroku root folder is named app/. So as expected, providing the local '_dirname' is wrong since the application is now running on Heroku server not locally.
2020-09-10T15:28:12.127567+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/app/C:/Users/...
But, pointing at the public folder alone(only /public), assuming app/ is root, still prompts the 404 error not found.
2020-09-10T15:31:23.630358+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/index.html'
The Question
Which leads to the question, what does heroku file structure look like? where do project files reside in the heroku file structure, so i can provide the correct path on the GET request?
My file structure
After Bergur suggestion:
It prompts a 404 Not found. However, the path is now theoretically correct.
This is what I changed:
app.use(express.static(path.join(__dirname+'/public')));
app.get('/', function(req, res) {
res.sendFile('index.html',{root:__dirname+'/public'});
});
The 404 error comes from the 'app.get('/,function(req,res){});'. Without this handler, my heroku application shows a 'cannot GET' message on the template.
Have you tried to log out the full path just to see if there's something off?
I have several heroku projects with nodejs and react/vue/angular dist folder without problems.
I would change your code a little bit to:
use nodes __dirname
Use path.join instead of inserting the '/' yourself. It might cause some problems.
So final version might look like:
app.use(express.static(path.join(__dirname, 'public')));
This assumes the project structure is
-index.js
-public/index.html
There should be no need to use sendFile, serving the public folder is enough. Just make sure that the public folder is being deployed/pushed to heroku.
If you share with us your folder/project structure we might help you you better.
I have a project which consists of a file upload form, which uses an express router and jade/pug template rendering for 2 different views.
I'm attempting to use webpack to compile all my javascript files into one (backend.js), and gulp to compile that backend.js file, along with 3 .pug files, into another directory.
After webpack compiles the js files contained in the project, it places them in build/backend.js:
project-after-webpack
And finally, gulp takes the backend.js file, along with the pug templates located in another folder in the project, and places them in this structure, compiling backend.js to main.js, and turning all my pug files into HTML files:
project-after-gulp
The rest of the project is in the root directory.
One of the javascript files is responsible for rendering views upon certain http requests. This is where I'm having trouble. Without gulp and webpack, i'm able to render .pug views with no problem using res.render(). However, I'm getting a "no such file or directory" error when I use gulp and webpack. This is how I'm attempting to render the form.pug file, which gulp turned into form.html.
router.get('/', function list (req, res, next) {
//res.render('submissions/form.pug'
res.sendFile(path.join(__dirname+'build/submissions/form.html'), {
submission: {},
action: 'Add'
});
});
And the console is telling me ENOENT: no such file or directory, stat '/form.html', even though you can see that there is in fact a file there.
I'm not sure if my path is incorrect, if using the .sendFile function requires anything i'm missing, or if this is just plain impossible. Any help wuold be appreciated.
I think the point of using path.join() (see the docs here) is to build a path string compatible with all operating systems.
It takes all path fragments as arguments like so:
router.get('/', function list (req, res, next) {
//res.render('submissions/form.pug'
res.sendFile(path.join(__dirname, 'build', 'submissions', 'form.html'), {
submission: {},
action: 'Add'
});
});
Maybe a / was missing between __dirname and build otherwise?
I'm trying to load a sample Angular 2 app into a Sharepoint web page. Looking at Angular's Getting Started live Plunker example,
There are only 3 files needed: (Ignore the styles.css file.)
index.html
app\maint.ts
app\app.components.ts
I added an app folder and these same files onto my webpart but the app doesn't seem to load. It is not finding the .ts (typescript) file.
If I view the index.html page, there is an error that is being thrown in the JS:
Error: XHR error (404 NOT FOUND) loading https://domain.com/Webparts/app/app.component.ts
Error loading https://domain.com/Webparts/app/app.component.ts as "./app.component" from https://domain.com/Webparts/app/main.ts
Stack trace:
I have the app folder created and the app.component.ts file underneath that. But for some reason, the page can't find that file.
Any ideas? I have tried uploading the *.js.map and the *.js files that Typescript generates. But no luck.
Looks like I had a path that was wrong. You just need the .JS files for the application to run if you specify it in the system.config like this. (Don't need the TypeScript files on the server.)
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
I have just started a new brunch.io project using the brunch-with-brunch skeleton (I just want a local server able to display native HTML/CSS/JS).
I have created two files on my own : index.html located in public/ containing the standard doctype, head and body tags plus a script tag referencing the app.js generated by brunch located at public/javascripts/app.js as below :
<script type="text/javascript" src="javascripts/app.js"></script>
As specified by the README.md file located in the app/ directory, I write my applications-specific files in the app/ directory. So I have on file named app.js located in app/ and containing :
console.log("OK");
I start the server with the command :
brunch watch --server
The problem is that I don't see anything in the js console (the server is running at localhost:3333), despite the facts that the html is rendered and the public/javascripts/app.js (generated by brunch) contains these lines (among others) :
require.register("app", function(exports, require, module) {
console.log("ok");
});
What's going on ?
EDIT : The javascript directly written in the html script tag works fine.
Brunch wraps all files by default in module definitions (require.register). So, the console.log is not executed ASAP.
So, you will need to load the entry point in your index.html: <script>require('app')</script>
Module definitions can be disabled.