I have created an angular2 app with typescript. I am using Angular2 Routes for routing.
Using lite-server to start my angular2 app, it is working fine and routing properly if page is refreshed.
ISSUE::
But once i deployed the ts-compiled code to my domain which uses http-server to serve the files, it stop routing properly.
Whenever I refresh my page on my domain(blog.jyotirmaysenapati.com), it shows below thing::
Not Found
The requested URL /blog/new was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to
use an ErrorDocument to handle the request.
Please help on this as i do not want to have node support in my domain. So how can i run it properly without the help of node and browser-sync??
Is it possible in first case??
I am using latest version of angular2 framework.
Anyone can see my code here.
You can use gulp-connect which provide fallback option :-
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('connect',function() {
connect.server({
root: '',
port: 8080,
fallback: 'index.html',
middleware: function(connect) {
return [connect()
.use('/node_modules', connect.static('./node_modules')), connect()
.use('/app', connect.static('./dist'))
];
}
});
})
Related
I have deployed a NextJs app on digitalocean droplet with Ubuntu 22.04.
"next": "12.2.3",
"react": "18.2.0",
I am getting this 404 error for _ssgManifest.js, _buildManifest.js and _next/static/chunks/pages/_app-83b8d0a73a58c453.js files.
enter image description here
I checked the build on server, files are present there, but in broweser they are showing 404. Another thing I noticed that the file _app-83b8d0a73a58c453.js getting fetched on browser but on server build it is with different name i.e. _app-8ba37a8edc5ef34c.js
What I Tried
I checked with and without custom dir for build, but it didn't worked
I checked with custom buildID too
const execSync = require("child_process").execSync;
const lastCommitCommand = "git rev-parse HEAD";
module.exports = {
async generateBuildId() {
return execSync(lastCommitCommand).toString().trim();
},
};
any help would be greatly appreciated
Solution:
These files were not matching to what is asked in browser request to what is available at build on server. In my case the reason was that, after build i was not restarting the application.
if you are using pm2 to serve your application named fe, please run:
pm2 restart fe
Then Hard refresh your website in browser, it will work.
If you are using other tool, then please follow docs for the same to restart the application. And if the issue is diffrent than this in your case, please share your solution here.
Thank you.
sometimes the console shows these errors on opening the website
GET https://example.com/subpath/_next/static/9ufj5kFJf/_buildManifest.js
[HTTP/3 404 Not Found 311ms]
GET https://example.com/subpath/_next/static/9ufj5kFJf/_ssgManifest.js
[HTTP/3 404 Not Found 334ms]
Loading failed for the <script> with source “https://example.com/subpath/_next/static/9ufj5kFJf/_buildManifest.js”. 1434-247:1:1
Loading failed for the <script> with source “https://example.com/subpath/_next/static/9ufj5kFJf/_ssgManifest.js”.
the app does use ISR and that seems to be working, it does get updated, what do these files do? what could happen if they are missing?
"react": "17.0.2"
"next": "10.1.3",
"node" "15.1.2"
I had the same problem with GCP (Kubernetes engine) with pods count > 1. I resolved the issue by restarting the deployment (all pods).
On that Github issue #Prabir linked to in a comment, someone posted a way to use the generateBuildId function within the Next.js config file:
const execSync = require("child_process").execSync;
const lastCommitCommand = "git rev-parse HEAD";
module.exports = {
async generateBuildId() {
return execSync(lastCommitCommand).toString().trim();
},
};
I work with an app that uses some combination of AWS CodeBuild and Docker images, which prevents direct access to all the git commands so that snippet above didn't work. But using CODEBUILD_BUILD_ID or really any environment variable (unique to either that commit or the build itself) did. I'm not as familiar with the GCP-equivalents but this Cloud Build Docs page makes it seem like $COMMIT_SHA would be a good option to try.
I'm trying to set up a reverse proxy on the development server for my VUE js webapp to get around the CORS issue that I was getting when I was trying to use my flask HTTP APIs with the vue js webapp.
I did this by creating a vue.config.js file in the root of the project directory:
module.exports = {
devServer: {
proxy: 'http://localhost:5001/'
}
}
when I run npm run serve, and try to use a REST API defined on port 5001 - I don't see the request going to port 5001, it uses the same port as the web app.
And there are no useful logs being written to stdout either to help me debug this.
Has anyone come across this issue before ?
I had a similar issue and found that the port was already in use by another application and hence it was not going to the correct port. Once i shutdown the other app, it started working as expected.
I was developping a app with React app. In developing env i was using proxy but I'm deploying the app and I saw that proxy didn't work in.
I read about http-proxy-middleware. It can be a solution or it don't works too?
Any way to do this without config the server with redirects to other port?
I need to continue fetching to my API server.
The best way what I found without configure server and NGINX is follow this steps:
Build front
Move folder into a backend server.
Put that code after routes:
if (process.env.NODE_ENV === 'production') {
app.use(express.static(`${__dirname}/yourFrontFolder/build`));
app.get('*', (req, res) => {
res.sendFile(`${__dirname}/yourFrontFolder/build/index.html`);
})
...
And build your backend code and access to your backend port like frontend.
You don't usually need a proxy in your React app when it is deployed. To deploy, you usually run npm run build, which creates a build directory containing all the compiled JavaScript and HTML files you need for the deployment. These are then served by a web server, such as NGINX or by your backend application.
I am working with an Aurelia app that should start at a different page than index.html, but I cannot find where to change that.
Where in an Aurelia app can you set which landing page to use?
This is misunderstanding. index.html page is the default landing page set by web server, not Aurelia. E.g. if you try to get the url e.g.https://stackoverflow.com the web server will give index.html by default. You need to change it in web server.
e.g. using Apache web server directive DirectoryIndex myindex.html
From https://httpd.apache.org/docs/2.4/mod/mod_dir.html:
The DirectoryIndex directive sets the list of resources to look for, when the client requests an index of the directory by specifying a / at the end of the directory name.
When using development server of Aurelia (default webpack-dev-server configured by aurelia-cli), the index.ejs compiles to index.html. You may need to change configuration of HtmlWebpackPlugin in webpack.config.js in order to change generated file from index.html to some other name:
new HtmlWebpackPlugin({
template: 'index.ejs',
filename: 'myindex.html',
...
If you're using the CLI, there is not an easy way to do this. The CLI is mostly for basic use cases, and if you're trying to do something fancy, you're going to have to learn a bit more about JavaScript tooling.
You can still do it and here's how:
Open aurelia_project/tasks/run.js and make sure the server property of the argument to the browserSync function has the index property pointing at the index file you want to use, like this:
let serve = gulp.series(
build,
done => {
browserSync({
online: false,
open: false,
port: 9000,
logLevel: 'silent',
server: {
index: 'my-special-index.html', // Make sure you have this line in there.
baseDir: [project.platform.baseDir],
middleware: [historyApiFallback(), function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}]
}
}
);