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.
Related
I am using a structured API that has a service layer, and a data layer. when I deployed my function on netlify I am getting an invocation failure.
but when I removed the folders and added a simple js file, routes are working fine.
I am using the express app with serverless-http.
I am building an express folder, In this folder, I am having a function file.
as we can see after commenting on the nested folder call it is working fine. But if I uncomment the lines of the controller and try to use it, I am getting invocation failed.
When I try to import anything in the API function like this...
const customerController = require('./service/customer.controller')
I am getting the below error after invocation.
I'm using amazon s3 as CDN, everything is working fine when I run the application using 'yarn dev'(domain added to next config). If I check inspect I can see the following value in the src attribute of the img element:
src="/_next/image?url=https%3A%2F%2Fcf-simple-s3-origin-gallery-hior-021672050205.s3.us-east-2.amazonaws.com%2FslidesImages%2Flogo.png&w=640&q=75"
When I'm running 'yarn build & yarn start' the src attribute set as the following:
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
which causing the issue loading the images, what am I missing here?
I was able to find the root cause for that issue(also reproduced with static images).
I added an unnecessary config variable inside the component which disabled the React client-side and causing the loading issue.
export const config = {
unstable_runtimeJS: false,
};
though this is probably not the issue, I had a similar problem, just make sure that if you are using ReactJS to have className instead of class
I'm trying to create a file like the appsettings in a web.config in my vue app, that my vue app can use to load config info at runtime that changes form one deployment level to another (dev/qa/prod)
I'm loading it thusly
Vue.prototype.$config = require('/public/config.json')
but when I look at the transpiled output, it has the values of the file loaded in and hardcoded, not code to load from the file
in app90117256.js: (and js.map)
t.exports = JSON.parse('{""name":"value" etc.....
How do I get it to load the file at runtime instead.
If you want to load the config at runtime, do not use build time constructs, which require or import (or Vue CLI ENV variables) are...
Options:
use either XHR or fetch browser API to request the json file from the server during (or before) your app starts
transform the json into JS file which assigns some global variable (window.appConfig for example), load it using <script> placed in index.html (before your app bundle) and then access it using window.appConfig from the app
I need a solution to load/unload styles in my Aurelia app. This is because I have a special main.css for my 'public' root app and another admin.css for my 'private' (admin) root app. (Yes, 2 roots in my app). These css are not compatible one with each other.
I found a plugin named aurelia-useable-style-loader. I try to integrate it in my Aurelia application as explained in the readme. At runtime, I can see [aurelia-useable-style-loader] begin configure and
[aurelia-useable-style-loader] end configure in my console but css files are not loaded/unloaded. So something go wrong and I don't know what.
One thing I pointed is that my Aurelia app is based on the Aurelia CLI / Typescript / SystemJS as bundler. While the plugin is based on Webpack. Maybe the 2 are not compatible ?
Steps I did:
npm install aurelia-useable-style-loader
then use the plugin in main.ts:
aurelia.use.plugin('aurelia-useable-style-loader');
then added one reference in my aurelia.json:
"aurelia-useable-style-loader",
Tha's all. At runtime, no particular errors, but css are not loaded/unloaded.
Any help is greatly appreciated.
PS: as a workaround, I proceed differently (see below) but I'm curious to do it with the plugin aurelia-useable-style-loader
this.masterStyleSheetLoaded = true;
this.httpClient.fetch('./src/css/main.css')
.then((data) => data.text())
.then((styles) => {
DOM.injectStyles(styles, null, null, 'masterStylesheet');
this.masterStyleSheetLoaded = true;
});
I'm working on my first Vue app, which uses the Moment library and Firebase (if that matters). I use default Webpack simple. To deploy the app I did npm run build.
But when opening directly index.html (the app is deployed here) I get "Failed to load resource: the server responded with a status of 404 (Not Found)" error message and the app doesn't work at all as a result.
I have no idea how to troubleshoot this issue since there's no more information that this in DevTools...
Any idea about what I can do next?
App source code
Remove the first forward slashes of all your assets path.
It should fix your problem.
<script src="/dist/build.js"></script> // No!
<script src="dist/build.js"></script> // Yes!
Vue adds it by default during the build process, in order to make your assets relative to the root folder.