I'm exploring JMVC for the first time. I have my cookbook app set up and it seems to be working if I go to http://localhost/jmvc/cookbook. (I renamed cookbook.html to index.html.) However, if I make a domain pointer so that I can just go to http://dev.cookbook/ I see the main page, but the steal scripts don't load. I guess that makes sense, since they're looking for '../steal/{stuff}', and that path is invalid with that set-up. So what's the workaround? Surely I don't have to have a container folder for all of my JMVC projects.
got an answer on the jmvc forums: http://forum.javascriptmvc.com/topic/root-level-url-problems#32525000000404011
basically, you build a structure like:
webroot (jmvc)/
index.html
myapp/
steal/
jquery/
{other parts of jmvc}
in index.html, you have a line like:
<script type='text/javascript' src='steal/steal.js?myapp,development'></script>
Related
I am building a React application which needs to display images dynamically which are stored, by the thousands, on a server-side file system. All of my attempts to successfully implement this have failed, including many which were taken from responses to similar questions.
Some details:
I used create-react-app to initialize my application. I am running in development mode (have not run npm-build). I'm using Express.js (Node.js) as a web-server, which I interact with through a proxy (only '/api' http requests use the proxy). My js code which attempts to 'require' the images is in the 'src' folder. The images are located in an 'images' folder in the default 'public' folder.
I thought I had found the solution when reading this page from create-react-app, as it states to use the public folder when 'You have thousands of images and need to dynamically reference their paths'. The page further instructs to use '%PUBLIC_URL%' or 'process.env.PUBLIC_URL' to access the 'public' folder. When using either of these I receive an 'Error: Cannot find module' message. Upon checking I notice that 'process.env.PUBLIC_URL' contains an empty string, and quickly notice that PUBLIC_URL is ignored in development mode.
I find this to be tremendously confusing, given that the 'Using the Public Folder' page is apparently describing the development phase of production, and yet it advises the use of something which is meaningless during development. Adding to my confusion, it appears as if the contents of that page resolved the issue for nearly all of those who have encountered a similar requirement in the past (example: 1, example: 2; both fail for me). Likewise, all attempts to to construct relative paths to the 'public' folder from the 'src' folder have yielded error messages. Failed code example:
let img = process.env.PUBLIC_URL + '/images/Team.jpg';
<img src={require(`${img}`)} alt="X" />
Error: Cannot find module '/images/Team.jpg'
I never imagined showing images in React would be so difficult. Any help is truly very much appreciated.
I think you are correct, you just don't need the require, return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; as you can see their docs
If you open in your browser http://localhost:PORT/images/Team.jpg that should open.
That's the reason process.env.PUBLIC_URL is empty in development, because they resolve everything inside this folder directly.
This is somewhat related to an issue I'm having with CF on IBM Cloud here. My question after playing around with the folder structures is how exactly is CF building the app when it comes to relative paths?
For example, if i have the following folder structure
when I add <script type = 'text/javascript' src = '../index.js'></script> to the index.html file, I get GET https://simple-toolchain-20190320022356947.mybluemix.net/index.js net::ERR_ABORTED 404. This error does not happen when I move index.js into the public folder and change <script type = 'text/javascript' src = 'index.js'></script>.
The problem I have then is that when I try to require() any modules when the index.js file is in a sub-directory, it returns a Require is not defined error indicating that it is not getting the module from the node_modules cache which CF is suppose to build. Requiring any files in the same sub-directory also throws the same error. This does not seem to be a problem when the require() is used in the default app.js as the application loads without any errors.
I'm relatively new to the IBM Cloud Foundry tool but I'm following the same structure as when I pushed apps via Cloud9 IDE and didn't have any such issues there. I feel I might be missing something ridiculously simple like configuration of endpoint or package.json. However, I've been searching around for days and can't seem to find a solution.
Appreciate if you have any pointers. Thanks!
Due to my lack of understanding, I was trying to use require() on the client side hence the errors. Going to figure out how to use Browserify now. ;)
I just built my app with quasar CLI.
This is my quasar info:
I made a regular spa build knowing that it’s not be sitting directly in root folder on the server, so I changed publicPath:
Server-side static frontpage files are served OK for the main page and the main page has a link pointing to http://localhost:3000/application which produces blank page with this error:
Elements tab looks skim, #q-app does not have any content:
Network connections with 30x status:
What am I missing? Could it be related to build itself or is it something in my node-server?
Github said something about lazy-loaded components and dynamic-import-node plugin, so I added it before build:
I've gone through script tags in the DOM just to see that their source attributes where all absolute, so I changed them to relative paths by modifying quasar.conf like this:
publicPath: '/application'
That's all it took to make it work :)
If a directory has been made available to a node application in the server.js file which sits in the main directory using:
app.use("/scripts",express.static(__dirname + "/scripts"));
and I attempt to use require from a file inside of that directory (/scripts/custom.js) using:
var Testing123 = require('../app/models/article');
Is there a reason this is not possible? and is there a solution to that problem?
Edit: In one of my views (views/tree.ejs) I use:
<script type="text/javascript" src="../scripts/custom.js"></script>
to access my Custom script which sits inside my scripts folder which is made available using express.static, Custom uses a web scraper to scrape articles and present them in circles (in the form of an image, title and link) on views/tree.ejs, I now want custom.js to save each article it creates to a mongodb database but to do so, it needs access to things like my Article Schema hence the problem above.
You cannot because Node.js scripts and browser scripts do not run in the same context. Your app.use call just exposes a /scripts route that serves assets statically on your HTTP Server.
Your scripts/custom.js script seems to be a browser-side script (Because you load it with a script tag inside an ejs view) but you want to use require inside it and this will not work as this is a Node.js function.
Have a look at LearnYouNode which is an excellent Node beginner tutorial so that you will understand how modules work in Node and know a bit more about the separation between server-side and client-side JS.
I push my application with Git bash in Openshift nodejs.
My sass1.js file is in the js folder.
In my index.html file I refer to it as
<script src="./js/sass1.js"></script>
But I get this error in when I look in Firefox
"NetworkError: 404 Not Found - ...js/sass1.js"
You'll want to reference your code locations with the appropriate environment variable. You can also check out https://www.openshift.com/videos/getting-started-with-nodejs-on-openshift for more information on nodejs with openshift.
EDIT
On second thought I think this thread will point you in the right direction https://www.openshift.com/forums/openshift/pictures-css-where-can-i-store-resources.
You need to provide static directory to nodejs express app.
app.use(express.static(__dirname+"/yourfolderwherecssisresiding")