I'm trying to work my way through building a MEAN app using Angular 2 and building Angular with the Angular CLI.
My GitHub repo is here. It builds and serves and lints without issue but when you try to visit the page I get a handful of reference errors like the ones below
Like it can't find the references to the .js files that are built when I run ng build --prod --output-path my-app.
I'm not sure if it might have anything to do with my routes because in my routes/index.js I have
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index.html');
});
But this shouldn't prevent my scripts from being loaded, should it?
I wasn't correctly serving my static files.
My statics were still being loaded via
app.use(express.static(path.join(__dirname, './public/')));
When they should have been
app.use(express.static(path.join(__dirname, './public/my-app/')));
Simple solution...overlooked it.
Just in case there's anyone else out there having the same issue.
Related
I'm trying to serve a production build of a React app(Typescript), booted with create-react-app.
I'm following the official guide: https://create-react-app.dev/docs/deployment/
There's nothing unique about my setup. This is the server.js file, located in the root directory(above src):
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(8000);
The production files are created within a folder called build. An example of the paths generated:
<script src="./static/js/main.0ae46692.chunk.js"></script>
When i navigate to localhost:8000/, everything is served fine. The initial request serves the index.html, and the script requests serve the correct files.
But, when i try to navigate(from the browser) to something like localhost:8000/todos, all script requests return index.html.
I do not see anything "special" about my setup, and do not understand what's going on. Am i missing something in the guide? It clearly states that app.get('/*',...) fixes the issue.
Any help will be greatly appreciated.
Copying the comment into an answer here so it can be marked.
This sounds like the issue is the script tags are generated with relative paths, because it works when you make a request to the root /, but not anything else. Could you try setting the "homepage" to "localhost:8000"
I want to deploy an application that I perform with the MEAN stack on Heroku, but I encounter 1 problem.
I have this folder structure, my node server, with a public folder, where is the dist / fronted folder and all the files generated by Angular's ng build --prod, it works when I start the server and browse normally, but if I refresh the page or write a route myself, I get these errors:
Errores
Sorry for my English.
If your are building a MEAN stack, you probably have a server.js or index.js or app.js as an entry point to your application. An SPA by definition manages all the routes within the router configuration. But if you try to refresh or type a route yourself, it is like you were trying to access that folder on the server (ex: www.mywebsite.com/about, here the folder about might not exist on the server, it is just known by your Angular app)
My suggestion is that you try to add this fix to the app.js (or server.js or app.js) file, so all unexisting routes or refresh go back to your index.html:
// Check your port is correctly set:
const port = process.env.PORT || 8080;
// Is saying express to put everything on the dist folder under root directory
// Check the folder to fit your project architecture
app.use(express.static(__dirname + "/dist"));
// RegEx saying "capture all routes typen directly into the browser"
app.get(/.*/, function(req, res) {
// Because it is a SPA, all unknown routes will redirect to index.html
res.sendFile(__dirname + "/dist/index.html");
});
app.listen(port);
This guy shows full deploy on Heroku with Angular: https://www.youtube.com/watch?v=cBfcbb07Tqk
Hope it works for you!
I have upload my angular production build on live. And I'm missing some thing but I don't know what is that.
In build/index.html I have set this in base URL.
<base href="http://0.0.0.0:3000/admin/"> // Instead of 0.0.0.0 I have set my EC2 instance's elastic ip address
I have set /var/www/html/myapp/admin. Hear in admin folder angular build is that.
And my node server is at /var/www/html/app.js
app.js
To allow all admin panel pages I have add this code in my app.js file.
app.use('/', express.static('./admin'))
app.get('*', (req, res) => {
res.sendfile('./admin/index.html')
})
When you use app.use('/', express.static('./admin')), the static files will be served in the root directory, for example, http://0.0.0.0:3000/main.js, but because of the base tag, it will try to find the resource at http://0.0.0.0:3000/admin/main.js.
To fix it, change the path of the static files, like so:
app.use('/admin', express.static('./admin'));
Also, I don't recommend editing the base tag manually, you can set the base url in the build command, like so:
ng build --prod --base-href="http://0.0.0.0:3000/admin/"
I need an Openshift person to answer this. Local server working serving files from /static folder on root. Once ported up to Openshift, "404 not found". There is something in Openshift that is changing my routes. I'm using the lines:
const repoDir = env.OPENSHIFT_REPO_DIR || __dirname;
app.use(express.static(repoDir + '/static'));
What step am I missing?
I am user of OpenShift‎.
Recently I have came across the similar issue.
Please refer the below to check if it resolves the issue.
1. Check if you get the below error.
TypeError: Object #<ServerResponse> has no method 'sendFile'
- try Upgrading expressJS version
2. Use the below approach to serve the static files including js. Working sample
<code>
app.use(express.static(path.join(__dirname, '/public')));
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, '/views/index.html'));
});
</code>
express - version is 4.14.0
I am getting a super unhelpful message 'Cannot GET /' printed to my browser when I run my node dev server through webpack. I am building a Vuejs application with the following:
VueJs structured in a way that was dicated by this Vue Template with my node scripts being identical to the default commands
Webpack config based on Vue Loader
Routes handled through Vue Router
I know this is not a great deal to go off but an idea of what is firing this error (Node? Webpack? Vue Router?) it would point me in the right direction and be greatly appreciated.
If you're experiencing this with Vite, make sure you ran just vite in your package.json script, NOT vite preview
I found myself in the same problem. In my case it was related to the use of Express with Vue.js. So I am leaving my solution in case anyone finds it useful
I added this code for handling the calls to my index.html file
app.route('/*')
.get(function(req, res) {
res.sendFile(path.join(__dirname + '/dist/index.html'));
});
module.exports = app;
Node is throwing the error and make sure your vue router is configured properly,Cannot GET simply means you have not assigned a view to your url e.g on express we use
app.use('/', your route)
and on connect we use
app.get or app.post
All it's saying is there is no content/view assigned to that url.
It turns out it was an issue with the vuejs webpack template I was working from: https://github.com/vuejs-templates/webpack
The build path was being used in the dev server configuration.
Made this pull request to fix the issue: https://github.com/vuejs-templates/webpack/pull/188#issuecomment-230968416
I had this issue while running my app in dev. Adding this to the devServer of my webpack.dev.config file helped:
historyApiFallback: true
Answer by Jezperp here.
If you are using express check that you have this line:
app.use(express.static('static'));
And that "static" matches with the folder specified in your vue.config.js
outputDir: path.resolve("../Server/static")