I'm beginner stage in Gatsby. As per Gatsby tuts, I did the develop and build the my first app in Gatsby. Also successfully generated public folder. All the preview render well in "http://localhost:8000/" as expected. But, when I directly run the index.html file from public folder, in the browser(using with/without localhost) it's not preview the images. Could anyone tell me why? Any help would be much appreciated.
In "localhost:8000" preview render well with images. But Just I tried
to run directly index.html file from the public folder. But, It's
appear layout without images, Only HTML/CSS renders.
When you access localhost:8000 you are accessing the index.html of your compiled project, but you can't take that file isolated because you have a bunch of bundled assets (JavaScript, images, CSS, etc).
When you run gatsby build you are compiling and bundling all your assets (React components, third-party dependencies, Gatsby's core dependencies, images, and their processing, etc) via webpack. All this bundle, surrounded by React's code, is outputted in the /public folder.
From the documentation:
gatsby build creates a version of your site with production-ready
optimizations like packaging up your site’s config, data, and code,
and creating all the static HTML pages that eventually get rehydrated
into a React application.
What do you get from a successful build?
When a Gatsby build is successfully completed, everything you need to
deploy your site ends up in the public folder at the root of the site.
The build includes minified files, transformed images, JSON files with
information and data for each page, static HTML for each page, and
more.
The final build is just static files so it can now be deployed.
You can run gatsby serve to test the output from compilation. If you
make any new changes to the source code that you want to preview, you
will have to rebuild the site and run gatsby serve again.
So, you can run directly the index.html file because you will be missing some assets, keys to the good operation of the project.
You also have a section in the docs related to Deployment and Hosting as well as some related blog posts (Deployment and Hosting respectively).
gatsby serve, on the other hand, just opens the port in your local browser.
Which file I need to share/upload in server to give others view/demo?
All the /public folder.
run: gatsby build or gatsby serve and then try to open your website after running that command. Don't worry you can still work on it as usual after running build or serve commands.
Related
I am trying to deploy my react node application using shared hosting and I am getting a blank page. All the solutions found are not working
Here's how my folder structure is in my cpanel's file manager;
in the public-html folder, I have everything that was in the build folder(static files and an index.html file)
I also have another folder where I have my server application and this is how I am trying to serve the static files :
app.use(express.static(path.resolve(__dirname, '../client/build')));
app.use('/public',express.static(path.join(__dirname,'../client/public')))
I am assuming here is where the problem is but I have never done this before so can't figure out
Any help will be greatly appreciated
So, I'm heading to new territory in web dev.
I set up a basic npm project using npm init in my project folder. I don't have angular, react or any other Dev framework running. Basically I want to get started with some npm packages to easily update the things I need.
For my first test I picked bootstrap and font-awesome.
For testing I have a http-server running and displaying a index.html file from the public folder.
The site I'm displaying is a basic html site for now. How do I actually implementy packages the right way? Using <link rel="stylesheet" href="/path/to/node_modules/..."> is one option but not actually the way it is done, right?
Or will it be repacked once I'm ready for production. Since node_modules is not going to be transferred to the prod server.
Thank you very much in advance!
there is a difference between running javascript in nodejs and the browser javascript engine.
although nodejs is built on top of v8 javascript engine, nodejs is different in some ways, here are 2 of them:
nodejs is used mainly in server-side programming, where javascript is used for client-side
nodejs has builtin libraries which are not in the javascript specifications
if you are developing a client-side in nodejs (using react, angular or any other client-side frameworks), you will have to "convert" (a process called transpiling) it to run within the browser.
there are several tools which can help you in the process of transpiling your code. some famous ones are webpack and parcel in conjunction with babel (to pollyfill) to "build" your project and yield a bundled (few javascript file, usually one, that bundles all the javascript code into one of more files) javascript file(s), which are loaded by the webpage.
as you can see, once the project is bundled, node_modules directory has no use -- exactly what you want.
I'm building a small project using Angular 7. When you run
ng serve
and a NodeJS server is spun up to handle requests, does each request block until processing is complete? We are trying to evaluate how effective using this in production would be as opposed to using a more traditional application server.
Run build --prod to generate a "./dist" folder.
Then you have to put that on a web server.
You can use Angular Server Side Rendering (SSR) to run it on a node.js server.
You should not use ng serve for production because it use webpack-dev-server that is build for development only.
Github link
ng serve runs a webpack development server behind the hood.
a development server.
It's made to mimic the production build and see your final application in an esay way.
If you didn't have that command, you would need to run a command like simplehttpserver after rebuilding all of your application on every change.
This is a convenience tool provided by the CLI to ease your development, in no case it's suited for production mode. This is a server without security, without optimization, without performance, without ... Well, without anything that makes a server, a server. By default, it deosn't even make your application accessible outside of your localhost. Not so useful for a production mode ...
So, never, I repeat, never, use this command for your production server.
Run ng build --prod
It will generate minification code in "dist" folder. you have to upload the file content of this "dist" folder. It will give faster response for loading web pages.
For more details please refer Angular deployment guide
When using ng serve, you are spawning a backend nodejs environment with a web server to handle requests towards your angular application. That's great for reloading and quick startup when developing. But needing such resources for static pages is unnecessary.
At the end of the day Angular is just a framework telling you its opinion on how to build an SPA. No matter the framework or library you use, you will always end up with an index.xxx, Javascript files and other resource files from vendors or internally. Only these matters to the browser loading the webpage.
Hence, you need to build your app to generate the static files that will be served (i.e. ng build --prod). Then you have 2 good options:
Choose a web server that will serve the files (i.e. nginx) on a dedicated server (or even container).
Place the files behind a CDN provider. Since they are static, they will be cached and served to a browser requesting them based on its location.
I would opt for #2 as opposed to #1 forcing you to keep running resources (CPU, RAM, HDD) for files that will be requested not that often. I say not often because your SPA will be handling all routes within itself in the client's browser (and minimum once a day will request a cache refresh).
I've been working on building a video conferencing application by following this tutorial.
It's a great tutorial, and everything worked awesome when developing. However, when pushing to production I had issues and I'm not well-versed enough with these tools to figure out what's wrong.
I changed my NODE_ENV=PROD in my .env file. Which should trigger the production express build located here. (tutorial github link)
Next, I ran npm run build as I wanted to build my bundle.js, etc in the dist/ directory. I copied the three files from dist/,
bundle.js
common.js
index.html
Into my web server's directory, but now when visiting /token route, I get a 404. This doesn't happen on DEV, so it has to be something with the way the express server.js is written.
Unfortunately, I'm having trouble deducing what the issue is.
Environment details - I'm using a hostgator account, and copying files into the cpanel file manager. I've hosted lot's of JS applications like this before, but usually if I'm using a back-end it's a django server, so this (express) is new for me.
It is because express server is not running in your production environment. As express is used to build web server listening on specific port. In your case you have deployed the static files but the server is not running.
I've created a React app that uses Google's Material Design Polymer components with react-polymer. When running my app through the webpack-dev-server, all Polymer components are rendering properly.
But once I upload this to my Apache2 server on digitalocean, none of the components are rendering at all. I'm not receiving any network errors either of assets not being fetched. At first, I thought it was the mod_pagespeed that was stripping my styles and Polymer imports, but disabling it didn't help.
I've tried serving my site locally with a basic node.js server and again, the Polymer components aren't rendering.
I've also vulcanized my html file, embedding the imports right in. This same vulcanized file works successfully on my local webpack-dev-server, but again fails to render the polymer components on both my local node.js server and my Apache2 server on digitalocean.
What's so special about the webpack-dev-server that's allowing it the Polymer elements to render?
I'm sure I'm overlooking something extremely basic. Any help?
Dumb mistake. I figured out that webpack-dev-server was compiling everything to memory, but not to disk. I was running my older bundle.js file in all the other servers all along. Re-running webpack to recompile everything fixed the problem.
From the webpack-dev-server docs:
This modified bundle is served from memory at the relative path
specified in publicPath (see API). It will not be written to your
configured output directory. Where a bundle already exists at the same
URL path, the bundle in memory takes precedence (by default).