I have a test node.js/angular app that uses the yeoman angular-generator. However, I am having problems serving back the rendered .js files from the original .coffee files.
The js files are being rendered and saved to APP_ROOT/.tmp, but any requests for the js files results in a 404.
What is needed (within the Gruntfile?) to allow for the js files to be returned?
Thanks for the help.
Things are working now. The end fix was something was to add an additional static middleware to the app.js file, which was something I had already tried, but it is possible that the path was off causing the fix not to work.
app.js
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, '.tmp')));
When I first added ~line 2 the app.js folder was moved into the app_root/server folder with the following
app.use(express.static(path.join(__dirname, '..', '.tmp')));
which for some reason wasn't working. That teaches me for moving files around
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"
Edit
To anyone coming here in the future, I solved this problem by indicating a value for PUBLIC_URL in my .env file.
In my case, I set PUBLIC_URL=/ui and now the static assets are being served from .../ui/static/...
Whenever I build my app and launch it, the browser requests content from the static directory, such as this:
Is it possible to somehow change this? I took a look here, but I didn't have any luck. I tried different combinations of express.static(. . .) to no avail.
Instead of http:///static/bundle123, I want it to request http:///custom/static/bundle123.
I've tried moving my build/static directory into build/custom/static and doing something like this, but it didn't work:
app.use('/static', express.static(path.join(__dirname, './custom')))
What am I doing wrong?
The first argument determines the URL path and the second part determines where the files are located on the file system.
So if your static files are located in the public directory (or in sub directories) and you want to access then on the https://.../static URL, you can use:
app.use('/static', express.static(path.join(__dirname, 'public')));
In your case, assuming you run the server from the build directory, using the following should work:
app.use('/custom/static', express.static(path.join(__dirname, 'static')));
Now if you request an URL https:///custom/static/foo Express will look for a file named foo in the static folder.
I add static CSS,
and this file exists in source code of the page,
but CSS not applied...
In console wrote "blocking CSS because MIMO type does not define correctly"
In link tag type='text/css' exist.
Ask is how I can define 'Content-type' in express automatically?
You can create public folder and add all the client side files.
In your server side you must use it :
app.use(express.static(path.join(__dirname, 'public')));
with path module :
npm install path
I had the same issue yesterday and solved it.
So first node uses folder path to get files.
That means that if you're at http://localhost:3000/ you are at the root of your directory. also you can access your stylesheet via http://localhost:3000/public/css/style.css.
But, you can modify the path using routes and express.static().
You may have an url which is http://localhost:3000/user/index. So he is seeking for the css file such as http://localhost:3000/user/public/css/style.css which does not exist.
the solution might be to use different route files like this :
app.use('/', indexRouter);
app.use('/users', usersRouter);
I'm trying to serve a vue.js single page app with a node.js server but I'm having an issue with some express middleware.
Basically I'm trying to serve two things right now. My index.html and a dist folder that holds all of my static files. On localhost my index.html is served correctly but I'm getting a GET error for my dist folder and can not find it in the sources tab.
I've used more or less this same line of code for many single page apps before to serve my static assets but for some reason with this set up it's not serving the dist folder.
app.use(express.static(path.join(__dirname, '/dist')));
Anyone with express experience know why this line isn't working?
You are using express.static incorrectly. By default, express.static will serve the content you have INSIDE of that dist folder.
What you want to do is this:
app.use('/dist', express.static(path.join(__dirname, '/dist')));
This will force express to serve those static assets under the '/dist' route.
I'm trying to use glyphicons (via bootstrap) in my Express app. The problem is when I'm serving my static files, the glyphicons aren't included.
This is my directory (created by grunt):
Build
fonts
glyphicons-halflings.eot
...
js
scripts.js
stylesheets
styles.css
Here is my app.js code:
app.use('/build/', express.static(path.join(__dirname, 'build/js')));
app.use('/build/', express.static(path.join(__dirname, 'build/stylesheets')));
app.use(express.static(path.join(__dirname, 'build/fonts')));
Here is the error from chrome:
users:1 GET
http://localhost:3000/fonts/glyphicons-halflings-regular.woff 404 (Not
Found) users:1 GET
http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not
Found)
I've tried switching to
app.use('/build/', express.static(path.join(__dirname, 'build/fonts')));
but I'm pretty sure bootstrap is looking for ../fonts, so the dir can't be quite the same. In other words, bootstrap is expecting a structure like so:
js/bootstrap.js
fonts/glyphs
Where am I off?
Thanks everyone!
Just use the following then:
app.use('/fonts/', express.static(path.join(__dirname, 'build/fonts')));