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 :)
Related
I created a sample app using SvelteKit to perform SSR. I noticed the svelte assets are always downloaded following this path _app/immutable/.. (examples):
http://localhost:3000/_app/immutable/start-9080d3a7.js
http://localhost:3000/_app/immutable/chunks/index-cad423a5.js
http://localhost:3000/_app/immutable/layout.svelte-eb403b25.js
http://localhost:3000/_app/immutable/pages/up-homeui/index.svelte-d6a3b39b.js
http://localhost:3000/_app/immutable/error.svelte-3f23e1a2.js
How can I serve the assets at the root level, like:
http://localhost:3000/start-9080d3a7.js
http://localhost:3000/index-cad423a5.js
http://localhost:3000/layout.svelte-eb403b25.js
http://localhost:3000/index.svelte-d6a3b39b.js
http://localhost:3000/error.svelte-3f23e1a2.js
At the end, I would like to serve all the files at the same level.
I already played with the svelte.config and the vite.config but I couldn't find a way to change this default behavior.
I am building a chrome extension with create-react-app.
This gives me a folder structure as follows:
my_app/
public/
options.html
popup.html
manifest.json
src/
background.js
index.js
options.js
I want to add a new html page to the extension which can then be called via chrome-extension://[runtime_id]/my_new_page.html
To do so, I placed my_new_page.html in the /public folder and added it to manifest.json under web_accessible_resources.
However when I load chrome-extension://[runtime_id]/my_new_page.html I get only the boilerplate of my_new_page.html and the js which is supposed to render the app content, is not run.
Turns out the problem was with the way my webpack.config handled my bundles. Whatever goes into the build folder is handled by webpack and thus configurations might be required - and can vary depending on what boilerplate/template you are using.
[I am receiving the all files in console but showing in the frontend and automatically refresh showing the whitescreen][1]
Package.json fileQ5XvT.png
To resolve white/blank screen deployment of react app in Azure, try either of the following ways:
In package.json add "homepage": "."
Make sure to publish from build folder instead of public folder
In your index.html, make sure to check to specify correct JavaScript bundle.
References: How to fix the Blank screen After a Static Deployment with create-react-app and I have deployed a azure-webapp and the page displays blank
You can see this other post: Blank page after running build on create-react-app
If you're using react-router and trying to open index.html directly in the browser (or using electron, which essentially does that), in addition to setting homepage as others have suggested, replace your BrowserRouter with a HashRouter.
I have gone through the tutorial for the Rust Game of Life and have a working game in a web browser, but it only works from the demo web server that comes bundled with it. I can start the server with npm start and it runs the webpack-dev-server on port 8080. When I access the site through that port, it works fine. However, if I try to copy the site to a web server like Apache, it does not load correctly. The error I am currently getting from it is:
Error importing `index.js`: TypeError: Error resolving module specifier “wasm-game-of-life”. Relative module specifiers must start with “./”, “../” or “/”. bootstrap.js:5:23
<anonymous> http://www.north-winds.org/gol/bootstrap.js:5
From the tutorial, the root of the website is a folder called www/ in the repository and the generated wasm module from the Rust program is placed under pkg/. There is a symbolic link from www/node_modules/wasm-game-of-life that points up to ../../pkg/ and I've replaced that symlink with an actual copy of the top-level pkg/ folder so that the website is entirely contained inside the www/ folder and then placed that folder on my website at http://www.north-winds.org/gol/, however, accessing it returns the error above. What do I need to modify to make it work stand-alone?
As I understand it, this WebAssembly Game-of-Life is basically a stand-alone client-side app and should not require anything beyond a web server that can provide static files with the appropriate mime-types attached. I don't see anything special that should be required. I did see mention of WebSockets somewhere, but I don't know why that is required for this app. I compared this to the "Hello, World" WebAssembly example for C from https://webassembly.org/ and it ended up with a .wasm file generated from the C source code, and a single JavaScript and HTML supporting file to execute it. The files worked correctly when simply copied to static web server location. This is what I'd like for the Rust example.
Some relevant code from the Rust Game-of-Life is as follows. The top-level HTML file includes this among other lines:
<script src="./bootstrap.js"></script>
The bootstrap JavaScript file contains only this:
import("./index.js")
.catch(e => console.error("Error importing `index.js`:", e));
And the index.js file that it references has this among other glue logic for the Wasm:
import { Universe, Cell } from "wasm-game-of-life";
// Import the WebAssembly memory at the top of the file.
import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";
What's missing to make this work standalone?
The www and pkg folders contain the source files you need, but you do not have a static site yet. The create-wasm-app template uses Webpack, so you need to build the final output by running npm run build in the www folder. This will create a subfolder named dist which contains the actual static files that can be placed on your web server.
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.