I use canvas with express.js and firebase hosting , it's working fine in localhost when run firebase serve but when I deployed the canvas Couldn't load image
I have tried put the public in functions folder and outside but it didn't work
no my project structure is
--project(root)
----functions(sub folder)
------routes(sub folder)
------public(sub folder)
--------images(sub sub folder)
------app.js(app server)
I have print the __direname in routes folder to show where I'm
__dirname = /srv/routes
and the image path to load and it's wrong is
"src":"../public/images/default/B-9.png"
I have tried ../../public and /images also both not working
firebase.json is
{
"functions": {
"predeploy": [
"npm --prefix ./functions/ run lint"
]
},
"hosting": {
"public": "./functions/public",
"rewrites":[
{
"source":"**",
"function":"app"
}
]
}
}
and I defined public folder in express.js like that
app.use(express.static(path.join(__dirname,'public')));
I try access image by URL from browser it's working like
https://angular6test.firebaseapp.com/images/AV.png
but when I try to load this url from my canvas code also it's couldn't access on image
Related
I am trying to move my application's API to Vercel. It is written in Typescript and uses Express.
The index.ts is located in <root>/src. The npm run build compiles it into <root>/dist directory. The file contains the following:
const app = express();
app.use((req: Request, res: Response, next: NextFunction) => {
//blah, blah, there is a lot going on here
})
app.use('/', common);
//... other app.use(s)
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on ${port}, http://localhost:${port}`));
module.exports = app;
I've got the following in the vercel.json file which is located in the root directory where the package.json also is:
{
"version": 2,
"installCommand": "npm install",
"buildCommand": "npm run build",
"outputDirectory": "dist",
"builds": [
{
"src": "dist/index.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "dist/index.js"
}
]
}
When locally I run npm run build, then vercel dev --listen 5000 I get Ready! Available at http://localhost:5000 and can go to http://localhost:5000/ping and get a response.
Now I commit the files to git, the deployment runs, but judging by the logs the npm install and npm run build commands are not running. No functions are created my /ping endpoint returns "Page not found".
Here is the deployment log:
This is what Build & Development Settings look like (the Root Directory is left blank):
I followed several recommendations I found online and according to them everything should work. I probably miss some setting somewhere. What is it?
If more information is needed, please let me know, I'll update my question.
Thank you.
--- UPDATE ---
I have set the Root Directory to src and checked the "Include source files outside of the Root Directory in the Build Step" checkbox. Now the npm install and npm run build are executing. As you can see some static files are deployed, but there are still no serverless functions and my /ping route returns 404 and "home" page, i.e. / route returns the content of the index.js file. In addition the local is not working either anymore, also returning 404 now.
Without that checkbox I was getting
Warning: The vercel.json file should exist inside the provided root directory
and still no install or build running.
Also worth noting that I had to change my tsconfig.json to have "outDir": "src/dist" instead of "outDir": "dist", otherwise I was getting
Error: No Output Directory named "dist" found after the Build completed. You can configure the Output Directory in your Project Settings.
Removed the Root directory and back to square one, no npm commands running but local is working with / route returning Cannot GET / and /ping returning correct response.
For everyone out there who's looking for an answer, maybe this will help you.
In my case, what I needed is to create a folder, called api in my src folder, i.e. the folder that is specified as Root Directory in Build & Development Settings in Vercel. Within this directory, each serverless function needs a file named the same as the path of the route. For example, the file named "my-route.js" will be accessible via https://my-app-name.vercel.com/api/my-route.
All this file needs is an import of index.js file and module.exports. For example:
import app from '../index';
module.exports = app;
The index.js should also live the Root and contain your express setup.
If you want to have dynamic path parameters, the files' names in the api directory should be wrapped in square brakets, like [my-param.js]. You can also have sub-directories in the api foler.
Here are a few links that helped me figure this out:
https://dev.to/andrewbaisden/how-to-deploy-a-node-express-app-to-vercel-2aa
https://medium.com/geekculture/deploy-express-project-with-multiple-routes-to-vercel-as-multiple-serverless-functions-567c6ea9eb36
https://ryanccn.dev/posts/vercel-framework/#path-segments
No changes were needed in my existing Express setup and routes files.
Hope this will help someone. Took me quite a while to figure it all out :)
I have created a THREE.js app using vite and node. When I am in my dev environment everything works perfectly, however, when I deployed this to Cloudflare pages using:
vite build
as my build command. The textures (images) are not showing but the shaders are. I am deploying it to cloudflare from github.
I am getting no errors in the browser console and no errors in the build log. Here is my folder structure
-images
-shaders
main.js
package-lock.json
package.json
style.css
vite.config.css
My Vite config file looks like this:
import vitePluginString from 'vite-plugin-string'
export default {
plugins: [
vitePluginString()
],
build: {
chunkSizeWarningLimit: 2048 // 2kb
}
}
The build option is to prevent a warning I was getting about chunk size but it makes no difference if I take it out, I thought that could have been the problem. Any help is much appreciated thanks!
This is the code I am using to import the assets.
function createMoon(radius, orbit, speed){
const moon = new THREE.Mesh(new THREE.SphereGeometry(radius, 10, 16), new THREE.ShaderMaterial({
vertexShader: moonVertexShader,
fragmentShader: moonFragmentShader,
uniforms: {
moonTexture: {
value: new THREE.TextureLoader().load('./images/moon.jpg')
}
},
}));
This code works fine on local dev server.
I put the images folder in another folder named public and removed the ./ where the images were being loaded in the code.
I have a question which sounds maybe trivial, but I feel like I life behind the moon.
In those default React Apps, which are initialised by
npm install -g create-react-app
create-react-app my app
I build whatever with this app and in the end of the day, I put in
npm run build
and it builds static files that I can upload via ftp to my existing Webspace with my domain live in the internet. No Haruko, no AWS, no installing node anywhere.
Now my question, how can I do the same with a random node.js ?
I find a gazillion tutorials how to build apps on an server on localhost and even many on how to install node in some webspace.
But how do I generate those 'static files' that I just upload via FTP and dones? Am I the only one who wants to do it that way?
If so, what is wrong with that thinking?
I'm using web-boost static site generator with page-speed optimizations.
You have to explicitly show all the routes you are going to convert from dynamic application into static ones like this:
{
"routes": {
"/": {
"view": "index.twig",
"vars": {
"title": "Home page",
"greeting": "Hello world!"
},
"assets": {
"js/index.min.js": [
"js/index.js"
]
}
},
"/user": {
"view": "user.twig",
"vars": {
"title": "User's page",
"greeting": "Hi John Doe!"
},
"assets": {
"css/user.min.css": [
"styles/bootstrap.min.css",
"styles/user.scss"
]
}
}
}
}
and then run compile command and deploy your static pages into AWS.S3 bucket for example.
I have an API project with Sailsjs, this was created with option --no-frontend.
So, i have an action that make an image upload to a folder named "uploads" in root directory, images are uploaded with success and i can see them in this folder, everything's ok till now.
When i try to access this image from another application via URL like:
http://localhost:1337/uploads/image_name.jpg
I got 404. My question is: How can i access my uploaded images via URL in my custom folder uploads?
I have one technique that I prefer and it's pretty simple.
Inside .sailsrc add paths config like this:
{
"generators": {
"modules": {}
},
"paths": {
"public": "public"
}
}
Add folder to root of your app called public and inside add uploads folder like this:
After this, just lift your app and test.jpg will be available on localhost:1337/uploads/test.jpg
I end up serving images with Nginx block, like this:
server {
server_name myapi.dev;
location ~* ^.+\.(jpg|jpeg|gif|png)$ {
root /var/www/myapi/uploads/;
}
}
So, i can access images via URL:
http://myapi.dev/279b68b9-ae43-4674-a85d-94d5bad3365a.png
I recently finished creating a Vue app that I wish to deploy on the internet. However, I can only open the project using node and running npm run dev. If I double click on the index.html file, I just see a blank page. How may I deploy my website so that the browser can render my Vue app?
If you used the vue-cli to generate the project, you should be able to run npm run build and get a minified, single .js file.
See here: http://vuejs-templates.github.io/webpack/commands.html
This will give you a dist folder with index.html and build.js. You should be able to open the html file and see your app.
Hoping it's usefull for someone, still:
Using #vue/cli 3, I had a simular result when copiing the dist to my localhost/test.
The build assumed all js and css file relative to the root while I was putting them relative to a subfolder 'test'.
adding the publicPath : "" did the trick to get rid of the preceeding '/'
in vue.config.js I added : ( using proxy for dev with apache/php )
module.exports = {
devServer: {
proxy: 'http://localhost:80/proxy'
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
output: {
publicPath : "" // only for prod
}
} else { // dev
// org, no changes
}
}
}
See also
https://alligator.io/vuejs/using-new-vue-cli-3/
https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#inspecting-the-projects-webpack-config