i have installed polymer starter kit 1.3.0, Using gulp serve i can access index.html located in app folder at localhost:5000.
i have two questions.
1) My question is how to access pre-developed components located at /bower-components/ on web browser?
i have tried to install and serve gulp in /bower-components/,but it still serve the /app/index/
i am not able to access components references on web browser.
2) After complete development how to host it without gulp, ex. on xampp?
You could use Python's HTTP server to serve up the bower_components directory, allowing you to access the subdirectories offline:
Open a terminal into bower_components/
Run: python -m SimpleHTTPServer 8000 to start an http server on port 8000.
Open a browser to http://localhost:8000/{dir}, where {dir} is the directory name of the component you wish to view (e.g., http://localhost:8000/paper-ripple/).
I think in the starter kit, bower_components directory is mapped to the /components url when you use gulp serve. This is the same url as your app/elements directory.
This is designed so that you app-elements can access polymer by a url of ../polymer/polymer.html (and similarly for the other elements)
Related
I have a project in gatsby which uses Node.js/express for backend with MySQL.
Now, I know that all I have to do is gatsby build and that will create the static html/css/js files for me in the project/public folder and I can paste all of them in public_html folder and that will work(it is working), but Im confused about the database thing:
My issue is that in the gatsby-config.js when I change the mySql connection from localhost to the hosted db settings such as:
(The commented one is the hosted db configurations)
If I run gatsby develop while uncommenting the code. It says No such DB Error(obviously). So How can I configure the db settings here and also in the gatsby-node.js file to connect the db with the project?
I know this might sound like a dumb question but please help as I'm confused about what to do next.
Thanks.
Okay! Spent a lot of time on this. Hope it will help others.
Static Gatsby site
If you're trying to host a static gatsby site on any shared hosting. By static, I mean just plain gatsby styled pages,
You can do as the gatsby doc says:
Run : gatsby build or npm run build.
According to gatsby:
Gatsby will perform an optimized production build for your site, generating static HTML and per-route JavaScript code bundles.
After this : try npm run serve.
According to gatsby :
Gatsby starts a local HTML server for testing your built site. Remember to build your site using gatsby build before using this command.
serve will test your build files(newly created files in yourprojectroot/public dir)
This will run your project(using the build files) on a test server(localhost:9000) to basically test your build files.
Test this localhost:9000, If everything is working good. You can go to your remote cPanel and paste all your build files into the public_html folder.
Head over to your domain and you're good to go.
Gatsby with MySQL and Node/express
If you are trying to host your gatsby site which works a little with node and mysql as well and you are a newbie in hosting like me, Here's what you'll want to do:
Try both the points mentioned above. (Build your static files and try serve)
Setup your db on the remote as well with the same name dbname, username and password as your local one.
Two extra things:
Now, what you are going to do is to run both the node and gatsby(webpack) servers on the same port (say 8001). So we are going to use only the node server and serve all our gatsby files(build files) as static content to node server.
In your node file, add:
app.use(express.static(path.join(__dirname, 'public')));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname,'public/index.html'));
});
As you are going to run all your gatsby pages through index.html the last get('/*'... (above) will take care of all the pages request. Change the path public according to your remote folder structure
Add the build files along with the node(server connection) file in the public_html folder on remote.
Next add or change your .htaccess file (in the remote) to :
RewriteEngine On
RewriteRule ^$ http://127.0.0.1:8001/ [P,L]
RewriteRule ^(.*)$ http://127.0.0.1:8001/$1 [P,L]
So when you run your node file through the server's terminal, instead of yourdomainname.com:8001 the above mentioned .htaccess will redirect it to yourdomainame.com only
All done.
Your public_html now should contain the build files,a node/express conn file and .htaccess file.
Now, just go to your terminal. cd into public_html and run node yournodefilename.
You can head over to your domain now.
Note : You can use pm2 package to keep your node server always running.
Hope it helps somebody.
You should use environment variables to switch between configurations (locally and production). Environment files are files that store sensitive data such as API keys, tokens, etc, so they must be ignored and untracked to avoid pushing critical data to a public repository.
By default, Gatsby uses .env.development and env.production respectively for gasby develop and gatsby build commands, of course, you can override this behaviour but, assuming the default configuration, you should add the following snippet to your gatsby-config.js:
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
Then, you need to create a .env.development and .env.production in the root of your project with the following content:
DB_HOST:yourHost
DB_USER:yourUserName
DB_PASSWORD:yourPassword
DB_NAME:youDatabaseName
Of course, each file should have different variables if you want to switch between databases or configurations.
Add them to your gatsby-config.js:
connectionDetails:{
host: process.env.DB_HOST
user: process.env.DB_USER
password: process.env.DB_PASSWORD
database: process.env.DB_NAME
}
The final step is to add, in your host, the environment file in order to make them accessible by Gatsby. S3 by Amazon allows to configure them but I guess that it's a common configuration for the hostings.
I have developed an application using nodejs & react. I want to host my application using the same Port: 3000 on IIS server?
I would just comment, but my reputation is a little low.
The best option for you would be to run IISNode. Supported by MS and available on Github here: https://github.com/Azure/iisnode.
First, you need to install the node on the windows:
https://nodejs.org/en/download/
install IIS by following these steps:
Open control panel
select Programs and Features, click on the link Turn Windows features
on or off.
Click on the Internet Information Services checkbox and select iis
required features.
open the iis manager from the installed application.
https://learn.microsoft.com/en-us/iis/install/installing-iis-85/installing-iis-85-on-windows-server-2012-r2
after installing node and iis open command prompt as administrator and enter to the react js application folder.
example:
my react js application is under the C:\windows\system32\
to go to that path use command:
cd C:\windows\system32\my-app
run react app using :
npm start
check that the application is running properly or not.
then run the command:
npm run build
You can see the build folder in your application folder.
now open iis manager.
select server name from the connection pane.right-click on it and
select add-website:
in add website windows enter details like site name folder path the port number, IP address, hostname, etc
note: select the build folder when you add the site path.
Open site by click on the browse button from the action pane.
after generating a development build with npm run build i get the message saying
"Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work."
What is the best way to do this with nginx? Currently to test it i am using an npm module called serve.
Also, if i got to my homepage at mydomain.com and search for a user, everything works like it is supposed to, redirecting me to mydomain.com/users/brad but if i then do a url search formydomain.com/users/brad i get a not found error, any help is appreciated!
In my case, when I have to serve static content with nginx, it often looks like :
location /static {
alias $myroot/staticfiles;
}
Also, if you haven't already, read the NginX guide to Serving Static Content.
If your are familiar with the Docker technology i would recommend to use a Docker Nginx Container and add your static content from the Webpack Buildflow to your container (this can be automated with a build server). Have a look at the following Docker Image from Nginx: https://hub.docker.com/_/nginx/.
Otherwise you have to install nginx on your Server where you host your Homepage. For this have a look at your Server OS and reach out to the web for a detailed nginx setup for your server. Without any configurations nginx will serve the static content on Linux-like server from /usr/share/nginx/html
If you only have FTP Access to your server you can transfer your built files via FTP/SFTP to a specific folder e.g /myHomepage and then your static content is server from yourdomain.de/myHompage.
Background: My PHP projects (CakePHP, Wordpress) run on an Ubuntu server in my network, I access them through a development TLD (.dev for example) setup through a local DNS server and I edit the files through a Samba share.
I would like to utilize Livereload for my development, preferably have it running on the server itself. I have basic Node/Gulp knowledge, but haven't been able to get this running.
Livereload (or a middleware server) should proxy the 'real' URLs, making sure all websites run as they would normally and Livereload should be available over the network (so not just localhost, because that runs on the development server)
Desired result:
Livereload runs on my dev server (IP: 10.0.0.1), my project is called helloworld.dev, I browse to 10.0.0.1:3000 on my machine and see helloworld.dev proxied through Livereload. I now edit a CSS file over the Samba share and the CSS is reloaded without a refresh.
I've tried using a few NPM packages, gulp-livereload, livereload, node-livereload, with their provided examples that come with the packages, but haven't been able to get the desired result. They all expect you to run in locally, don't support access to the Livereload URL over the network, cannot proxy the 'real' URLs or require static content.
Can anyone provide an example or 'proof of concept' code of my wish, so I can see where to start?
I found the answer: http://nitoyon.github.io/livereloadx/
This does EXACTLY what I need.
I can run
livereloadx -y http://helloworld.dev -l
open
http://serverip:35729
and I'm ready to roll.
The -y option creates the proxy to the 'real' URL and the -l makes it serve files from local filesystem instead of through its proxy.
I've a problem with a nodejs app which should serve js assets to the client.
I've installed some modules using npm (primus or socket.io for example), and i want to send these js files to the browser.
Using jade and having a public folder in the root of my project is simple:
script(src='/js/lib/jquery-2.1.0.min.js')
script(src='/js/lib/bootstrap.min.js')
This example loads with success to the browser the scripts below.
But how can do the same with libraries inside the node_modules folder?
You should not need to send npm/.js files intended to be run by node to the browser, the browser will not know what to do w/ it.
For socket.io if you just do:
var io = require('socket.io').listen(app);
on the node/server side, where "app" is your express server, socket.io will automatically take care of serving up the appropriate browser .js files at the /socket.io/socket.io.js url. The reason for this is that it will server up a slightly different socket.io.js file for every client.
not sure about primus.