Nuxt static site publishing - vue.js

$ npm run generate
I want to publish the generated nuxt / dist folder as a static site. Even if I place the contents of the folder directly under / var / www / html, I get a 404 error when I try to move from the index.html page to another page.
I checked the directory and found that the file exists correctly.
Is there a problem if I just place the contents of the generated dist folder directly under / var / www / html?
Server Ubuntu20.04 Nginx

Related

How do I add a folder to run PHP scripts in Nuxt Project folder?

I have a working Nuxt website configured using Nginx web server.
What I want to do is that I want to run some demo PHP script from a folder called demo which is placed inside root folder of the project.
Now if I access it like this: http://mywebsite.com/demo/test.php
It works fine but If I add a folder with more scripts and css files like this
http://mywebsite.com/demo/todo_list/index.php
Here the index.php is loaded with some images, css and js files. But the page on browser only executes the php code. It can't load any resources like js, css and image files.
Basically I want this folder to be independent so I can do my research work from this folder making it completely independent from Nuxt.
How can I do this?
Nevermind, I figured out.
Just had to add one more rule inside nginx config file as below
# Demo Folder
location /demo/ {
try_files $uri $uri/ /index.php$is_args$args;
}

Nuxt how can I browse static file

I have a php file under of static folder.
How can i browse the php file?
I tried to use a proxy on config, but its not working
/pages
/static
test.php
How could i browse it
localhost:port/[proxy]/test.php
Thanks
I guess you would need a webserver to handle your .php file.
/static folder is for static content.
This is what i found in the documentation:
If you don't want to use Webpack assets from the assets directory, you can create and use the static directory (in your project root folder).
All included files will be automatically served by Nuxt and are
accessible through your project root URL. (static/favicon.ico will be
available at localhost:3000/favicon.ico)
https://nuxtjs.org/guide/assets/#static

Page Isn't Working Error - Laravel cPanel

I am trying to upload my laravel project to cPanel.
I have uploaded the contents of the public folder in Laravel to the public_html directory
I have uploaded the rest of the laravel files to a folder called 'project'
I have changed the index.php file like this.
require __DIR__.'/../project/vendor/autoload.php';
$app = require_once __DIR__.'/../project/bootstrap/app.php';
I am getting an error "Page isn't working HTTP ERROR 500"
The Project folder directory is /project
and the public folder contents are in /public_html
Thanks in advance.
Turns out I had to change the php version which was defaulted to 5.4 to 7.2 and that did the trick and everything works perfectly now.

Vue.js what directory to build the production from on EC2 Ubuntu?

I am a little confused about where to build vue.js for production.
In my dev folder on ubuntu 16.04 -
I start the project
Update my files in the src directory
Then do npm build ( I have tried form both the project home page where index.html lives and the src directory)
In the dist directory I see that a new index.html and a static folder is created.
Deploy the contents of my dist directory to my public directory where normally index.html will live.
Result: I can see the page title but not the contents. My code works fine the dev environment. I am trying not to run it from S3

express js blank root page

I have simple vue js app with next express js config file
var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
app.use(express.static('.'));
server.listen(1111);
Result of build is located in /dist folder. However my express js file is located in /
After I run it I see blank page on localhost:1111 and actually it retrieves index.html from / but, I see my app on localhost:1111/dist and it retrieves index.html from /dist
My purpose is to receive index.html from /dist when I visit localhost:1111.
I've tried to change express config to app.use(express.static('./dist')) and similar to this. But it only breaks anything (i'm not able to reach my app on localhost:1111/dist and localhost:1111/)
In general I have next project structure
/ -> express js config is here and basic index.html is here
/dist -> build result is located here (index.html + static files)
/dist/static -> static files are here
/build -> webpack config is here
The problem why app.use(express.static('dist')); didn't work was that in index.html I had link to other files like /dist/static/.. what is not correct if my root folder is dist. So, despite moderator set that webpack doesn't related to this the solution was to change webpack config for production to make build script generate links to file in /dist/index.html like /static/.. instead of /dist/static/..
And obviously I had to change
app.use(express.static('.'));
to
app.use(express.static('dist'));
As a conclusion - it make sense to check generated index.html and analyze if the paths there are correct.
Sometimes this issue may come because of, the app doesn't server from the root folder.
For example, /home/user/path-to-the-project" The app need to serve like this.
So here you need to change like below,
app.use(express.static(__dirname + '/dist'));
For more information, you check express doc. See here