I am doing a group chat program using Python microframework flask, vanilla JavaScript and Flask-SocketIO. I already deployed it on heroku: https://chat-ya.herokuapp.com/.
However, the question is:
it works fine on local machine before I deployed it. But when I deployed it, open the website, the background image is
not showing, or
sometimes only part of it is showing, or
sometimes just flickers and becomes blank
I have tried to optimize the image's size, but still not working.
the data structure tree is:
static
│ ├── css
│ │ ├── index.css(main page css)
│ │ ├── channel.css(channel page css)
│ │ ├── bootstrap.min.cs
│ │ └── all.css
│ ├── images
│ │ ├── aircraft.jpeg
│ │ ├── ....
│ ├── js
│ │ ├── index.js(main page js)
│ │ ├── channel.js(channel page js)
│ │ ├── bootstrap.bundle.min.js
│ │ ├── jquery-3.3.1.slim.min.js
│ │ └── socket.io.js
│ ├── music
│ └── GrandmaSaid.mp3
└── templates
├── base.html
├── channel.html(channel page)
└── index.html(main page, extended from base.html)
Thanks in advance!!!
That's really an unfixable error - it has to do with the time between the browser loading the page and saying, Hey, can you get this image for me? and the server going I'll look for it - OK, found it, here you go! And of course, it'll be impacted if multiple people are on the page as well. So unless you find a faster web server, it's not really capable of loading faster. And you and Bootstrap may have some conflicting rules in CSS which mean that your image is partially cut off.
Ask me if you need any help with this!
Related
I develop my website using Nuxt3 and deploy it following the instructions here: https://v3.nuxtjs.org/getting-started/deployment#static-hosting
I successfully get dist and node server hosted web (running npx serve -o dist) also works well, But directly opening index.html in brower leads to a webpage rendered without any CSS and images.
I checked the generated html and found the assets path is like:
<link rel="modulepreload" href="/_nuxt/entry-1f8b74a8.mjs" as="script" crossorigin>
while my dist folder looks like:
dist
├── _nuxt
│ ├── entry-1f8b74a8.mjs
│ ├── entry.ff9830ad.css
│ ├── index-a3c0d3be.mjs
│ ├── index-e5b9c659.mjs
│ ├── index.072137e3.css
│ ├── lcdp-c28417d3.mjs
│ ├── manifest.json
│ ├── paper-b4b64fe8.mjs
│ └── paper.6897f003.css
├── imgs
│ ├── bg1.png
│ ├── bg2.png
│ └── other images...
└── index.html
I guess maybe the reason is that the assets path is wrong? What is the correct way to do the static website generation using nuxt3?
OP achieved to properly deploy the app on Vercel, it's better than Github Pages on every way anyway.
I am doing pretty much this tutorial. Basically you have a pom which controls two modules, the frontend module and the backend module.
Environment: IDE: Intellij, spring-boot, Vue.js
I initialized the frontent module using vue init webpack frontend. I added the pom to the backend module which copies the assets into the backend module asset/public folder. After mvn clean install all the content is in the ressources/public folder, but when I view the browsers sources it does not show any of them.
The resources folder looks like this:
└── resources
├── application.properties
└── public
├── index.html
└── static
├── css
│ ├── app.30790115300ab27614ce176899523b62.css
│ └── app.30790115300ab27614ce176899523b62.css.map
└── js
├── app.b22ce679862c47a75225.js
├── app.b22ce679862c47a75225.js.map
├── manifest.2ae2e69a05c33dfc65f8.js
├── manifest.2ae2e69a05c33dfc65f8.js.map
├── vendor.42fc6c515ccdfe89bd76.js
└── vendor.42fc6c515ccdfe89bd76.js.map
I just noticed that running java -jar backend/target/backend-0.0.1-SNAPSHOT.jar solves the problem. But when I start the application using intellij it does not work out.
Full tree (directories only):
├── fileconverter
│ ├── backend
│ │ ├── src
│ │ └── target
│ ├── frontend
│ │ ├── build
│ │ ├── config
│ │ ├── node
│ │ ├── node_modules
│ │ ├── src
│ │ ├── static
│ │ ├── target
│ │ └── test
│ └── target
│ ├── classes
│ └── test-classes
Okay, as I am having two modules IntelliJ used the classpath of the whole project instead of the backend module.
After changing the path in the configuration to: Use classpath of module: backend everything works fine.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
What is the best way to export a module that includes submodules using an index.js. For a long time now I follow a pattern on naming and saving my web components on my projects (Vue or React). But I want a more practical way to export a module using a single index to avoid cases like the following:
My Pattern
import PostDetail from 'src/views/posts/PostDetail'
We use react and redux for my applications. We mostly try to follow modular design in code folder structure.
Modules happen to be independent in itself and can be used standalone. If some parts of modules are required to be used outside the module itself, we only expose those files through it's index.js
Here's what we follow:
Project-name
├── assets
│ ├── images
│ └── stylesheets
│ ├── components
│ ├── misc
│ ├── objects
│ └── vendor
├── build
│ ├── javascripts
│ └── stylesheets
├── src
│ ├── modules
│ │ │
│ │ ├── common
│ │ │ ├── actions
│ │ │ ├── components
│ │ │ ├── helpers
│ │ │ └── reducers
│ │ ├── module_1
│ │ │ ├── sub_module_1
│ │ │ │ ├── actions
│ │ │ │ ├── components
│ │ │ │ │ └── body
│ │ │ │ ├── helpers
│ │ │ │ └── reducers
│ │ │ └── sub_module_2
│ │ │ ├── actions
│ │ │ ├── components
│ │ │ ├── helpers
│ │ │ └── reducers
│ │ ├── module_2
│ │ │ └── components
│ │ ├── module_3
│ │ │ ├── actions
│ │ │ ├── components
│ │ │ │ └── body
│ │ │ ├── helpers
│ │ │ └── reducers
│ │ └── module_4
│ │ ├── components
│ │ └── helpers
│ └── pages
├── stories
│ ├── common
│ ├── establishment
│ │ └── visiting_clinics
│ ├── providers
│ │ └── body
│ └── relations
└── tools
Each module has an index.js at it's root directory which exposes required files and functions which is to be used in other modules.
This structure makes local file interactions smooth as imports are short, clearly visible and name spaced(functionality based) where it's coming from.
This is an interesting question. I've had this same question in mind for a while and tried out a few different approaches and settled at one that seems to work pretty fine for me.
Put your reusable components in one place.
Put your layout wrappers that use the reusable components in one place.
1. Reusable Components
All your reusable components include custom buttons and standalone components like Posts as you've mentioned. If you're posts can have details and comments, keep two separate components PostDetails and PostComments and import and compose them in a separate Post component. Plug and play is the key.. You can opt for two structures here,
components/PostDetails
components/PostComments
components/Post
or
components/Post/PostDetails/...
components/Post/PostComments/...
and import them in components/Post/Post.js
But your default export will be in components/Post/index.js that will export Post.js. This way you're making sure, Post component is composed and reusable and can be imported as components/Post in any page/layout.
2. Layout Wrappers
All your pages/layouts go here. Typical example would be home page, about page that would import the components and put them in the right place.
This usually goes like with folder names like pages or containers depending on the project.
pages/home
pages/about
I have a few code repos that can help you better grasp this project structure.
Portfolio
React-Redux Boilerplate
Below is the project structure of a addon I'm trying to develop.
.
├── sc_back.js
├── sc_cont.js
├── icons
│ ├── addon
│ │ ├── icon-48.png
│ │ └── icon-96.png
│ └── context
│ ├── d-16.png
│ ├── d-32.png
│ ├── e-16.png
│ └── e-32.png
├── manifest.json
├── modules
│ └── sc_de.js
└── popup
├── action.css
├── action.html
└── action.js
There is some JS code that is redundant between content script sc_cont.js and popup action script in popup/action.js so I decided to move that redundant part into a separate folder at modules/sc_de.js.
I added below lines at my content_script and at module script:
//sc_cont.js
import { xyz } from './modules/sc_de.js'
//modules/sc_de.js
export const xyz = {...}
I tried adding the modules script in manifest.json in the content_script array but it's not working. Haven't tried in web_accessible_resources as this is not supposed to be accessible from the DOM.
Problem is when I launch the addon debugger, it shows the following error:
SyntaxError: import declarations may only appear at top level of a module
SyntaxError: export declarations may only appear at top level of a module
How do I resolve these errors to make the addon work? Also, do I need to do anything special in case of popup/action.js as well?
Im newbie to Angular and trying to setup angular phonecat application.
I have downloaded the code from here
https://docs.angularjs.org/tutorial/
and installed a nodejs.
Now, I'm not sure how to map the angular application to run with nodejs.
From other links, I see everyone run a webserver.js file but I don't see anything under the scripts directory.
scripts]$ tree .
.
├── private
│ ├── old
│ │ ├── format-json.sh
│ │ ├── goto_step.bat
│ │ ├── goto_step.sh
│ │ ├── README.md
│ │ ├── ScrapeData.js
│ │ └── snapshot.sh
│ ├── push-to-github.sh
│ ├── README.md
│ ├── retag.sh
│ ├── test-all.sh
│ └── update-gh-pages.sh
└── update-repo.sh
How can I run the application in nodejs.
If you look at the page you linked, you are supposed to run npm start in the main directory after installing NPM dependencies with npm install.
EDIT: After checking their package.json, you can actually just run npm start. It will also run dependency installation.